Supabase Apple ログイン - 一般設定

概要

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

前提条件

開始する前に、以下のことが必要です:

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

2. スタイルガイドを読みましょう。 Apple Loginの一般設定 Apple OAuthの設定ガイド

3. 各プラットフォームのガイドを参考に、Apple OAuth の設定を実施してください。

   • Android の設定
   • iOS の設定
   • Web の設定

   注意

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

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

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

1. アプリをご確認ください Supabase ダッシュボード

2. __CAPGO_KEEP_0__

   

3. __CAPGO_KEEP_0__ Authentication menu

   

4. __CAPGO_KEEP_0__ Providers tab

   

5. __CAPGO_KEEP_0__ Apple __CAPGO_KEEP_0__

   

6. プロジェクトを選択してください Apple プロバイダー

   

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

   注意

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

   

8. ボタン Save 保存

   

   注意

   あなた 設定する必要はありません。 setup Secret key (for OAuth)Voilà、Apple Sign-In を有効にしました。Supabase Authentication

Authentication Helper を使用する

Authentication Helper を使用する

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

• Apple から ID トークンを抽出します
• Apple Sign-In の全体的な実装には、ヘルパー関数が含まれます。
• Apple Sign-In をプラットフォーム固有の構成で初期化します。
• Supabase ID を使用してサインインします。

完全な実装

実装の完全な例は、 のファイルにあります。 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);
}

コンテキスト: Capgo Builder / ネイティブ クラウド ビルド製品ページ。役割: セクションまたはページヘッダー。メッセージキー `native_build_how_it_works_title` (ネイティブ ビルドの機能の仕組みのタイトル)。 | ホームページの問題/解決セクション。役割: 短い UI ラベルまたはナビゲーションアイテム。見つける場所: page premium-support.astro。メッセージキー `ps_how_it_works` (Ps の機能の仕組み)。 | ライブ アップデート製品ページ。役割: セクションまたはページヘッダー。メッセージキー `live_update_how_it_works_title` (ライブ アップデートの機能の仕組みのタイトル)。

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

• iOS: Apple Sign-Inを使用します (リダイレクトURLは必要ありません、自動的にbundle IDが使用されます)
• Android: OAuthリダイレクトフローを使用します (Service IDが必要です)
• Web: OAuthポップアップフローを使用します (Service IDと現在のページURLが必要です)

Appleから取得したIDトークンは、Supabaseと認証するために使用されます supabase.auth.signInWithIdToken().

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

「Supabase Apple Login - General Setup」を使用している場合 Supabase Apple ログイン - 一般設定 iOS Capgoで@capgo/capacitor-social-loginを使用します。 Capgoのネイティブ機能である@capgo/capacitor-social-loginの使用 @capgo/capacitor-social-login Capgoの@capgo/capacitor-social-login実装詳細のために @capgo/capacitor-パスキー for the implementation detail in @capgo/capacitor-パスキー, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Capgo Capgo