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']: プロフィール画像

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

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

実装(擬似コード)

参考