Supabase Appleログイン

インストール手順とこのプラグインの全マークダウンガイドを含むセットアップの質問をコピーします。

前提条件

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

実装

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

認証ヘルパーの使用

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

「Capgo BuilderでNative Cloudビルドのしくみ」

「しくみ」セクションのタイトル

Web上では、Apple Sign-InはOAuthポップアップフローを使用します:初期化
: プラグインは、サービスIDと現在のページURLをリダイレクトURLとして初期化します。OAuthポップアップ
: AppleのOAuthページを表示するポップアップウィンドウを開きます。: Apple でユーザーがポップアップで認証します
Identity Token: Apple はユーザー情報を含む ID トークン (JWT) を返します
Supabase Authentication: ID トークンは Supabase に送信されます signInWithIdToken()

: Web プラットフォームを自動的に検出して設定します

Important Notes

Service ID Configuration

Web では、Apple のサービス ID (Android と同じ) が必要です
Apple Developer Portal に正しい Return URLs を設定してサービス ID を構成する必要があります
Apple Developer Portalに登録されているドメインが自分のドメインであることを確認してください

Redirect URL

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

Supabase Client ID

Supabaseで、Appleプロバイダーを以下のように設定してください

Client ID: Apple Service ID（例えば 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 (comma-separated).

Update the Helper Function

When using the authenticateWithAppleSupabase helper function, you must update the clientId to match your 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,
  },
});

トラブルシューティング

認証が失敗した場合:

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

サプバースのAppleログインをWebで使用している場合 サプバースのAppleログインをWebで使用して、認証とアカウントフローの計画を実行し、それを サプバースのAppleログインをWebで使用して、認証とアカウントフローの計画を実行し、それを Using @capgo/capacitor-social-login Using @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要素認証