はじめに
Webアプリケーションに、次のようなGoogle連携を実装する機会がありました。
- Googleアカウントによるログイン
- Google Calendarから予定を取得
- 取得したデータをアプリケーションへ取り込む
設定を進める中で、次のような点で迷いました。
- Google Cloud Consoleでは何を設定すればよいのか
- OAuthの「内部」と「外部」はどちらを選ぶのか
- OAuthクライアントIDとクライアントシークレットは何に使うのか
- ローカル環境ではどのURLを登録すればよいのか
- Google Calendar APIやGoogle Sheets APIはどのように設定するのか
- 本番環境へ移行するときは何を変更するのか
本記事では、まずローカル環境でGoogle連携を動かすことを目的として、次の順番で設定を進めます。
Google Cloudプロジェクトを作成
↓
Google Auth PlatformでOAuth認証を設定
↓
OAuthクライアントIDを作成
↓
クライアントID・クライアントシークレットを確認
↓
OAuth認証・Google API連携を実装
なお、今回は、Googleログインの実装までを範囲として記載していきます。
目次
- はじめに
- この記事で実現すること
- 前提環境
- 1. Google Cloudプロジェクトを作成する
- 2. Google Auth PlatformでOAuth認証を設定する
- 3. OAuthクライアントIDを作成する
- 4. ローカル環境での実装
- 5. ローカル環境で動作確認する
- まとめ
この記事で実現すること
この記事では、次の処理を扱います。
- Google Cloudプロジェクトを作成する
- Google Auth Platformの初期設定を行う
- OAuthクライアントIDを作成する
- Client IDとClient Secretを確認する
- Googleの認証画面へ遷移する
- 認可コードをアクセストークンへ交換する
- Googleアカウント情報を取得する
前提環境
本記事では、次の構成を例にします。
| 項目 | 内容 |
|---|---|
| フロントエンド | ReactまたはNext.js |
| バックエンド | Node.js／TypeScript |
| フロントエンドURL | http://localhost:3000 |
| バックエンドURL | http://localhost:3001 |
| OAuthコールバックURL | http://localhost:3001/auth/google/callback |
| Google APIクライアント | googleapis |
使用しているフレームワークやポート番号に合わせて、URLは置き換えてください。
1. Google Cloudプロジェクトを作成する
最初に、Google連携の設定を管理するGoogle Cloudプロジェクトを作成します。
Google Cloud Consoleを開き、画面上部のプロジェクト選択メニューから「新しいプロジェクト」を選択します。
1-1. プロジェクト情報を入力する
新しいプロジェクトの作成画面では、次の項目を設定します。
| 項目 | 内容 |
|---|---|
| プロジェクト名 | Google Cloud Console上で管理する名称 |
| プロジェクトID | Google Cloud上でプロジェクトを識別する一意のID |
| 組織 | プロジェクトを所属させるGoogle Workspace組織 |
| 親リソース | プロジェクトを作成する組織またはフォルダ |
プロジェクト名は、後から見て用途が分かる名前にします。
sample-google-integration
プロジェクトIDは、入力したプロジェクト名をもとに自動生成されます。
sample-google-integration-123456
プロジェクトIDは作成後に変更できません。
変更したい場合は、プロジェクト作成前に「編集」から修正します。
1-2. プロジェクト数の上限について
画面上部に、プロジェクト数の上限に関する警告が表示されることがあります。
割り当て内の残りのプロジェクト数は22件です。
これは、Google Cloudアカウントまたは組織に割り当てられているプロジェクト数の上限に関する案内です。
上限に達していなければ、そのままプロジェクトを作成できます。
上限に達している場合は、次の対応が必要です。
- 不要なプロジェクトを削除する
- プロジェクト数の上限緩和を申請する
- 別の組織やフォルダで作成可能か確認する
1-3. 組織と親リソースを設定する
Google Workspace組織に所属している場合は、作成するプロジェクトを関連付ける組織を選択します。
親リソースには、プロジェクトを作成する組織またはフォルダを指定します。
設定後、「作成」を選択します。
2. Google Auth PlatformでOAuth認証を設定する
Google Cloudプロジェクトを作成したら、Google Auth Platformの設定を行います。
Google Auth Platformでは、GoogleログインやGoogle API連携に使用するOAuth認証の基本情報を設定します。
初回設定では、次の順番でプロジェクト構成を進めます。
- アプリ情報
- 対象
- 連絡先情報
- 終了
2-1. アプリ情報を設定する
最初に、Googleの認証画面に表示されるアプリ情報を入力します。
主な設定項目は次のとおりです。
| 項目 | 内容 |
|---|---|
| アプリ名 | Googleの認証画面に表示される名称 |
| ユーザーサポートメール | ユーザーが認証に関して問い合わせるためのメールアドレス |
アプリ名
アプリ名には、ユーザーが見て用途を判断できる名称を設定します。
社内予約管理システム
開発中であっても、testやsampleだけではなく、何のアプリケーションか分かる名称にしておくと管理しやすくなります。
ユーザーサポートメール
開発中は、自分のGoogleアカウントのメールアドレスを選択して問題ありません。
本番環境では、次のような問い合わせ用アドレスを設定すると管理しやすくなります。
support@example.com
system@example.com
入力後、「次へ」を選択します。
2-2. 対象を設定する
次に、アプリケーションを利用できるGoogleアカウントの範囲を選択します。
選択肢は次の2つです。
- 内部
- 外部
内部
同じGoogle Workspace組織に所属するユーザーだけが利用できます。
次の条件に当てはまる場合は、内部が候補になります。
- 社内向けアプリケーションである
- 利用者が全員同じGoogle Workspace組織に所属している
- 個人のGmailアカウントを利用しない
- 社外ユーザーへ公開しない
内部を選択した場合、組織外のGoogleアカウントでは原則として利用できません。
外部
Googleアカウントを持つ組織外のユーザーも利用できます。
次のような場合は外部を選択します。
- 個人のGmailアカウントで開発・テストする
- 社外ユーザーも利用する
- 複数のGoogle Workspace組織から利用する
- 将来的に一般公開する可能性がある
外部を選択した場合、開発中はテストモードで動作し、登録したテストユーザーだけが利用できる設定になります。
選択後、「次へ」を押します。
2-3. 連絡先情報を設定する
次に、GoogleからOAuthプロジェクトに関する連絡を受け取るメールアドレスを入力します。
少なくとも1つのメールアドレスを登録する必要があります。
developer@example.com
ユーザーサポートメールとは用途が異なります。
| 項目 | 用途 |
|---|---|
| ユーザーサポートメール | アプリ利用者からの問い合わせ先 |
| 連絡先メールアドレス | Googleから開発者・管理者への連絡先 |
開発中は自分のメールアドレスで問題ありません。
本番運用では、担当者変更を考慮し、管理用の共有アドレスを設定する方法もあります。
2-4. Google APIサービスのポリシーに同意する
最後に、Google APIサービスのユーザーデータに関するポリシーを確認します。
チェックボックスを選択し、「続行」を押します。
設定内容に問題がなければ、「作成」を選択します。
これで、Google Auth PlatformにおけるOAuth認証の初期設定は完了です。
2-5. OAuthの概要画面を確認する
設定が完了すると、「OAuthの概要」画面が表示されます。
初期状態では、次のように表示されます。
このプロジェクトのOAuthクライアントはまだ構成されていません。
この時点では、OAuth認証の基本情報を登録しただけです。
アプリケーションから利用するClient IDやClient Secretは、まだ発行されていません。
続いて、「OAuthクライアントを作成」を選択します。
3. OAuthクライアントIDを作成する
OAuthクライアントIDは、GoogleのOAuthサーバーがアプリケーションを識別するための情報です。
記事内では「OAuthアカウント」ではなく、Google Cloud Consoleの表示に合わせて、次の表現を使用します。
- OAuthクライアント
- OAuthクライアントID
- OAuthクライアントIDの作成
3-1. アプリケーションの種類を選択する
「アプリケーションの種類」から、作成するアプリケーションの形式を選択します。
バックエンドを持つWebアプリケーションの場合は、次を選択します。
ウェブ アプリケーション
React、Next.js、Express、NestJSなどで構築したWebアプリケーションは、基本的にこの種類を選択します。
3-2. OAuthクライアント名を入力する
OAuthクライアントをGoogle Cloud Console上で識別するための名前を入力します。
初期値として、次のような名称が表示されることがあります。
ウェブ クライアント 1
そのまま使用することもできますが、環境が分かる名称に変更すると管理しやすくなります。
sample-app-local
本番用のOAuthクライアントを別に作成する場合は、次のように分けます。
sample-app-local
sample-app-production
この名前はGoogle Cloud Console上の管理用であり、アプリケーションの利用者には表示されません。
3-3. 承認済みのJavaScript生成元を登録する
「承認済みのJavaScript生成元」には、ブラウザからGoogle認証を開始するWebアプリケーションのURLを登録します。
ローカル環境のフロントエンドが次のURLの場合、
http://localhost:3000
同じURLを登録します。
http://localhost:3000
3-4. 承認済みのリダイレクトURIを登録する
「承認済みのリダイレクトURI」には、Google認証完了後に戻ってくるURLを登録します。
バックエンドを3001番ポートで起動する場合は、次のように設定します。
http://localhost:3001/auth/google/callback
Next.jsやAuth.jsなどを使用する場合は、次のようなURLになることもあります。
http://localhost:3000/api/auth/callback/google
使用している認証ライブラリやアプリケーション構成に合わせて設定します。
Google Cloud Consoleに登録するURIと、プログラムからGoogleへ送信するredirect_uriは完全に一致させる必要があります。
設定が一致していない場合は、次のエラーが発生します。
redirect_uri_mismatch
3-5. OAuthクライアントを作成する
必要な項目を入力したら、画面下部の「作成」を選択します。
設定例は次のとおりです。
| 項目 | ローカル環境での設定例 |
|---|---|
| アプリケーションの種類 | ウェブ アプリケーション |
| 名前 | sample-app-local |
| 承認済みのJavaScript生成元 | http://localhost:3000 |
| 承認済みのリダイレクトURI | http://localhost:3001/auth/google/callback |
設定が反映されるまで、5分から数時間かかる場合があります。
3-6. クライアントIDを確認する
OAuthクライアントを作成すると、作成完了後のウィンドウにクライアントIDが表示されます。
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com
クライアントIDは、この後のアプリケーション実装で使用します。
表示された値をコピーし、控えておきます。
3-7. クライアントシークレットを確認する
ウェブアプリケーションとしてOAuthクライアントを作成した場合は、クライアントシークレットも発行されます。
クライアントシークレットは、バックエンドからGoogleのOAuthサーバーへ接続するときに使用する秘密情報です。
作成完了後のウィンドウに、クライアントシークレットが表示される場合があります。
GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxx
ただし、作成完了ウィンドウ内にクライアントシークレットが表示されていない場合があります。
その場合は、作成したOAuthクライアントの詳細画面から確認します。
Google Cloud Console
↓
Google Auth Platform
↓
クライアント
↓
作成したOAuthクライアントを選択
↓
クライアントの詳細画面
OAuthクライアント一覧から対象のクライアントを選択すると、画面右側または詳細画面に次の情報が表示されます。
クライアントID
クライアントシークレット
作成完了ウィンドウに表示されていない場合は、詳細画面に表示されているクライアントシークレットを使用します。
クライアントシークレットの注意点
クライアントシークレットは外部へ公開してはいけません。
次の場所には記載しないようにします。
- GitHubの公開リポジトリ
- Reactなどのフロントエンドコード
- ブラウザから確認できる環境変数
- APIレスポンス
- アプリケーションログ
ローカル環境では、バックエンドの.envファイルへ設定します。
GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxx
.envはGitの管理対象から除外します。
.env
.env.*
4. Googleログインの実装
Google Cloud ConsoleでクライアントIDとクライアントシークレットを確認できたら、ローカル環境でGoogleログイン機能を実装します。
実装作業は、AIへ次のように依頼します。
以下の情報を踏まえて、Googleのログイン機能を実装してください。
【前提】
・フロントエンドはReactまたはNext.jsを使用しています。
・バックエンドはNode.js／TypeScriptを使用しています。
・Google OAuth 2.0を利用します。
・Google Cloud ConsoleでOAuthクライアントIDを作成済みです。
・アプリケーションの種類は「ウェブ アプリケーション」です。
・クライアントIDとクライアントシークレットを取得済みです。
・フロントエンドは http://localhost:3000 で起動します。
・バックエンドは http://localhost:3001 で起動します。
・リダイレクトURIは http://localhost:3001/auth/google/callback です。
・Google認証後は、ユーザーのメールアドレス、名前、プロフィール画像を取得します。
・認証情報やトークンをフロントエンドへ直接公開しない構成にしてください。
・環境変数が不足している場合は、起動時にエラーになるようにしてください。
・エラー処理を含め、TypeScriptで実装してください。
AIへ依頼する際は、次の実装内容もあわせて指定します。
実装する内容
- Google OAuth連携に必要な依存パッケージをインストールする
- 環境変数を管理するためのパッケージを導入する
-
.envへクライアントIDとクライアントシークレットを登録する -
.envを.gitignoreへ追加する - Google OAuthクライアントを初期化する
- Googleの認証画面へ遷移するAPIを作成する
- Google認証後のコールバックAPIを作成する
- 認可コードをアクセストークンへ交換する
- Googleアカウントのユーザー情報を取得する
- 取得したメールアドレス、名前、プロフィール画像をアプリケーション側で利用できる形に整える
- Google認証後に自社アプリケーションのログイン状態を作成する
- 認証成功後にフロントエンドへリダイレクトする
- 認証失敗時のエラー処理を実装する
- クライアントシークレットやトークンをログへ出力しない
- クライアントシークレットをフロントエンドへ渡さない
- 複数ユーザーで認証情報が共有されないようにする
- 必要に応じてアクセストークンとリフレッシュトークンを保存する
- ローカル環境でGoogleログインの動作確認を行う
環境変数の例
GOOGLE_CLIENT_ID=xxxxxxxxxxxxxxxx.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=GOCSPX-xxxxxxxxxxxxxxxxxxxxxxxx
GOOGLE_REDIRECT_URI=http://localhost:3001/auth/google/callback
FRONTEND_URL=http://localhost:3000
PORT=3001
Google Cloud Consoleに登録したリダイレクトURIと、環境変数のGOOGLE_REDIRECT_URIは完全に一致させます。
Google Cloud Console
http://localhost:3001/auth/google/callback
GOOGLE_REDIRECT_URI=http://localhost:3001/auth/google/callback
5. ローカル環境で動作確認する
実装の内容を確認し、問題がなければ、環境を立ち上げて、実際にログインができるか確認をします。
npm run dev
ブラウザで次のURLへアクセスします。
http://localhost:3001/auth/google
実際にログインができれば、実装は完了です。
外部のテスト状態で動かしている場合は、ログインに使用するGoogleアカウントがテストユーザーとして登録されているか確認してください。
まとめ
今回の記事では。Googleログインの実装に向けた設定方法を紹介してきました。
作成するアプリケーションの規模や対象、用途によって入力する内容が変わる可能性がありますので、設定する際は自身の状況に応じて変更して下さい。
ここまで読んでいただきありがとうございました！