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

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

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

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

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

```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);
  })();
};
```

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

```jsx: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>
    </>
  );
}


```