Question

我正在按照here和here所述首次实施Google登录。

我正在使用带有Javascript的HTML。

需要解决的问题如下：在初次登录后，如何在另一个页面（例如登录页面或登录后用户看到的门户网站）上检查用户是否已登录？我可以拨打一个服务来检查用户使用我的应用密钥或类似的东西登录状态吗？我想我必须在每个页面上都包含google API。

登录页码：

Head 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>

代码正文（上面列出的谷歌教程的第一行，触发注销测试的第二行）

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

我是否可以通过某种方式在其他页面上添加Google API，然后调用一些检查登录状态功能？或者另一种具体判断用户是否登录或退出的方式？

Answer 1

您可以对自定义userEntity对象进行字符串化并将其存储在sessionStorage中，您可以在任何时候加载新页面进行检查。我没有测试过以下但它应该工作（以相同的方式做类似于WebAPI令牌）

＆＃13;

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();
}

＆＃13;

当然，如果sessionStorage对象被篡改，您可以进行一些内部检查。这种方法适用于Chrome和Firefox等现代浏览器。

Answer 2

您无需在本地存储上存储任何内容。该库允许您使用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'
    });our-app-id-here
    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

Answer 3

要检查用户是否已登录使用：

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

Answer 4

在上述约瑟夫的答案上，您可以通过调用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

如何使用＆＃34; Google登录＆＃34;来检查用户是否已登录（OAuth 2.0）

4 个答案: