如何使用“Google 登录"检查用户是否已登录(OAuth 2.0) [英] How to check if user is logged in or not with "Google Sign In" (OAuth 2.0)
问题描述
我使用 HTML 和 Javascript.
I am using HTML with Javascript.
需要解决的问题如下:如何在初次登录后，在不同的页面(比如登录页面，或者用户登录后看到的门户)，检查用户是否登录?是否有我可以调用的服务来使用我的应用程序密钥或类似的东西检查用户的登录状态?我想我必须在每个页面上都包含 google API.
The problem that needs solving is as follows: How can I, after the initial login, on a different page (say a landing page, or portal that the user sees after logging in), check if the user is logged in? Is there a service I can call to check the user's login in status with my app key or something similar? I assume I would have to include the google API on each page.
登录页面代码:
Script In Head(上面列出的 Google 教程中的代码):
Script In Head (Code from Google's tutorial listed above):
<head>
....
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSignIn(googleUser)
{
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
alert(profile.getName());
}
function logout()
{
alert('logging out');
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
...
</head>
正文中的代码(上面列出的 Google 教程的第一行，触发注销测试的第二行)
Code In Body (1st line from Google's tutorial listed above, 2nd line to trigger logout test)
<body>
...
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div onmousedown="logout()">Logout</div>
...
</body>
有什么方法可以将 google API 包含在另一个页面上，然后调用一些检查登录状态功能?或者用另一种方式来具体判断用户是登录还是退出?
Is there some way I can include the google API on another page, and then call some check login status function? Or another way to concretely tell if the user is logged in or out?
推荐答案
您可以将自定义 userEntity 对象字符串化并将其存储在 sessionStorage 中，您可以在加载新页面的任何时候检查它.我尚未测试以下内容，但它应该可以工作(以相同的方式对 WebAPI 令牌执行类似的操作)
You can stringify a custom userEntity object and store it in sessionStorage where you can check it anytime you load a new page. I have not tested the following but it should work (doing something similar with WebAPI tokens in the same way)
function onSignIn(googleUser)
{
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId());
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail());
var myUserEntity = {};
myUserEntity.Id = profile.getId();
myUserEntity.Name = profile.getName();
//Store the entity object in sessionStorage where it will be accessible from all pages of your site.
sessionStorage.setItem('myUserEntity',JSON.stringify(myUserEntity));
alert(profile.getName());
}
function checkIfLoggedIn()
{
if(sessionStorage.getItem('myUserEntity') == null){
//Redirect to login page, no user entity available in sessionStorage
window.location.href='Login.html';
} else {
//User already logged in
var userEntity = {};
userEntity = JSON.parse(sessionStorage.getItem('myUserEntity'));
...
DoWhatever();
}
}
function logout()
{
//Don't forget to clear sessionStorage when user logs out
sessionStorage.clear();
}当然，如果 sessionStorage 对象被篡改，您可以进行一些内部检查.这种方法应该适用于 Chrome 和 Firefox 等现代浏览器.
Of course, you can have some internal checks if the sessionStorage object is tampered with. This approach should work with modern browsers like Chrome and Firefox.
这篇关于如何使用“Google 登录"检查用户是否已登录(OAuth 2.0)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
