如何检查用户是否使用“Google 登录”（OAuth 2.0）登录

jordan
2016-06-29  
23799  
    
5  

我第一次按照 here 和 here 的描述实现 Google 登录。

我正在使用带有 Javascript 的 HTML。

需要解决的问题如下： 初次登录后，如何在不同的页面（例如登录页面，或用户登录后看到的门户）上检查用户是否已登录？我可以调用一项服务来使用我的应用程序密钥或类似的东西检查用户的登录状态吗？我假设我必须在每个页面上包含谷歌 API。

登录页面代码：

头中的脚本（上面列出的 Google 教程中的代码）：

<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 教程的第一行，第二行触发注销测试）

<body>
...
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div onmousedown="logout()">Logout</div>
...
</body>

有什么方法可以在另一个页面上包含谷歌 API，然后调用一些检查登录状态功能？或者另一种具体判断用户是否登录或退出的方法？

javascript ,  html ,  oauth ,  oauth-2.0 ,  google-api
stack overflow How to check if user is logged in or not with "Google Sign In" (OAuth 2.0)
原文答案
author avatar
Ozan Gunceler
2016-10-24
13
     原文

接受的答案

您可以对自定义 userEntity 对象进行字符串化并将其存储在 sessionStorage 中，您可以在加载新页面时随时检查它。我尚未测试以下内容，但它应该可以工作（以相同的方式对 WebAPI 令牌执行类似操作）

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 等现代浏览器。


答案:

作者头像
Joseph
2018-05-09    26      原文

您不需要在本地存储上存储任何内容。该库允许您检查用户是否已使用 isSignedIn.get() 对象的 auth2 上的 gapi 登录。

加载 JavaScript 库，确保没有延迟加载：

<script src="https://apis.google.com/js/platform.js"></script>

然后初始化库并检查用户是否登录

var auth2;
var googleUser; // The current user

gapi.load('auth2', function(){
    auth2 = gapi.auth2.init({
        client_id: 'your-app-id.apps.googleusercontent.com'
    });
    auth2.attachClickHandler('signin-button', {}, onSuccess, onFailure);

    auth2.isSignedIn.listen(signinChanged);
    auth2.currentUser.listen(userChanged); // This is what you use to listen for user changes
});  

var signinChanged = function (val) {
    console.log('Signin state changed to ', val);
};

var onSuccess = function(user) {
    console.log('Signed in as ' + user.getBasicProfile().getName());
    // Redirect somewhere
};

var onFailure = function(error) {
    console.log(error);
};

function signOut() {
    auth2.signOut().then(function () {
        console.log('User signed out.');
    });
}        

var userChanged = function (user) {
    if(user.getId()){
      // Do something here
    }
};

不要忘记更改 app id

作者头像
Igor Vujovic
2020-05-20    5      原文

要检查是用户登录的使用：

gapi.auth2.getAuthInstance().isSignedIn.get()
作者头像
Phyrik
2020-04-08    1      原文

再加上上面的约瑟夫答案，您可以通过调用 auth2.currentUser.get().getBasicProfile() 来获取有关用户的信息。

    if (auth2.isSignedIn.get()) {
        googleUserProfile = auth2.currentUser.get().getBasicProfile()
        console.log('ID: ' + googleUserProfile.getId());
        console.log('Full Name: ' + googleUserProfile.getName());
        console.log('Given Name: ' + googleUserProfile.getGivenName());
        console.log('Family Name: ' + googleUserProfile.getFamilyName());
        console.log('Image URL: ' + googleUserProfile.getImageUrl());
        console.log('Email: ' + googleUserProfile.getEmail());
    }

从文档： https://developers.google.com/identity/sign-in/web/people

作者头像
Shaybc
2022-05-08    0      原文

根据 Phyrik post ( https://developers.google.com/identity/sign-in/web/people ) 的链接 -

google 停止支持 Sign-In Javascript web auth API：

我们是 discontinuing the Google Sign-In JavaScript Platform Library for web 。在 2023 年 3 月 31 日弃用日期之后，该库将无法下载。相反，使用新的 Google Identity Services for Web 。默认情况下，现在阻止新创建的客户端 ID 使用旧平台库，现有客户端 ID 不受影响。在 2022 年 7 月 29 日之前创建的新客户 ID 可以设置 plugin_name 以启用 Google 平台库。

相关问题

标签