Supabase Apple Login on Web

前提条件

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

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

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

Web プラットフォームを自動的に検出して適切に設定するヘルパー関数が用意されています。

重要な注意事項

サービス ID の設定

• Web では、Android と同じ Apple サービス ID が必要です。
• Apple Developer Portal に Service ID を正しく設定し、戻り先 URL を設定する必要があります。
• 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を両方提供する必要があります（カンマで区切る）。

ヘルパー関数を更新する

AppleサービスのIDを使用する場合、 authenticateWithAppleSupabase ヘルパー関数を使用する場合、 は必須です。 を更新する必要があります。 clientId Appleサービスの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 Developer Portalで設定した実際のAppleサービスのID (同じ値) を入力してください。

トラブルシューティング

認証が失敗した場合:

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

SupabaseのAppleログインから続けてください（Web）

Capgoを使用している場合 SupabaseのAppleログインから続けてください（Web） 認証とアカウントフローの計画に使用し、Capgoと接続する Capgoの@capgo/capacitor-social-loginを使用 Capgoの@capgo/capacitor-social-loginのネイティブ機能 Capgoの@capgo/capacitor-social-loginの実装詳細 Capgoの@capgo/capacitor-passkey Capgoの@capgo/capacitor-passkey 実装詳細の@capgo/capacitor-passkeyの @capgo/capacitor-native-biometric 実装詳細の@capgo/capacitor-native-biometric、 2要素認証 実装詳細の2要素認証。