Google 使用 Javascript API 登录，无需触发弹出窗口

Question

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

.HTML

<a id="gp_login" href="javascript:void(0)" onclick="javascript:googleAuth()">Login using Google</a>

爪哇语

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登录链接所在的页面，保存个人资料数据并登录用户。

Answer 1

您可以使用

ux_mode参数（选项是"重定向"或"弹出"），如果要重定向到其他页面，请设置redirect_uri。

还需要在谷歌项目页面上授权OAuth客户端的URL。

  function initClient() {
    gapi.client.init({
      apiKey: API_KEY,
      clientId: CLIENT_ID,
      discoveryDocs: DISCOVERY_DOCS,
      scope: SCOPES,
      ux_mode: 'redirect',
      //redirect_uri: custom url to redirect'
    }).then(function () {
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      authorizeButton.onclick = handleAuthClick;
      signoutButton.onclick = handleSignoutClick;
    });
  }

Answer 2

此类功能不是通过 Google API 提供的。你应该坚持使用gapi.auth.signIn。我知道只有一种方法可以让它工作，但它非常黑客。

gapi.auth.signIn 打开身份验证窗口。在应用中保存身份验证窗口 URL¹.不要调用 gapi.auth.signIn，而是将用户重定向到该 URL。

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

例：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参数提供的。

¹如果谷歌更改他们的 API，这可能会中断（因为此方法绕过了 JS API，并假设 url 中的所有参数都将永远受支持）。

2

离线访问流文档中引入了 ²Redirect_url。我不认为这个参数在任何其他情况下都有效。

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