WebでのSupabase Apple Login

前提条件

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

• この Apple Login Webのセットアップ
• この Supabase Appleログイン - 基本設定.

実装方法

完全な実装は以下にあります： サンプルアプリの supabaseAuthUtils.ts ファイル。このガイドでは主要な概念と使い方を説明します。

Authentication Helperの使用方法

この authenticateWithAppleSupabase 関数が認証フロー全体を処理します：

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ポップアップフローを使用します：

1. 初期化：プラグインはService IDと現在のページURLをリダイレクトURLに指定して初期化されます
2. OAuthポップアップ：AppleのOAuthページをポップアップウィンドウで開きます
3. ユーザー認証：ユーザーはポップアップ内でAppleで認証します
4. IDトークン: Appleからユーザー情報を含むidentity token (JWT) が返されます
5. Supabase認証: identity tokenは以下を使用してSupabaseに送信されます signInWithIdToken()

ヘルパー関数がWebプラットフォームを自動検出し、すべてを適切に設定します。

重要な注意事項

Service IDの設定

• WebではApple Service IDが必要です（Androidと同じ）
• Service IDは、Apple Developer Portalで正しいReturn URLとともに設定する必要があります
• Apple Developer Portalの許可済みドメインに、自分のドメインが追加されていることを確認してください

リダイレクトURL

• Webの場合、リダイレクトURLは自動的に次のように設定されます： window.location.href (現在のページのURL)
• これは Apple Developer Portal で設定した Return URL のいずれかと一致している必要があります
• 末尾のスラッシュありと、なしの両方の URL が Apple Developer Portal に設定されていることを確認してください

Supabase Client ID

SupabaseでAppleプロバイダーを次のように設定します：

• クライアントID: Apple Service ID (例: com.example.app.service)

iOS も併用する場合は、Supabase の Client ID フィールドに App ID と Service ID の両方をカンマ区切りで入力してください。

ヘルパー関数の更新

を使用する場合、 authenticateWithAppleSupabase helper function を使用すると、 必ず update the 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,
  },
});

重要

置換する 'your.service.id.here' 実際の Apple Service ID（Apple Developer Portal で設定したものと同じ値）に書き換えます。

トラブルシューティング

認証に失敗した場合：

• Service ID の不一致: Apple Developer Portalとcodeの両方で、Service IDが一致していることを確認してください
• Return URLが設定されていません: 現在のページURL（末尾のスラッシュの有無両方）がApple Developer Portalに設定されていることを確認してください
• ポップアップがブロックされました: ブラウザの設定を確認してください。一部のブラウザではデフォルトでポップアップがブロックされます
• 許可されていないドメインです: Apple Developer Portalの許可済みドメインに、使用しているドメインが追加されていることを確認してください
• Supabaseの設定: SupabaseのAppleプロバイダー設定で、Service IDが正しく設定されていることを確認してください
• 以下を確認してください: サンプルアプリ code 参考用

Supabase Apple Login on Web から続ける

使用している場合 Web版Supabase Apple Login 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@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 の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。