AppleのSupabaseによるWebログイン

前提条件

このガイドでは、Web上でApple Sign-InをSupabase Authenticationに統合する方法を説明します。

• Apple Login Webのセットアップが完了していることを前提としています。 Supabase Apple Login - General Setupのセットアップが完了していることを前提としています。
• 実装 「実装」というセクション.

このガイドでは、Apple Sign-InをSupabase Authenticationに統合する方法を説明します。Apple Login WebのセットアップとSupabase Apple Login - General Setupのセットアップが完了していることを前提としています。

完全な実装は、 例のアプリの supabaseAuthUtils.ts ファイルにあります。このガイドでは、主な概念とその使用方法について説明します。

認証ヘルパーを使用する

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

How It Works

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

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

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

重要な注意

サービスIDの設定

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

リダイレクトURL

• Webでは、リダイレクトURLは自動的に(current page URL)に設定されます。 window.location.href (current page URL)はApple Developer Portalに設定されているReturn URLのいずれかに一致する必要があります。
• Apple Developer PortalにURLの両方(末尾のスラッシュあり/なし)を設定することを確認してください。
• Supabase Client ID

Supabase Client ID

In Supabase, configure your Apple provider with:

• Client ID: Your Apple Service ID (e.g., com.example.app.service)

If you’re also using iOS, you’ll need to provide both the App ID and Service ID in Supabase’s Client ID field (,).

Capgo

When using the Capgo helper function, you must update the to match your Apple Service ID: authenticateWithAppleSupabase Capgo Section titled “Capgo” When using the Capgo helper function, you must update the to match your Apple Service ID: clientId Capgo

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 Service ID (Apple Developer Portalで設定した値と同じ値)に置き換えてください。

トラブルシューティング

認証が失敗した場合：

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

セクションのタイトル “Web 上の Supabase Apple ログインから続けてください”

ブラウザの設定を確認してください - 一部のブラウザではポップアップがデフォルトでブロックされます AppleのSupabaseログイン Web上での認証とアカウントフローの計画に役立つものとして接続する @capgo/capacitor-social-loginを使用 native機能として@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要素認証 2要素認証の実装詳細