【React】Googleのjsクライアントを直接使用してGoogleログインを実装する

概要

ReactでGoogleログインを実現する際、anthonyjgrove/react-google-loginというライブラリがあるので、これを使用したいところですが、2022年4月現在だと最終更新日が2021年1月になっていて、ちょっと今後のメンテナンスに不安を覚えるところではあります。
他に良さそうなライブラリも見当たらなかったので、サードパーティのライブラリを使用せずに、Googleで用意されているjsクライアントを、Reactで直接使用する実装を今回メモ書きします。

対応方針

QuodAI/tutorial-react-google-api-loginのGitHubのページに、Reactでのチュートリアルの実装がありますので、これを参考にします。このチュートリアルではGoogleLogin.jsで、Googleで用意されているクライアントのjsを読み込みます。そして、こちらのソースコードにある通り、jsを読み込んだらapiが実行できるオブジェクトを取得します。
なお、上記のチュートリアルで読み込んでいるhttps://apis.google.com/js/platform.jsのjsファイルですが、Googleのソーシャルログイン用のJSライブラリが新しくなったので対応する(Sign In With Google / Google Identity Services API)の記事にある通り、将来的に廃止になるそう。なので、google-api-javascript-clientのauthSample.htmlの実装サンプルにある通り、読み込むjsをhttps://apis.google.com/js/api.jsにする必要があります。
なお、新しいjsでも旧来のgapi.auth2のオブジェクトはそのまま使えるようなので、認証機能の詳細はサインインJavaScriptクライアントリファレンスを参照すれば大丈夫かなと。（仕様が変わってない自信はあまりないですが・・）

実装サンプル

今回の実装サンプルではクライアント側で、認証後に認証コード（authCode）を取得するものを記載します。

以下がスクリプトの読み込み部分です。上記チュートリアルのソースと同様ですが、読み込むjsだけ変更しています。

GoogleLoginUtil

export const loadGoogleScript = () => {
  //loads the Google JavaScript Library
  (function () {
    const id = "google-js";
    const src = "https://apis.google.com/js/api.js"; // 読み込むjs

    //we have at least one script (React)
    const firstJs = document.getElementsByTagName("script")[0];

    //prevent script from loading twice
    if (document.getElementById(id)) {
      return;
    }
    const js = document.createElement("script");
    js.id = id;
    js.src = src;
    js.onload = window.onGoogleScriptLoad;
    firstJs.parentNode.insertBefore(js, firstJs);
  })();
};

実際のログインの実装は以下になります。

LoginComponent.js

import { useEffect, useState } from "react";
import { loadGoogleScript } from "./GoogleLoginUtil";

export default function LoginComponent() {
  const [gapi, setGapi] = useState();

  // ログイン
  const onClickLogin = async () => {
    gapi.auth2.authorize(
      {
        apiKey: process.env.GCP_AUTH_API_KEY, // GCPのAPIキーを取得したらここに設定
        clientId: process.env.GCP_AUTH_CLIENT_ID, // GCPのクライアントIDを取得したらここに設定
        response_type: "code", // 今回は認証コードを取得する
        scope: "profile email",
        access_type: "offline",
      },
      async function (response) {
        if (response.error) {
          console.log(response.error);
        } else {
          const authCode = response.code;
          console.log(authCode);
        }
      }
    );
  };

  useEffect(() => {
    // ライブラリのスクリプトを読み込んだ後処理
    window.onGoogleScriptLoad = () => {
      const _gapi = window.gapi;
      _gapi.load("client:auth2");
      setGapi(_gapi);
    };
    // ここでライブラリのスクリプトを読み込む
    loadGoogleScript();
  });

  return (
    <>
      <button type="button" onClick={onClickLogin}>
        Googleログイン
      </button>
    </>
  );
}