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

Facebookでログイン

プロジェクトでFacebook認証を有効にするには、Facebook OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。

概要​

アプリケーションにFacebookログインを設定するための手順は、3つのパートで構成されています。

手順​

Facebook開発者アカウントへアクセス​

  • developers.facebook.comにアクセスします。
  • 右上のログインをクリックしてログインします。

Facebook Developer Portal.

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()
}

リソース​