Facebookでログイン
プロジェクトでFacebook認証を有効にするには、Facebook OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。
概要
アプリケーションにFacebookログインを設定するための手順は、3つのパートで構成されています。
- Facebook Developers SiteでFacebookアプリケーションを作成・設定
- SupabaseプロジェクトにFacebookキーを追加
- SupabaseのJSクライアント・アプリにログインのコードを追加
手順
Facebook開発者アカウントへアクセス
- developers.facebook.comにアクセスします。
- 右上の
ログイン
をクリックしてログインします。
Facebookアプリの作成
- 右上の
マイアプリ
をクリックします。 - 右上の
アプリを作成
をクリックします。 - アプリタイプを選択し、
次へ
をクリックします。 - アプリの詳細を入力して、
アプリを作成
をクリックします。 - 左サイドバーの
商品を追加
をクリックします。
コールバックURLを入手
次の手順では、次のようなコールバックURLが必要になります。
https://<project-ref>.supabase.co/auth/v1/callback
- Supabaseプロジェクトのダッシュボードにアクセスします。
- 左サイドバーの下部にある
Settings
アイコンをクリックします。 - リストの中の
API
をクリックします。 Config
のURL
の下にAPI URLがあるので、Copy
をクリックしてクリップボードにコピーします。- 末尾に
/auth/v1/callback
を追加することで、完全なOAuth Redirect URI
を取得できます。
FacebookアプリにFaceBookログインを設定する
商品を追加
画面で次の設定をします。
Facebookログイン
の下の設定
をクリックします。- クイックスタート画面をスキップして、左サイドバーの
Facebookログイン
の設定
をクリックします。 Facebookログイン設定
ページの有効なOAuthリダイレクトURI
にコールバックURIを入力します。有効なOAuthリダイレクトURI
のボックスに入力します。- 右下の
変更を保存
をクリックします。
サードパーティーのアプリケーションがEメールアドレスを読み取れるようにするには、Facebookアプリに適切なアクセスレベルを設定する必要があることに注意してください。アプリレビュー → アクセス許可と機能
画面で次の手順をします。
public_profile
とemail
の右側にあるリクエスト
というボタンをクリックします。
アクセスレベルについての詳細はこちらをご覧ください。
FacebookアプリIDとシークレットをコピー
- 左サイドバーの
設定 / ベーシック
をクリックします。 ベーシック設定
ページの上部にあるアプリIDをコピーします。App Secret
で表示
をクリックし、シークレットをコピーします。- この画面ですべての必須項目が入力されていることを確認します。
SupabaseプロジェクトにFacebookアプリIDとシークレットを入力
- Supabaseプロジェクトのダッシュボードに移動します。
- 左側のサイドバーで、
Authentication
アイコンをクリックします(上部付近)。 - リストから
Settings
をクリックし、Authentication Settings
ページを表示します。 Site URL
にアプリの最終的な(ホストされた)URLを入力します(これは重要です)。External OAuth Providers
でFacebook Enabled
をオンにします。- 前の手順で保存した
Facebook client ID
とFacebook secret
を入力します。 Save
をクリックします。
クライアント・アプリにログインのコードを追加
JavaScriptのクライアント・コードはこちらに記載:Supabase OAuthクライアントコード
const { user, session, error } = await supabase.auth.signIn({
provider: 'facebook',
})
ボタン、リンク、またはUI要素から呼びだすための関数を追加します。
async function signInWithFacebook() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'facebook',
})
}
ログアウトするには次の関数を使います。
async function signout() {
const { error } = await supabase.auth.signOut()
}