Question

我正在尝试在我的网站中整合Google登录。我按照 Google sign in page.页面上的说明进行操作。我正确设置了客户端ID，并按照给出的说明创建了项目。登录页面正确显示，并要求我授予应用程序访问基本配置文件和电子邮件详细信息的权限。单击“接受”后，我无法检索用户配置文件详细信息，并在成功登录后调用的javascript函数中打印到控制台。以下是代码：

<html lang="en">
  <head>
    <meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" content="client_id.apps.googleusercontent.com">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
  </head>
  <body>
    <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
    <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        console.log("console works");
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        console.log("Name: " + profile.getName());
        console.log("Image URL: " + profile.getImageUrl());
        console.log("Email: " + profile.getEmail());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      };

    </script>



  </body>
</html>

出于隐私原因，我已删除了上面发布的代码中的客户端ID，但在实际实现中，我已将其包含在内。

Answer 1

我的代码不完全可以理解

但试试这段代码。它的工作正常我

将其包含在<head>代码

中

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

将其加入<Body>

<body>    
<button class="g-signin " 
                        data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
                        data-requestvisibleactions="http://schemas.google.com/AddActivity"
                        data-clientId="----YOUR CLIET ID----"
                        data-accesstype="offline"
                        data-callback="mycoddeSignIn"
                        data-theme="dark"
                        data-cookiepolicy="single_host_origin">
                    </button>
</body>

以及检索数据的脚本

不要添加此

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
var gpclass = (function(){

//Defining Class Variables here
var response = undefined;
return {
    //Class functions / Objects

    mycoddeSignIn:function(response){
        // The user is signed in
        if (response['access_token']) {

            //Get User Info from Google Plus API
            gapi.client.load('plus','v1',this.getUserInformation);

        } else if (response['error']) {
            // There was an error, which means the user is not signed in.
            //alert('There was an error: ' + authResult['error']);
        }
    },

    getUserInformation: function(){
        var request = gapi.client.plus.people.get( {'userId' : 'me'} );
        request.execute( function(profile) { 
            var email = profile['emails'].filter(function(v) {
                return v.type === 'account'; // Filter out the primary email
            })[0].value;
            var fName = profile.displayName;
            console.log(fName);
            console.log(email);
        });
    }

}; //End of Return
})();

function mycoddeSignIn(gpSignInResponse){
    gpclass.mycoddeSignIn(gpSignInResponse);
}
</script>

检查控制台上的数据将是他们的。

Answer 2

我遇到同样的问题，登录页面显示但是从未到达函数onSignIn（）。我尝试了其他几种方式，比如使用自定义登录按钮，但我遇到了同样的问题。

Google Developers Console可能存在一些问题吗？我启用了Google+ API。

用户使用Google登录后登录我的网站后无法检索个人资料信息

2 个答案: