Googleサインインの実装

GoogleサインインはGoogle APIの使用をシンプルにするため、OAuth2で管理されている。ユーザーはいつでもWebアプリからのアクセスを解除できる。

このドキュメントでは基本的なGoogleサインインの実装方法について解説する。

始める前に

クライアントIDを準備する。クライアントIDはサインインAPIを呼び出す際に必要となる。

Google API コンソールプロジェクトを作成し、クライアントIDを作成する。

プロジェクトを設定する際、ブラウザのクライアントタイプとWebアプリのオリジンURIを指定する。

設定できたらクライアントIDを保存しておく。

Googleプラットフォームライブラリを読み込む

Googleサインインを実装するページでGoogleプラットフォームライブラリを読み込む

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

クライアントIDを指定

meta要素でクライアントIDを指定する。

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

備考：gapi.auth2.init()メソッドでクライアントIDを指定することも可能。

Googleサインインボタンを設置

一番簡単な方法は自動レンダリングされたサインインボタンを設置すること。数行のコードでユーザーのサインイン状態などが自動的に設定される。

デフォルト設定で使用する場合はg-signin2クラスを持つdiv要素を設置する。

<div class="g-signin2" data-onsuccess="onSignIn"></div>

プロフィール情報を入手する

デフォルトのスコープでは、サインインしたユーザのID、名前、プロフィールのURL、メールアドレスを取得できる。プロフィール情報を取得するにはgetBasicProfile()メソッドを使用する。

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // これをバックエンドに送信してはならない。 IDトークンを使用するべき。
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // emailスコープがない場合はnullとなる
}

備考：デフォルトではgapi.auth2.init()のfetch_basic_profileパラメータはtrueとなっている。これは自動的にemail、profile、openidをスコープとして追加する。

重要：ユーザ情報をバックエンドサーバーに送信する際、getId()で取得したIDを使用するべきではない。代わりにIDトークンを使用する。これはサーバー上で安全に検証できる。

サインアウト

サインアウトボタンを設置することで、Googleからサインアウトせず、Webアプリからのみサインアウトさせることができる。ボタンを設置するにはonclickイベントでGoogleAuth.signOut()を使用する。

<a href="#" onclick="signOut();">Sign out</a>
<script>
  function signOut() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut().then(function () {
      console.log('User signed out.');
    });
  }
</script>

hysryt / wiki

Google サインイン #119