Skip to content
Capgo - Capacitor アプリのリアルタイム更新 Capgo

Supabase Apple Login - General Setup

概要

概要セクション

このガイドでは、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の設定方法を学ぶ

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

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

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

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

    Supabase プロジェクト セレクター

  3. __CAPGO_KEEP_0__ Authentication __CAPGO_KEEP_1__

    __CAPGO_KEEP_2__

  4. __CAPGO_KEEP_3__ Providers __CAPGO_KEEP_4__

    __CAPGO_KEEP_5__

  5. __CAPGO_KEEP_6__ Apple __CAPGO_KEEP_7__

    Appleのプロバイダーを有効にする

  6. Appleのプロバイダー Apple Appleのプロバイダー

    Appleのプロバイダーを有効にする

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

    Supabase Apple Provider Client ID

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

    Supabase Apple Provider Save

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

認証ヘルパーを使用する

「認証ヘルパーを使用する」を使用

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

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

__CAPGO_KEEP_4__

__CAPGO_KEEP_5__
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_KEEP_7__

__CAPGO_KEEP_8__

__CAPGO_KEEP_9__

  • iOS：Appleのネイティブサインインを使用します（リダイレクトURLは必要ありません、自動的にバンドルIDを使用します）
  • Android: OAuth リダイレクトフローを使用して、バックエンドエッジ関数 (Service ID が必要) を使用します。
  • Web: OAuth ポップアップフローを使用して (Service ID と現在のページ URL をリダイレクトとして必要)、

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