web-dev-qa-db-ja.com

ユーザーが「Googleサインイン」（OAuth 2.0）でログインしているかどうかを確認する方法

here および here の説明に従って、初めてGoogleログインを実装します。

JavaScriptでHTMLを使用しています。

解決が必要な問題は次のとおりです。最初のログイン後、別のページ（たとえば、ランディングページ、またはユーザーがログイン後に表示されるポータル）で、ユーザーがログインしているかどうかを確認するにはどうすればよいですか？アプリキーなどでユーザーのログイン状態を確認するために呼び出すことができるサービスはありますか？各ページにGoogle 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チュートリアルの1行目、ログアウトテストをトリガーする2行目）

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

Google APIを別のページに含めて、ログインステータスのチェック関数を呼び出す方法はありますか？または、ユーザーがログインしているかログアウトしているかを具体的に確認する別の方法は？

javascripthtmloauthoauth-2.0google-api
13
jordan

カスタム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などの最新のブラウザーで機能します。

6
Ozan Gunceler

ローカルストレージに何も保存する必要はありません。ライブラリを使用すると、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'
    });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_を変更することを忘れないでください

8
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

0
Phyrik