Supabase Apple Login on Web

前提条件

このガイドでは、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ポップアップフローを使用します:

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

The helper function automatically detects the web platform and configures everything appropriately.

重要な注意事項

サービス ID の設定

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

リダイレクト URL

• ウェブ上では、自動的にリダイレクトURLが設定されます。 window.location.href (現在のページURL)
• これは、Apple Developer Portalで構成されているReturn URLのいずれかに一致する必要があります。
• Apple Developer Portalで、末尾にスラッシュが付いたURLと末尾にスラッシュが付いていない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サービスのID (Apple Developer Portalで設定した値と同じ値) を使用してください。

トラブルシューティング

認証が失敗した場合:

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

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

Capgoを使用している場合 SupabaseのAppleログイン（Web） 認証とアカウントフローの計画と接続に使用します @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要素認証 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-biometricの実装詳細について2要素認証