Supabase Appleログイン

このプラグインのインストールステップとフルマークダウンガイドを含むセットアップの指示をコピーする。

前提条件

このガイドでは、Apple Sign-InをWeb上のSupabase Authenticationに統合する方法を説明します。Apple Sign-InをWeb上のSupabase Authenticationに統合するには、以下のステップを完了する必要があります。

Implementation

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

Using the Authentication Helper

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

「どうやって動くか」

「どうやって動くか」セクションのタイトル

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

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

Important Notes

Service ID Configuration

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

リダイレクトURL

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

Supabase Client ID

Supabaseで、Appleプロバイダーを次のように構成してください。

クライアント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ログインを使用している場合 サプバースのAppleログインを使用して認証とアカウントフローの計画を行っている場合 サプバースのAppleログインを Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login Capgoにおける@capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey Capgoにおける@capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric Capgoにおける@capgo/capacitor-native-biometricの実装詳細、二要素認証 Capgoにおける二要素認証の実装詳細