More than 1 year has passed since last update.

Google Identity Service のワンタッププロンプトによるアカウント認証

Posted at 2023-03-28

Google Identity Service で(自動)サインインし、プロフィール情報を取得する

ワンタッププロンプトを表示し、以前サインインしたアカウントがあれば自動的にそのアカウントでサインインする
プロンプトが何らかの理由で閉じられた場合に手動でサインインできるよう、サインインボタンをレンダリングする
プロフィール情報のデコードに jwdDecode モジュールを使用

実装(擬似コード)

<html>
  <body>
    <div id="sign-in-button-container"></div>
  </body>
</html>

import jwtDecode from 'jwt-decode';

// Google Identity Service のインターフェイスを取得する
let google = await new Promise(resolve => {
  let scriptElement = document.createElement('script');
  scriptElement.src = 'https://accounts.google.com/gsi/client';
  scriptElement.type = 'text/javascript';
  scriptElement.onload = () => { resolve(window.google) };
  document.head.appendChild(scriptElement);
});

// プロンプトが消えた際に表示するサインインボタンをレンダリングする
const renderSignInButton = () => {
  google.accounts.id.renderButton(
    document.getElementById('sign-in-button-container'),
    {
      theme: 'outline',
      size: 'large',
    },
  );
};

// 資格情報
let credentialResponse = await new Promise((resolve, reject) => {
  // 初期化
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID', // XXX.apps.googleusercontent.com
    callback: resolve, // 初期化が完了したら呼ばれる
    auto_select: true, // 最後にサインインしたアカウントを自動選択
  });

  // cf. 自動選択を無効化する
  // google.accounts.id.disableAutoSelect();

  // サインイン用のワンタッププロンプトを表示する
  google.accounts.id.prompt(notification => {
    // 予期せぬ理由でサインイン処理が行われなかった場合の処理
    if (notification.isNotDisplayed()) {
      let notDisplayedReason = notification.getNotDisplayedReason();
      switch (notDisplayedReason) {
        case 'browser_not_supported':
        case 'opt_out_or_no_session':
        case 'suppressed_by_user':
          renderSignInButton();
          break;
        default:
          reject(new Error(notDisplayedReason));
          return;
      }
    } else if (notification.isSkippedMoment()) {
      let skippedReason = notification.getSkippedReason();
      switch (skippedReason) {
        default:
          renderSignInButton();
          break;
        case 'issuing_failed':
          reject(new Error(skippedReason));
          return;
      }
    }
  });
});

// jwtDecode モジュールで資格情報をデコード
let decodedCredential = jwtDecode(credentialResponse.credential);
// decodedCredential['sub']: ID
// decodedCredential['name']: フルネーム
// decodedCredential['picture']: プロフィール画像

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up