Web上のSupabase Appleログイン

このプラグインのインストール手順と全マークダウンガイドを含む設定用の質問をコピーできます。

前提条件

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

Apple Login Webのセットアップ the
the Supabase Appleログイン - 一般設定.

実装

実装の詳細は、のファイルにあります。このガイドでは、 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);
}

のしくみ

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

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

ウェブプラットフォームを自動的に検出して、適切に設定します。

重要な注意事項

サービスIDの設定

ウェブでは、Apple Service ID (Androidと同じ) が必要です。
Apple Developer Portal に Service ID を正しく設定し、戻り先 URL を設定する必要があります。
Apple Developer Portal にドメインを許可リストに追加する必要があります。

リダイレクト URL

現在のページ URL window.location.href __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

SupabaseクライアントID

Supabaseで、Appleプロバイダを次のように設定してください：クライアントID com.example.app.service)

: AppleサービスID（例えば

iOSも使用している場合、SupabaseのクライアントIDフィールドにApp IDとService IDを両方入力する必要があります（カンマで区切る）。

セクション「__CAPGO_KEEP_2__」 authenticateWithAppleSupabase Capgoのヘルパー関数を使用する場合 アップデートが必要です を更新する必要があります 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,
  },
});

トラブルシューティング

認証が失敗した場合:

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