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

问题描述

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

< a id =gp_loginhref =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，
范围：https://www.googleapis.com/auth/plus.login电子邮件
}）
 
 
函数gPSignInCallback（e）{
 if（e [status] [signed_in]）{
 gapi.client.load（plus ，v1，function（）{
 if（e [access_token]）{
 getProfile（）
} else if（e [error]）{
 console.log（出现错误：+ e [error]）
} 
}）
} else {
 console.log（登录状态：+ e [error]）
} 
} 
 
 function getProfile（）{
 var e = gapi.client.plus.people.get {
 userId：me
}）; 
 e.execute（函数（e）{
 if（e.error）{
 console.log（e.message）; 
 return 
} else if（ e.id）{
 //保存配置文件数据
} 
}）
}（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登录链接所在的页面，个人资料数据已保存并且用户已登录。

解决方案

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

gapi.auth.signIn打开认证窗口。
在您的应用程序中保存认证窗口url ¹ 。
而不是调用gapi.auth.signIn，将用户重定向到该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=令牌 & redirect_uri = http://example.com

这样谷歌会把用户重定向回你的网站。 access_token是通过GET参数提供的。

¹ 如果google更改了API，这可能会中断（因为此方法绕过JS API并假定所有这些

² Redirect_url在离线访问流程文档。我不认为这个参数是打算在任何其他情况下工作。

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

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()">Login using 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)
})()

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.

解决方案

Such functionality is not provided through Google API. You should stick with gapi.auth.signIn. I know just one way to make it work, but it's very hacky.

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

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.

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

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

¹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 is introduced in offline access flow documentation. I don't think this param was intended to work in any other cases.

I strongly advise not to use this idea (since it bypasses JS API and uses undocumented functionality). Stick with gapi.auth.signIn.

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