Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
574 views
in Technique[技术] by (71.8m points)

javascript - 用户使用Google登录名登录我的网站后,无法检索个人资料信息(Unable to retrieve profile information after user logs in to my website with Google sign in)

I am trying to integrate Google sign in, in my website.(我正在尝试在我的网站中集成Google登录。)

I followed the instructions give on the page Google sign in page.(我按照Google登录页面上的说明进行操作) I properly set the client ID and after creating the project following the instructions given.(我按照给定的说明正确设置了客户端ID,并在创建了项目之后。) The sign in page is showing up properly and asking me to give permissions to the application to access the basic profile and email details.(登录页面正确显示,并要求我授予该应用程序访问基本个人资料和电子邮件详细信息的权限。) Once I click accept, I am not able to retrieve the user profile details and print to the console in the javascript function that gets called after a successful login.(单击接受后,我将无法检索用户个人资料详细信息并无法在成功登录后调用的javascript函数中打印到控制台。) The following is the code:(以下是代码:)
<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>

I have removed the client id in the code posted above for privacy reasons, but in the actual implementation I have included it.(出于隐私原因,我已在上面发布的代码中删除了客户端ID,但在实际实现中,我已将其包含在内。)

  ask by Vmove Testing translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I'm not fully understandable with your code(我对您的代码不完全理解)

But try this code.(但是尝试此代码。)

Its working fine for me(对我来说很好)

Include it in <head> tag(将其包含在<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>

Include it in <Body>(将其包含在<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>

and the script for retrieving the data(和用于检索数据的脚本)

dont for get to add this(不要添加它)

<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>

Check on console the data will be their.(在控制台上检查数据是否正确。)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...