Question

这是一个基于example

构建的页面

<html>
<head>
  <title>Demo: Getting an email address using the Google+ Sign-in button</title>
  <style type="text/css">
  html, body { margin: 0; padding: 0; }
  .hide { display: none;}
  .show { display: block;}
  </style>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
  <!--<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>-->
  <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
  <script type="text/javascript">
  /*
   * Triggered when the user accepts the sign in, cancels, or closes the
   * authorization dialog.
   */
  function loginFinishedCallback(authResult) {
    if (authResult) {

       console.log('authResult : ',authResult);
      if (authResult['error'] == undefined){
        gapi.auth.setToken(authResult); // Store the returned token.
        toggleElement('signin-button'); // Hide the sign-in button after successfully signing in the user.
        getEmail();                     // Trigger request to get the email address.
      } else {
        console.log('An error occurred');
      }
    } else {
      console.log('Empty authResult');  // Something went wrong
    }
  }

  /*
   * Initiates the request to the userinfo endpoint to get the user's email
   * address. This function relies on the gapi.auth.setToken containing a valid
   * OAuth access token.
   *
   * When the request completes, the getEmailCallback is triggered and passed
   * the result of the request.
   */
  function getEmail(){
    // Load the oauth2 libraries to enable the userinfo methods.
    gapi.client.load('oauth2', 'v2', function() {
          var request = gapi.client.oauth2.userinfo.get();
          request.execute(getEmailCallback);
        });
  }

  function getEmailCallback(obj){
    var el = document.getElementById('email');
    var email = '';
    console.log("OBJ = ",obj)
    if (obj['email']) {
      email = 'Email: ' + obj['email'];
    }

    //console.log(obj);   // Uncomment to inspect the full object.

    el.innerHTML = email;
    toggleElement('email');
  }

  function toggleElement(id) {
    var el = document.getElementById(id);
    if (el.getAttribute('class') == 'hide') {
      el.setAttribute('class', 'show');
    } else {
      el.setAttribute('class', 'hide');
    }
  }
  </script>
</head>
<body>
  <div id="signin-button" class="show">
     <div class="g-signin" data-callback="loginFinishedCallback"
      data-approvalprompt="auto"
      data-clientId="751931329576.apps.googleusercontent.com"
      data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
      data-height="short"
      data-cookiepolicy="http://semicon-equip.com"
      >
    </div>
    <!-- In most cases, you don't want to use approvalprompt=force. Specified
    here to facilitate the demo.-->
  </div>

  <div id="email" class="hide"></div>
</body>
</html>

问题1：它始终以“Uncaught TypeError: Cannot read property 'load' of undefined”，

失败

直到我使用

<script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>

而不是示例代码：

<script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>

plusone.js和client:plusone.js之间有什么区别？

enter image description here

问题2：为什么每页加载两次代码？ enter image description here

问题3：用户刚刚登录后退出了，如何修复？

enter image description here

error demo page以上（所有错误都在后台控制台中）。

Answer 1

这不是问题的答案，而是一步一步的程序来重现它。

在我用来测试的简单html页面下面（类似于Ray C Lin的例子）。我已尽可能简单地避免与代码的其他部分进行交互：

<html>
<head>
    <script type="text/javascript" 
            src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
    <input type="button" id="signOut" value="Sign out"></button>
    <span id="signinButton">
        <span class="g-signin"
            data-accesstype="offline"
            data-callback="signinCallback"
            data-clientid="YOUR_CLIENT_ID_HERE"
            data-cookiepolicy="single_host_origin"
            data-scope="email"
        </span>
    </span>
    <script type="text/javascript">

        $('#signOut').on('click', function() {
            gapi.auth.signOut();
        });

        function signinCallback(authResult) {
            console.log("signinCallback: ", authResult);
        }
        (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>
</body>
</html>

您必须使用自己的Google客户端ID更新data-clientid，并从授权的javascript来源显示此页面。

请注意，这可能无法在localhost中发挥作用，正如Ian在对此帖https://plus.google.com/102746521318753162868/posts/Z5Gkro9YXVs的评论中所建议的那样

首先，使用您的Google帐户登录：您将在控制台中看到成功的回调。

如果您点击退出，则会看到一个回复，其中包含＆＃39; user_signed_out＆＃39;在控制台中。

到目前为止一切顺利。

再次登录，等待1小时，直到令牌过期（这很难测试，因为我不知道如何减少令牌的生命周期）。

一小时后，单击“注销”按钮：不会调用回调。

再次点击登录按钮：

您获得了使用授权码和访问令牌
之后，您会收到一个＆＃39; user_signed_out＆＃39;回调。

会话过期后，无法返回＆＃34;正常＆＃34;情况，你总是通过＆＃39; user_signed_out＆＃39;。

获得第二次回调

实际上，有一种方法可以回归正常的＆＃34;情况：从Google信息中心撤消对该应用的访问权限。

这对我来说不是一个问题，因为我只使用Google+使用一次授权代码登录我的应用，并且我没有使用来自客户端的访问令牌。

但是这会阻止自动登录工作，因为用户会立即被视为＆＃34;已退出＆＃34;从谷歌的角度来看。

Answer 2

Q1：客户端：plusone.js只是告诉加载器自动加载“客户端”模块。它基本上自动执行gapi.load（“客户端”），除了它已经在一次下载中打包过。你也可以反过来这样做，加上：client.js！

第二季度：不确定，这可能是一些JS的怪癖。一般情况下，尝试让您的代码能够处理多个回调，如果状态发生变化（例如用户退出其Google帐户），您可能会获得另一个回复。

问题3：我在测试页面上没有看到 - 我已经签名确定，并且仍然在刷新时登录！检查您是否在浏览器或类似设备中阻止了第三方Cookie？

Google-plus登录：代码运行两次，用户在登录后立即注销

2 个答案: