クライアント ID とは何ですか?
Google クライアント ID (または ClientID) は、アプリケーション/ユーザーに割り当てられる一意の識別子です。 OAuth (Auth 2.0) を使用してクライアントとサーバーを認証するために使用されます。

Google クライアント ID を取得するには、Google Cloud コンソールを開いて、新しいプロジェクトを開始します。このチュートリアルでは、プロジェクトに「GoogleReact Sign-In」という名前を付けますが、任意の名前を選択できます。

プロジェクトを作成した後、[API とサービス] メニューの [認証情報] セクションに移動します。ここにはダッシュボードがあり、現在のプロジェクト名が左上隅の Google Cloud ロゴの近くに表示されます。

次に、認証情報を作成する前に、OAuth 同意画面に移動して同意画面を設定しましょう。

Googleサインイン同意画面を設定します。

同意画面は、名前が示すとおり、ユーザーが外部またはサードパーティのライブラリを介してログインすることを要求するページです。このポップアップは、アプリのルート ページを離れ、サードパーティ ページへのアクセスを許可することをユーザーに通知します。以下に示す Google サインイン同意画面の例

簡単に言えば、OAuth 2.0 を認証に利用すると、アプリはユーザーに Google アカウントを使用して 1 つ以上のアクセス範囲を認証するように求めます。アクセスの範囲には、アプリがユーザーのアカウントでアクセスまたは実行を許可されている情報やアクティビティが含まれます。

React アプリの Google 同意ページを設定するには、Google Cloud Console の左側のメニューにある [OAuth 同意画面] タブに移動します。

このタブに入ったら、Google 認証済みの会社またはアプリケーションを使用している場合を除き、許可される唯一のオプションである [外部] を選択し、[作成] ボタンをクリックして同意画面を生成します。

次に、同じページで、アプリケーションの名前と、プロジェクトのステータスに関する最新情報を受け取るための電子メール アドレスを入力します。

現時点では、残りのニーズとオプションを空白のままにすることができますが、詳細が利用可能な場合は、この段階で追加できます。

当面は、残りの登録セクションをスキップできます。各セクションを下にスクロールして [保存] をクリックし、完了したらダッシュボードに戻るだけです。

OAuth 同意ページを設計した後、実験する前、または認証が機能することを確認する前に、アプリを公開する必要があります。デフォルトでは、その状態は「テスト中」であり、公開後に実稼働環境に移行します。

アプリを「運用中」としてマークすると、Google アカウントを持つすべてのユーザーがアクセスできるようになります。

Web クライアント ID を生成します。

次に、認証情報のオプションに戻り、ウェブ クライアント ID を作成できるページにアクセスします。
画面上で、ページ上部の「CREATE CREDENTIALS」を選択し、OAuth クライアント ID をクリックします。

以下のようにアプリケーションの種類を選択するよう求められます。 React の次の手順に従っている場合は、Web アプリケーションに進みます (Web には Google クライアント ID を使用しています)。

次に、単一のアプリへの特定の ID リンクを識別または指定するためにクライアント ID の名前を選択します。この名前が使用されます。 Web、iOS、Android ID を区別するには、命名規則に「Web ID」、「Android ID」、「iOS ID」などを含めることができます。

続いて、承認された JavaScript オリジンと承認されたリダイレクト URL の 2 種類の URL を紹介します。

「承認された JavaScript オリジン URL」は、アプリケーションのログイン元の URL です。 React 開発者の場合、ローカルホスト (localhost:3000)、またはアプリをホストしている場合はホストされた URL になります。

「承認されたリダイレクト URL」は、ユーザーが正常にログインした後に Google がユーザーを返すリンクです。たとえば、ユーザーを元のリンクに戻したり、別のリンクにリダイレクトしたりできます。ここに URL を追加する必要があります。

次の URL を承認された JavaScript オリジンと承認されたリダイレクト URL にそれぞれ追加します: http://localhost:3000 と http://localhost:

WebクライアントIDを作成するには、「作成」ボタンをクリックする必要があります。ホームページに戻ると、新しく作成した認証情報を確認できます。新しい Web クライアント ID をコピーするには、[コピー] アイコンをクリックします。

Web クライアント ID が正常に構築されたので、React アプリに移動し、クライアント ID を .env ファイルに追加します。