メインコンテンツまでスキップ

パート5:Google Oauth

概要

SupabaseアプリケーションにGoogle OAuthログインを追加する方法を解説します。

視聴

外部のOAuthプロバイダでログインする

Google, GitHub, Facebookなどのソーシャル・ログインと接続するのはとても簡単です。このガイドでは、Googleに接続する手順を説明します。基本的にはazure, bitbucket, github, gitlab, facebook, googleを含むすべてのプロバイダーで同じ手順になります。

まず、Googleのクラウド・コンソール内にGoogleプロジェクトを作成する必要があります。他のプロバイダーでは、これを「アプリ」と呼ぶことがあり、通常はそれぞれのプロバイダーの開発者ポータルで利用できます。

Create a new Google Project inside cloud console

プロジェクトを作成したら、検索バーに「OAuth」と入力し、「OAuth同意画面(OAuth content screen)」を開きます。

Open the OAuth consent screen

「外部(External)」を選択して、残りのフォーム・フィールドの入力を進めます。

Select External on the OAuth form

次に、左側の「認証情報(Credentials)」ページを開きます。

Open up Credentials page

「認証情報を作成(CREATE CREDENTIALS)」をクリックし、選択肢から「OAuthクライアントID(OAuth client ID)」を選択します。

Create new oauth client id credentials

「ウェブアプリケーション」を選択します。「承認済みのリダイレクトURI(Authorized redirect URIs)」セクションにhttps://<自身のを参照>.supabase.co/auth/v1/callbackを追加します。SupabaseのURLは、Supabaseのダッシュボード内のSettings → APIで確認できます。

Add your redirect URI

ポップアップからクライアントID(Your Client ID)とシークレット(Your Client Secret)を取得します。SupabaseダッシュボードのAuth → Settingsにあるgoogleセクションへ挿入します。

take client id and secret

insert client id and secret into supabase dashboard in auth &gt; auth

保存します。これで、ブラウザーで以下の場所へ移動できるようになります。

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を開いてください。

リソース

次のステップ