Web上のSupabase Appleログイン

このプラグインのインストール手順とフルマークダウンガイドを含むセットアッププロンプトをコピーします。

前提条件

このガイドでは、Apple Sign-InとSupabase AuthenticationをWebで統合する方法を説明します。既に以下のことを完了していることを前提としています。

__CAPGO_KEEP_0__ Apple Login Web セットアップ
the Supabase Apple Login - 一般設定.

実装

完全な実装は、のファイルにあります。このガイドでは、重要な概念とその使用方法を説明します。 supabaseAuthUtils.ts Authentication Helperを使用する

Authentication Helperのセクション

関数は、全体の認証フローを処理します: authenticateWithAppleSupabase __CAPGO_KEEP_0__

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

どうやって動くか

Web上では、Apple Sign-InはOAuthポップアップフローを使用します:

初期化: プラグインは、サービスIDと現在のページURLをリダイレクトURLとして初期化します
OAuthポップアップ: AppleのOAuthページがポップアップウィンドウで開きます
ユーザーアUTH: ユーザーはポップアップウィンドウでAppleに認証します
アイデンティティトークン: Appleはユーザー情報を含むアイデンティティトークン(JWT)を返します
Supabase Authentication: __CAPGO_KEEP_0__ を Supabase に送信します。 signInWithIdToken()

すべての設定を適切に構成するために、ウェブプラットフォームを自動的に検出するヘルパー関数が用意されています。

重要な注意事項

サービスIDの設定

Web では、Android と同じ Apple サービス ID が必要です。
Apple Developer Portal に正しいリターン URL を設定し、Service ID を設定する必要があります。
Apple Developer Portal に自分のドメインを許可されたドメインとして追加する必要があります。

リダイレクト URL

ウェブ上では、自動的にリダイレクトURLが設定されます。 window.location.href (現在のページURL)
これは、Apple Developer Portalで構成されているReturn URLのいずれかに一致する必要があります。
Apple Developer Portalで、URLの末尾にスラッシュがある場合とない場合の両方を構成する必要があります。

Supabase Client ID

Supabaseで、Appleプロバイダーを以下のように構成してください。

Client ID: AppleサービスID（例えば com.example.app.service)

iOSを使用している場合、SupabaseのClient IDフィールドにApp IDとService IDを両方提供する必要があります（カンマで区切ってください）。

ヘルパー関数を更新する

Cloudflareのサービスを使用する場合、 authenticateWithAppleSupabase ヘルパー関数を使用する場合、 は必須です。 を更新する必要があります。 clientId Apple Service IDに合わせてください:

await SocialLogin.initialize({
  apple: {
    clientId: isIOS
      ? undefined // iOS uses bundle ID automatically
      : 'your.service.id.here', // Your Apple Service ID for Web and Android
    redirectUrl: redirectUrl,
  },
});

トラブルシューティング

認証が失敗した場合:

サービス ID の不一致: Apple Developer Portal と code の両方でサービス ID が一致していることを確認してください。
リターン URL が設定されていない: Apple Developer Portal で現在のページ URL (末尾のスラッシュあり/なし) が設定されていることを確認してください。
ポップアップがブロックされている: ブラウザの設定を確認してください - 一部のブラウザではポップアップがデフォルトでブロックされます。
許可されていないドメイン: Apple Developer Portal で許可されているドメインの一覧にドメインが追加されていることを確認してください。
Supabase の設定: Supabase の Apple プロバイダ設定でサービス ID が正しく設定されていることを確認してください。
確認してください例のアプリ code 参考