在线时未呈现Google加号登录按钮 [英] Google plus sign in button not rendered when online

问题描述

我正在为我的新手机游戏开发一个社区站点，并试图向其中添加google plus登录流.

I'm developing a community site for my new mobile game and I'm trying to add the google plus sign in flow to it.

在实施过程中采取的步骤:

->关注了此 Google开发人员教程

-> Followed this google developers tutorial

HTML按钮代码:

     <span id="signinButton">
        <span
            class="g-signin"
            data-callback="onSignInCompleted"
            data-clientid="<myID>.apps.googleusercontent.com"
            data-cookiepolicy="single_host_origin"
            data-requestvisibleactions="http://schemas.google.com/AddActivity"
            data-scope="https://www.googleapis.com/auth/plus.login">
        </span>
    </span>

JavaScript加载代码:(仅在主体关闭之前)

Javascript load code: (just before body closure)

    <script type="text/javascript">
      (function() {
       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
       po.src = 'https://apis.google.com/js/client:plusone.js';
       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
     })();
</script>

---

问题:

->该实现在本地主机上运行正常

-> The implementation works fine in localhost

->该实现无法在线运行(即已上传到服务器上)

-> The implementation doesn't work online (i.e. uploaded on the server)

在线页面异常行为:

->按钮未呈现

->未调用签名的回调

我的Web应用程序OAuth 2.0 javascript的起源:

https://fcouceiro.com
https://www.fcouceiro.com
http://www.fcouceiro.com
http://fcouceiro.com
http://meatify:8888

我当前使用的是fcouceiro.com作为来源，但想法是在解决此问题后使用meatify.fcouceiro.com子域.

I'm currently using fcouceiro.com as origin, but the idea is to use meatify.fcouceiro.com subdomain after this problem is solved.

更新:经过一些实验，我发现有时候(就像您第一次访问该页面一样)它确实会被渲染(按钮).因此，我认为问题可能出在例如html之后加载的脚本.当我使用jQuery加载功能加载包含登录按钮的html页面时.然后onload被调用，脚本试图找到我的按钮，但是它不可用.你觉得呢?

UPDATE: after some experiments i've found that sometimes (like the first time you're visiting the page) it does get rendered (the button). So I'm thinking the problem clould be the script being loaded after the html for instance. As I'm using the jQuery load function to load an html page that contains the sign in button. And than the onload gets called and the script tries to find my button but it isn't available. What do you think?

您可以在这里找到我的页面: http://fcouceiro.com

You can find my page here: http://fcouceiro.com

APPy编码！

推荐答案

好的.问题解决了！谢谢你的帮助.这是解决方案(复杂的一个...):

Ok guys. Problem solved! Thanks for your help. Here is the solution (complex one...):

只需确保在按钮加载"后(如果您使用html渲染方法)就加载了google +登录按钮的javascript.我的问题是我的登录按钮是由jQuery加载功能加载到div中的，有时此功能需要一些时间来执行.幸运的是，在该函数中，我已经设置了一个回调参数来加载我的g + js！

Just make sure that the javascript for the google + sign in button is loaded after the button is "loaded" (if you use the html render method). My problem was that my sign in button was loaded by jQuery load function into a div and sometimes this function takes some time to execute. Fortunately there is a callback argument in that function that I've set up to load my g+ js!

再次感谢您！

这篇关于在线时未呈现Google加号登录按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！