如何从 Google 使用重定向模式登录（无弹出窗口）获取个人资料信息？

Question

获取登录的客户端文件后，我是这样做的：

// HTML 
<script type='text/javascript' src="https://apis.google.com/js/api:client.js" async defer></script>

我将 gapi.load() 函数调用到 HTML 按钮中

// load the startApp function after the page loads
jQuery(function () {
    $(window).load(function () {
       startApp()
    })
})


var startApp = function () {

    gapi.load('auth2', function () {

        // Retrieve the singleton for the GoogleAuth library and set up the client.
        auth2 = gapi.auth2.init({
            client_id: 'xxxxxxxx-xxxxxxxxxx.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin',
            ux_mode: 'redirect',      // I don't want it to display a pop-up 
            scope: 'profile email'    // I just need to get user's name, profile picture and email address
        });

        // attach this function into a button element with id = "customBtn"
        attachSignin(document.getElementById('customBtn'));

    });
};

function attachSignin(element) {
    auth2.attachClickHandler(element, {},
        function (googleUser) {

            // it never calls this block of code.
            // this never runs
            console.log(googleUser.getBasicProfile().getName())
            var gProfile = googleUser.getBasicProfile();
            var name = gProfile.getName();
            var email = gProfile.getEmail();
            var imgUrl = gProfile.getImageUrl();
        }, function (error) {
            return alert("Google Sign in error!")
        });
}

它将必要的功能加载到一个按钮中。如果用户单击该按钮，用户将被重定向到 Google 的登录页面。用户成功登录后 Google 会将 URL 重定向回我的网站。

还应该 将用户的个人资料信息发送到 attachSignin() 中我的 attachClickHandler() 函数中。但它永远不会发生，因为它会在调用处理函数之前重新加载页面。它只有在我将 ux_mode: 'redirect' 更改为默认值时才有效' popup

我现在能做的最好的事情就是在登录后从 Google 给 URL 的 token_id 参数中获取电子邮件地址。 URL中的id_token字段是一个可以解码的jwt

http://localhost:3006/login#scope=email%20profile%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile%20openid&id_token=xxxxxxxxx&client_id=xxxxxxxxxxxx-xxxxxx.apps.googleusercontent.com

那么如何获取 ux_mode 设置为 redirect 的用户的个人资料信息？

Answer 1

我修改了你的代码使其工作：

var startApp = function () {

    gapi.load('auth2', function () {

        // Retrieve the singleton for the GoogleAuth library and set up the client.
        auth2 = gapi.auth2.init({
            client_id: 'xxxxxxxx-xxxxxxxxxx.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin',
            ux_mode: 'redirect',      // I don't want it to display a pop-up 
            scope: 'profile email'    // I just need to get user's name, profile picture and email address
        });

        // attach this function into a button element with id = "customBtn"
        attachSignin(document.getElementById('customBtn'));

        
        // START NEW CODE
        auth2.currentUser.listen(function(googleUser) {
            if (googleUser && (gProfile = googleUser.getBasicProfile())) {
                var name   = gProfile.getName();
                var email  = gProfile.getEmail();
                var imgUrl = gProfile.getImageUrl();

                console.log({name, email, imgUrl});
            }
        });
        // END NEW CODE

    });
};

// Can remove callbacks if not using pop-up
function attachSignin(element) {
    auth2.attachClickHandler(element, {});
}

解释：

当使用重定向而不是弹出窗口时，监听 currentUser 而不是 attachClickHandler() 回调。 Google API 将检测并使用重定向参数，触发 currentUser.listen 处理程序。

来源：

如何从 Google 使用重定向模式登录（无弹出窗口）获取个人资料信息？

How to get Profile info from Google Signin with redirect mode (no-popup)?

javascript

html

google-signin