Supabase Appleログイン

前提条件

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

• Apple Login Webの設定 Supabase Apple Login - General Setup
• 実装 「実装」.

実装の詳細は、

ファイルにあります。このガイドでは、主な概念とその使用方法を説明します。 認証ヘルパーの使用 supabaseAuthUtils.ts __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

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ポップアップフローを使用します:

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

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

: 重要な注意事項

: サービス ID の構成

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

リダイレクトURL

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

Supabase Client ID

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

• クライアントID: Apple Service ID (例えば、 com.example.app.service)

iOSを使用している場合、SupabaseのClient IDフィールドにApp IDとService IDを両方とも指定する必要があります (カンマで区切ってください)。

Helper Functionを更新する

Apple Service IDを使用する場合のHelper Function authenticateWithAppleSupabase Helper Functionを使用する場合、Apple Service IDを更新する必要があります Apple Service IDを更新する必要があります: クリップボードにコピーする clientId 重要

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で許可されているドメインを確認してください。
• サプバースの設定: サプバースのサービスIDが正しく設定されていることを確認してください。サプバースのAppleプロバイダ設定で
• 確認する サンプルアプリケーション code 参考

サプバースのAppleログインを継続してください

サプバースのAppleログインを使用している場合 サプバースのAppleログインを使用して認証とアカウントフローの計画を行う場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginを使用して サプバースのAppleログインを使用して認証とアカウントフローの計画を行う場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginのネイティブ機能を使用して サプバースのAppleログインを使用して認証とアカウントフローの計画を行う場合、@capgo/capacitor-social-loginを使用して サプバースのAppleログインを使用して認証とアカウントフローの計画を行う場合、@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を参照してください。 2要素認証 2要素認証の実装詳細については2要素認証を参照してください。