Googleでログインの実装

問題

「Googleでログイン」の機能を作りたいです。

答え

Googleの機能を使うので、

Google Cloud Console へアクセス

プロジェクトを作成

クライアント作成のページへ https://console.cloud.google.com/auth/clients

クライアントIDとクライアントシークレットを作成する

origin、redirect先を設定する

古い方法

https://developers.google.com/identity/sign-in/web/sign-in

この形式でボタンを設定するのは古い方法だった。

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

システム側はログイン画面に指定のJavaScript、metaタグ、button を追加
<script src="https://apis.google.com/js/platform.js" async defer></script>

ログインした後の処理を実装する
function onSignIn(googleUser) { /* ～～～ */ }
JavaScriptでIDやemailが取得できるが、システムのログインに使用するなら id_token を送って、バックエンドで検証すること。
https://developers.google.com/identity/sign-in/web/backend-auth

最新の方法

https://developers.google.com/identity

ログインURLに遷移するタイプの場合

以下のようなHTMLを追加するとボタンが表示され、トークンを付与してログインURLに移動する。

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

コールバックに渡してほしい場合

ボタンは以下のように data-callback 属性を指定して、コールバック関数でレスポンスを処理する。

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

COOP（Cross-Origin-Opener-Policy）の設定によっては、コールバック方式はエラーになることがある。その場合は、Cross-Origin-Opener-Policyの設定をするか、リダイレクト方式に変更する。

トークンの検証などバックエンドの処理に使用するライブラリ

composer require google/apiclient

トークンから取得できる情報

Google_Client の verifyIdToken($トークン) で取得できる情報の例は以下の通り。

subが一意のID。emailや、GoogleWorkspaceならdomainなども取得できる。

{
 // These six fields are included in all Google ID Tokens.
 "iss": "https://accounts.google.com",
 "sub": "110169484474386276334",
 "azp": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "aud": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "iat": "1433978353",
 "exp": "1433981953",

 // These seven fields are only included when the user has granted the "profile" and
 // "email" OAuth scopes to the application.
 "email": "testuser@gmail.com",
 "email_verified": "true",
 "name" : "Test User",
 "picture": "https://lh4.googleusercontent.com/-kYgzyAWpZzJ/ABCDEFGHI/AAAJKLMNOP/tIXL9Ir44LE/s99-c/photo.jpg",
 "given_name": "Test",
 "family_name": "User",
 "locale": "en"
}

この後は

対象システムのユーザーとGoogleアカウントをどうやって紐づけるか？の問題がある。

ユーザー登録させてよいシステムなら、新しいユーザーは登録までするのもあり。

業務システムなら登録済みのユーザーしか受け付けないのもあり。

登録済みのユーザーとの紐づけは、簡単に、メールアドレス（=Googleのアカウント）が一致したら本人としてよいシステムならばそれもあり。

対象のシステムにログイン状態にしてからGoogleのアカウントのID（sub）と紐づけたり切り離したりできるところまで作るのもあり。