如何检查用户是否使用 "Google Sign In" (OAuth 2.0) 登录

我是第一次实现谷歌登录，如这里和这里所述。

我正在使用HTML与Javascript。

需要解决的问题如下:我如何在初次登录后，在不同的页面(例如用户登录后看到的登陆页面或门户)检查用户是否登录?是否有一种服务，我可以调用我的应用程序密钥检查用户的登录状态或类似的东西?我想我必须在每个页面上包含google API。

登录页面代码:

Script In Head(上面列出的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在另一个页面，然后调用一些检查登录状态功能?或者另一种具体地告诉用户是否登录或退出的方法?

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

加载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

您可以将自定义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。

查看用户是否登录:

gapi.auth2.getAuthInstance().isSignedIn.get()

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

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

我们正在停止为web的谷歌登录JavaScript平台库。在2023年3月31日弃用日期之后，该库将无法下载。取而代之的是，使用新的谷歌网络身份服务。默认情况下，新创建的客户端id现在被阻止使用旧的平台库，现有的客户端id不受影响。在2022年7月29日之前创建的新客户端id可以设置plugin_name以启用使用Google平台库。

在上面Joseph的回答的基础上，你可以通过调用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

相关内容

最新更新

热门标签：