Supabase Apple Login - 一般設定

概要

このガイドでは、Apple Sign-InをSupabase Authenticationと統合する方法を説明します。Apple Sign-Inは、iOS、Android、Webプラットフォームを対象とした安全でプライバシーに配慮した認証方法を提供します。

前提条件

開始する前に、以下の条件を満たしてください。

1. Supabaseプロジェクトを作成

2. Apple Login General Setup Apple OAuth認証の設定方法を学ぶ Apple OAuth認証の設定方法を学ぶ

3. Apple OAuth認証の設定方法を学ぶ

   • Androidの設定
   • iOS セットアップ
   • Web セットアップ

   注意

   __CAPGO_KEEP_0__のSupabaseチュートリアルを開始する前に、使用するプラットフォームのクライアントIDを生成する必要があります。

   iOSの場合、クライアントIDはアプリIDと同じです。 AndroidとWebの場合、クライアントIDはサービスIDと同じです。 ステップ7で使用します。

SupabaseでApple OAuth プロバイダーを有効にする

1. あなたの Supabase ダッシュボード

2. あなたのプロジェクトをクリック

   

3. Do go to the Authentication menu

   

4. Click on the Providers tab

   

5. Find the Apple provider

   

6. Enable the Apple provider

   

7. クライアントIDの設定を入力してください:

   注意

   iOSでAppleログインを使用している場合、クライアントIDはアプリIDと同じです。 AndroidまたはWebでAppleログインを使用している場合、クライアントIDはサービスIDと同じです。 両方を使用している場合、両方のアプリIDとサービスIDを提供する必要があります。

   

8. ボタンをクリックしてください Save ボタン

   

   注意

   あなた 使用しなくても大丈夫です 設定 Secret key (for OAuth)__CAPGO_KEEP_0__

Voilà, Apple Sign-In を Supabase Authentication で有効にしました 🎉

認証ヘルパーを使用する

Apple Sign-In の完全な実装には、ヘルパー関数が含まれます。 authenticateWithAppleSupabase() この関数は、Apple Sign-In のフローを Supabase で完全に処理します。

• Apple Sign-In をプラットフォーム固有の構成で初期化します。
• Apple Sign-In の認証フローを処理します (iOS ではネイティブ、Android/Web では OAuth リダイレクト)
• Apple から ID トークンを抽出します。
• ID トークンで Supabase にサインインします。

完全実装

完全な実装は、 例のアプリの supabaseAuthUtils.ts ファイルにあります。

基本的な使用方法

import { authenticateWithAppleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithAppleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

これはどうやって動くか

ヘルパー関数は、プラットフォーム固有の差異を自動的に処理します:

• iOS: Apple Sign-Inを使用します (リダイレクト URL が必要ありません、自動的に bundle ID を使用します)
• Android: OAuth 認証フローを使用し、バックエンドエッジ関数 (Service ID が必要) を使用します。
• Web: OAuth ポップアップフローを使用し (Service ID と現在のページ URL をリダイレクトとして必要)、

Apple からアイデンティティトークンを取得し、それを Supabase に使用して認証します。 supabase.auth.signInWithIdToken().

Supabase Apple Login - General Setup から続けてください。

Supabase Apple Login - General Setup を使用している場合、 認証とアカウントフローの計画に使用している場合、 Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login 実装詳細については @capgo/capacitor-social-login を参照してください。 @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-passkey を参照してください。 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric を参照してください。 Two-factor authentication Two-factor authentication の実装詳細については参照してください。