はじめに
今回は、個人開発しているWebサービスに「Googleでログイン」機能を追加しました。
Googleログインを実装するとき、最初にぶつかったのが、
Google Cloudって何を設定すればいいの？
という問題でした。
この記事では、
- Google Cloudとは何か
- プロジェクトとは何か
- OAuthとは何か
- OAuth Clientとは何か
- Client IDとは何か
- Client Secretとは何か
- Redirect URIとは何か
- 実際に何を設定するのか
を順番に説明します。
1. Google Cloudとは？
Google Cloudは、Googleが提供しているクラウドサービスです。
データベースやサーバー、AIなど、色々なサービスを利用できます。
今回、Google Cloudを使う目的は、
Googleログインを利用するための設定をすること
です。
今回の個人開発では、Google Cloudそのものをサーバーとして使うわけではありません。
Googleに、
「このWebアプリでGoogleログインを使います」
と登録するために利用します。
2. 今回Google Cloudで何をするの？
今回Google Cloudで行うことは、大きく分けると以下の内容です。
- プロジェクトを作る
- Googleログインに必要な設定をする
- OAuth Clientを作る
- Redirect URIを登録する
- Client IDを取得する
- Client Secretを取得する
最終的には、
Google Cloud
↓
OAuth Client
↓
Client ID
Client Secret
Redirect URI
という情報を用意します。
この情報をあとでSupabaseに設定します。
3. Google Cloudのプロジェクトを作る
まず、Google Cloudにアクセスします。
Googleアカウントでログインします。
Google Cloudの管理画面を開いたら、新しいプロジェクトを作成します。
例えば、
プロジェクト名
decision-app
のように、自分のサービス名を付ければOKです。
プロジェクトって何？
ここで、
プロジェクトって何？
となると思います。
簡単にいうと、
「Google側でアプリを管理するための箱」
です。
今回の個人開発であれば、
Google Cloud
└── decision-app
という箱を作るイメージです。
この箱の中で、Googleログインに必要な設定を行います。
4. OAuthとは？
Googleログインを理解するために、OAuthについて簡単に理解しておきます。
OAuthは、
別のサービスに対して、情報や機能へのアクセスを許可するための仕組み
です。
例えば、
自分のWebアプリ
↓
Google
↓
「このアプリに情報へのアクセスを許可しますか？」
というようなやり取りをします。
ただし、「Googleでログイン」のような用途では、OAuth 2.0だけではなく、
OpenID Connect（OIDC）
も関係します。
そのため今回のGoogleログインは、
OAuth 2.0
+
OpenID Connect
を利用していると考えると分かりやすいです。
5. OAuth Clientを作る
次に、Googleログインで使用するOAuth Clientを作成します。
OAuth Clientは簡単にいうと、
Googleログインを利用するアプリをGoogleに登録したもの
です。
Webアプリの場合は、
Web application
を選択します。
名前は例えば、
Decision App Web
などでOKです。
6. Client IDとは？
OAuth Clientを作成すると、
Client ID
が発行されます。
Client IDは簡単にいうと、
「Googleログインを利用しているアプリはどれ？」を識別するためのID
です。
例えば、
123456789012-xxxxxxxxxxxxxxxx.apps.googleusercontent.com
のような文字列です。
自分で好きな文字列を決めるわけではありません。
Google CloudでOAuth Clientを作成すると、Googleが発行してくれます。
7. Client Secretとは？
Client IDと一緒に、
Client Secret
も発行されます。
Client Secretは、
OAuth Clientが持っている秘密情報
です。
初心者向けにかなり簡単に考えるなら、
Client ID
↓
アプリの識別番号
Client Secret
↓
アプリ側が持つ秘密情報
という理解でOKです。
8. Client Secretは絶対に公開しない
Client Secretは秘密情報です。
そのため、以下のような場所に公開してはいけません。
- GitHubの公開リポジトリ
- README
- Qiita
- note
- SNS
- スクリーンショット
- ブログ記事
- チャット
特に注意したいのが、
Reactのフロントエンドコードに直接書かない
ということです。
例えば、
const clientSecret = "xxxxxxxxxxxxxxxx";
のようなコードをReactに書いてはいけません。
ブラウザで動くコードは、ユーザーから確認できてしまう可能性があります。
今回の構成では、Client SecretはSupabase側に設定します。
9. Redirect URIとは？
次に、
Redirect URI
について説明します。
Redirect URIは簡単にいうと、
Googleでの認証が終わったあと、認証結果をどこへ返すのかを指定するURL
です。
今回の構成では、
ユーザー
↓
React
↓
Supabase
↓
Google
↓
Googleでログイン
↓
SupabaseのCallback URL
という流れになります。
つまりGoogleに、
「ログインが終わったらSupabaseのこのURLに戻してください」
と教えておく必要があります。
10. SupabaseのCallback URLを確認する
今回の個人開発では、Googleログインの処理にSupabase Authを利用します。
そのため、Googleから認証結果を受け取るのはSupabaseです。
Supabase側には、
https://xxxxx.supabase.co/auth/v1/callback
のようなCallback URLがあります。
このURLをコピーします。
このURLは、あとでGoogle Cloudに登録します。
11. Google CloudにRedirect URIを登録する
Google CloudのOAuth Client設定を開きます。
そこで、
Authorized redirect URIs
という項目を探します。
ここに、先ほどSupabaseで確認したCallback URLを登録します。
例えば、
https://xxxxx.supabase.co/auth/v1/callback
です。
入力したら保存します。
12. なぜRedirect URIを登録するの？
Googleからすると、
「Googleでログインが終わったあと、どこに戻ればいいの？」
という問題があります。
そこで、
Google
↓
「認証が終わりました」
↓
https://xxxxx.supabase.co/auth/v1/callback
という戻り道をGoogleに教えます。
この戻り道が、
Redirect URI
です。
13. Callback URLとRedirect URIは何が違う？
ここも混乱しやすいポイントです。
今回のようなGoogle + Supabaseの構成では、
Google
↓
Supabase
の戻り先として、
https://xxxxx.supabase.co/auth/v1/callback
を使います。
Google側では、このURLを
Redirect URI
として登録します。
一方、Supabase側から見ると、
Callback URL
として扱います。
つまり、
Google側
↓
Redirect URI
Supabase側
↓
Callback URL
と呼んでいます。
実際のURLは同じものです。
14. Google Cloudで取得するもの
ここまで設定すると、Google Cloud側で必要な情報が揃います。
今回使うものは主に以下の3つです。
Client ID
Client Secret
Redirect URI
イメージすると、
Google Cloud
│
├── Client ID
│
├── Client Secret
│
└── Redirect URI
です。
15. Client IDはどこで使う？
Google Cloudで発行されたClient IDは、あとでSupabaseに設定します。
イメージすると、
Google Cloud
↓
Client ID
↓
Supabase
です。
Supabaseに、
「Googleログインでは、このOAuth Clientを使ってください」
と教えるために利用します。
16. Client Secretはどこで使う？
Client SecretもGoogle Cloudで発行されます。
こちらもSupabaseに設定します。
Google Cloud
↓
Client Secret
↓
Supabase
ただし、Client Secretは秘密情報です。
そのため、
React
GitHub
README
ブログ
SNS
などには公開しません。
Supabase側の設定画面に登録します。
17. Google Cloud側の設定は完了
ここまで設定できたら、Google Cloud側で行う作業は基本的に完了です。
整理すると、
① Google Cloudでプロジェクトを作成
↓
② OAuth設定を行う
↓
③ OAuth Clientを作成
↓
④ Client IDを取得
↓
⑤ Client Secretを取得
↓
⑥ SupabaseのCallback URLを確認
↓
⑦ Google CloudにRedirect URIを登録
という流れです。
18. 次はSupabaseの設定
Google Cloud側の設定が終わったら、次はSupabase側の設定を行います。
Google Cloudで作成した、
Client ID
Client Secret
をSupabaseのGoogle Providerに設定します。
全体のイメージは、
Google Cloud
│
├── Client ID
│
└── Client Secret
↓
Supabase
↓
Googleログイン
です。
19. 今回のGoogle Cloudの役割
今回の個人開発におけるGoogle Cloudの役割をまとめると、
Google Cloud
↓
Googleログインに必要な設定をする
↓
OAuth Clientを作る
↓
Client IDを発行
Client Secretを発行
↓
SupabaseのCallback URLを登録
↓
GoogleとSupabaseを連携できる状態にする
という役割です。
20. 超簡単にまとめる
Google Cloudは、
Googleログインを使うために、Google側でアプリを登録・設定する場所
です。
今回覚えておきたい要点は以下です。
| 用語 | 簡単な意味 |
|---|---|
| Google Cloud | Google側の設定をする場所 |
| プロジェクト | アプリを管理するための箱 |
| OAuth Client | Googleログインを利用するアプリ |
| Client ID | アプリを識別するためのID |
| Client Secret | OAuth Clientの秘密情報 |
| Redirect URI | 認証後に戻ってくるURL |
| Callback URL | 認証結果を受け取るURL |
21. 今回の全体像
今回のGoogleログインでは、Google CloudとSupabaseがこのようにつながります。
ユーザー
↓
React
↓
Supabase Auth
↓
Google
↓
Googleでログイン
↓
Google
↓
Supabase Callback URL
↓
Supabase Auth
↓
React
Google Cloudは、この中で、
Google
↑
「このアプリにGoogleログインを使わせていいよ」
という設定を担当しています。