パート5:Google Oauth
概要
SupabaseアプリケーションにGoogle OAuthログインを追加する方法を解説します。
視聴
外部のOAuthプロバイダでログインする
Google, GitHub, Facebookなどのソーシャル・ログインと接続するのはとても簡単です。このガイドでは、Googleに接続する手順を説明します。基本的にはazure, bitbucket, github, gitlab, facebook, googleを含むすべてのプロバイダーで同じ手順になります。
まず、Googleのクラウド・コンソール内にGoogleプロジェクトを作成する必要があります。他のプロバイダーでは、これを「アプリ」と呼ぶことがあり、通常はそれぞれのプロバイダーの開発者ポータルで利用できます。
プロジェクトを作成したら、検索バーに「OAuth」と入力し、「OAuth同意画面(OAuth content screen)」を開きます。
「外部(External)」を選択して、残りのフォーム・フィールドの入力を進めます。
次に、左側の「認証情報(Credentials)」ページを開きます。
「認証情報を作成(CREATE CREDENTIALS)」をクリックし、選択肢から「OAuthクライアントID(OAuth client ID)」を選択します。
「ウェブアプリケーション」を選択します。「承認済みのリダイレクトURI(Authorized redirect URIs)」セクションにhttps://<自身のを参照>.supabase.co/auth/v1/callback
を追加します。SupabaseのURLは、Supabaseのダッシュボード内のSettings → APIで確認できます。
ポップアップからクライアントID(Your Client ID)とシークレット(Your Client Secret)を取得します。SupabaseダッシュボードのAuth → Settingsにあるgoogleセクションへ挿入します。
保存します。これで、ブラウザーで以下の場所へ移動できるようになります。
https://<自身のを参照>.supabase.co/auth/v1/authorize?provider=google
そして、googleやgmailのアカウントを使って、あなたのサービスにログインしてください。
例えば、URLの最後にredirect_to=
というクエリパラメーターを追加できます。
https://<自身のを参照>.supabase.co/auth/v1/authorize?provider=google&redirect_to=http://localhost:3000/welcome
SupabaseダッシュボードのAuth → Settingsページで入力したサイトURLを確認してください。ここで入力したURLが、同じホスト上にある必要があります(近日中に、許可リストへさらにURLを追加できる機能が追加される予定です)。
認証に成功した後、ユーザーをウェブサイトやアプリ内の特定のページにリダイレクトできます。
また、oauthプロバイダーに追加のスコープを要求できます。例えば、ユーザーのgmailアカウントに代わってメールを送信する機能が必要な場合、次のようなクエリパラメータのscopes
を追加することで実現できます。
https://<自身のを参照>.supabase.co/auth/v1/authorize?provider=google&https://www.googleapis.com/auth/gmail.send
ただし、このような高度なスコープを要求するには、通常、アプリケーションをGoogleに認証してもらう必要があることに注意してください。
あとはUIを実装するだけですが、あらかじめ用意されているものを使いたい場合は、便利な認証ウィジェットを用意していますので、サポートしたい認証プロバイダーを有効/無効にしたりできます。
サポートが必要な場合は、beta at supabase.comまでご連絡ください。また、機能リクエストについては、バックエンドまたはフロントエンドのリポジトリーでissueを開いてください。
リソース
- JWTデバッガー:https://jwt.io/
次のステップ
- パート1:JWTをみる
- パート2:行単位セキュリティーをみる
- パート3:ポリシーをみる
- パート4:GoTrueをみる
- Supabaseにサインアップ:app.supabase.com