Google 使用 Javascript API 登录而不触发弹出窗口
Google sign-in using Javascript API without triggering popup
我正在使用以下代码让用户能够通过 Javascript API.
使用他们的 Google 帐户登录
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)
})()
此代码运行良好。
我想使用上面的代码(使用 Javascript)从他们的 Google 帐户 登录用户,而不触发弹出窗口 window。例如,用户单击登录 link,在同一 window/tab 中请求应用程序权限,用户授予权限,用户重定向回 Google 登录 link 所在的页面,个人资料数据已保存且用户已登录。
Google API 未提供此类功能。你应该坚持 gapi.auth.signIn。我只知道一种让它工作的方法,但它非常 hacky。
gapi.auth.signIn 打开身份验证 window。
在您的应用1 中保存身份验证 window url。
不要调用 gapi.auth.signIn,而是将用户重定向到 url.
要将成功的身份验证重定向回您的网站,add/modify redirect_url url2 中的参数。请记住,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
这样 google 会将用户重定向回您的网站。 access_token 通过 GET 参数提供。
1如果 google 更改它们的 API 这可能会中断(因为此方法绕过 JS API 并假设所有这些参数在url 将永远得到支持。
2Redirect_url在offline access flow documentation中引入。我认为此参数不适用于任何其他情况。
我强烈建议不要使用这个想法(因为它绕过了 JS API 并使用了未记录的功能)。坚持 gapi.auth.signIn.
您可以使用 ux_mode 参数(选项为 'redirect' 或 'popup') 并设置 redirect_uri 如果你想重定向到不同的页面。
还需要在您的 google 项目页面上为 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;
});
}
我正在使用以下代码让用户能够通过 Javascript API.
使用他们的 Google 帐户登录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)
})()
此代码运行良好。 我想使用上面的代码(使用 Javascript)从他们的 Google 帐户 登录用户,而不触发弹出窗口 window。例如,用户单击登录 link,在同一 window/tab 中请求应用程序权限,用户授予权限,用户重定向回 Google 登录 link 所在的页面,个人资料数据已保存且用户已登录。
Google API 未提供此类功能。你应该坚持 gapi.auth.signIn。我只知道一种让它工作的方法,但它非常 hacky。
gapi.auth.signIn 打开身份验证 window。 在您的应用1 中保存身份验证 window url。 不要调用 gapi.auth.signIn,而是将用户重定向到 url.
要将成功的身份验证重定向回您的网站,add/modify redirect_url url2 中的参数。请记住,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
这样 google 会将用户重定向回您的网站。 access_token 通过 GET 参数提供。
1如果 google 更改它们的 API 这可能会中断(因为此方法绕过 JS API 并假设所有这些参数在url 将永远得到支持。
2Redirect_url在offline access flow documentation中引入。我认为此参数不适用于任何其他情况。
我强烈建议不要使用这个想法(因为它绕过了 JS API 并使用了未记录的功能)。坚持 gapi.auth.signIn.
您可以使用 ux_mode 参数(选项为 'redirect' 或 'popup') 并设置 redirect_uri 如果你想重定向到不同的页面。
还需要在您的 google 项目页面上为 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;
});
}