javascript - 如何使用重定向模式(无弹出)从 Google Signin 获取个人资料信息?
问题描述
在获取登录的客户端文件后,我是这样做的:
// 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 重定向回我的网站。
它还应该将用户的个人资料信息发送到我attachClickHandler()
在attachSignin()
. 但它永远不会发生,因为它在调用处理函数之前重新加载页面。仅当我将其更改ux_mode: 'redirect'
为默认值时才有效popup
我现在能做的最好的就是从token_id
登录后谷歌在 URL 中提供的参数中获取电子邮件地址。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
呢?
解决方案
我修改了你的代码,所以它可以工作:
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
处理程序。
资料来源:
推荐阅读
- node.js - GCP Secret Manager 抛出:“路径”参数必须是字符串类型
- flask - 如何使用 Flask/Heroku 修复 500 内部错误?
- rest - Spring webflux with webclient bodyToMono UnsupportedMediaTypeException 不支持内容类型'application/json'
- python - py-thesaurus 仍然可以使用吗?
- multithreading - Vulkan 受干扰的应用程序在互斥锁下的队列提交中收到错误消息
- python - 将 UTC 时间戳(毫秒)转换为 Python Dataframe 中 HH:MM:SS 格式的本地时间戳
- python - Django - 在继承模型中保存实例的副本
- android - 无法调试 Android 应用程序,在我遇到任何断点之前就卡住了
- security - 由于 Spectre 缓解,硬件锁消除是否永远消失了?
- python - PEP8:`is True` vs `is None`