Google 使用 Javascript API 登录而不触发弹出窗口 [英] Google sign-in using Javascript API without triggering popup

问题描述

我使用以下代码让用户能够通过 Javascript API 使用他们的 Google 帐户登录.

I am using following code for users to be able to login using their Google account via Javascript API.

HTML

<a id="gp_login" href="javascript:void(0)" onclick="javascript:googleAuth()">使用 Google 登录</a>

Javascript

function gPOnLoad(){
     // G+ api loaded
     document.getElementById('gp_login').style.display = 'block';
}
function googleAuth() {
    gapi.auth.signIn({
        callback: gPSignInCallback,
        clientid: googleKey,
        cookiepolicy: "single_host_origin",
        requestvisibleactions: "http://schema.org/AddAction",
        scope: "https://www.googleapis.com/auth/plus.login email"
    })
}

function gPSignInCallback(e) {
    if (e["status"]["signed_in"]) {
        gapi.client.load("plus", "v1", function() {
            if (e["access_token"]) {
                getProfile()
            } else if (e["error"]) {
                console.log("There was an error: " + e["error"])
            }
        })
    } else {
        console.log("Sign-in state: " + e["error"])
    }
}

function getProfile() {
    var e = gapi.client.plus.people.get({
        userId: "me"
    });
    e.execute(function(e) {
        if (e.error) {
            console.log(e.message);
            return
        } else if (e.id) {
            // save profile data
        }
    })
}(function() {
    var e = document.createElement("script");
    e.type = "text/javascript";
    e.async = true;
    e.src = "https://apis.google.com/js/client:platform.js?onload=gPOnLoad";
    var t = document.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(e, t)
})()

此代码运行良好.我想使用上面的代码(使用 Javascript)从他们的 Google 帐户登录用户而不触发弹出窗口.例如，用户点击登录链接，在同一窗口/选项卡中请求应用权限，用户授予权限，用户重定向回 Google 登录链接所在的页面，个人资料数据已保存，用户已登录.

This code is working fine. I want to use the above code (using Javascript) to login user from their Google account without triggering a popup window. Like, user clicks the login link, asked for app permissions in the same window/tab, user grants permission, user redirected back to the page where Google login link was, profile data is saved and user is logged in.

推荐答案

Google API 不提供此类功能.你应该坚持使用gapi.auth.signIn.我只知道一种让它工作的方法，但它非常笨拙.

gapi.auth.signIn 打开认证窗口.在您的应用中保存身份验证窗口网址¹.不是调用 gapi.auth.signIn，而是将用户重定向到该 url.

gapi.auth.signIn opens authentication window. Save authentication window url in your app¹. Instead of calling gapi.auth.signIn, redirect user to that url.

要将成功的身份验证重定向回您的网站，请在 url² 中添加/修改 redirect_url 参数.请记住，redirect_uri 必须在开发者控制台中注册.

To redirect successful authentication back to your website, add/modify redirect_url param in the url². Keep in mind that redirect_uri must be registered in developers console.

示例:https://accounts.google.com/o/oauth2/auth?client_id=1234567890.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.login&immediate=false&response_type=token&redirect_uri=http://example.com

这样谷歌会将用户重定向回您的网站.access_token 通过 GET 参数提供.

This way google will redirect user back to your website. access_token is provided through GET params.

¹如果 google 更改他们的 API，这可能会中断(因为此方法绕过 JS API 并假设 url 中的所有这些参数都将被永远支持).

¹If google changes their API this may break (since this method bypasses JS API and assumes that all those params in the url will be supported for ever).

²Redirect_url 在离线访问流程文档中介绍.我认为此参数不适用于任何其他情况.

²Redirect_url is introduced in offline access flow documentation. I don't think this param was intended to work in any other cases.

我强烈建议不要使用这个想法(因为它绕过了 JS API 并使用了未记录的功能).坚持使用 gapi.auth.signIn.

这篇关于Google 使用 Javascript API 登录而不触发弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！