サブエースアップルログイン

GitHub

このプラグインのインストール手順と全マークダウンガイドを含む設定プロンプトをコピーする

前提条件

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

the the
the Supabase Apple ログイン - 一般設定.

実装

完全な実装は、のファイルにあります。このガイドでは、 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_build_how_it_works_title` (ネイティブビルドの機能の仕組みのタイトル)。 | ホームページの問題/解決セクション。役割: 短いUIラベルまたはナビゲーションアイテム。見られる場所: page premium-support.astro。メッセージキー `ps_how_it_works` (PSの機能の仕組み)。 | ライブアップデート製品ページ。役割: セクションまたはページヘッダー。メッセージキー `live_update_how_it_works_title` (ライブアップデートの機能の仕組みのタイトル)。

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

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

自動でWebプラットフォームを検出して、適切な設定をします。

重要な注意事項

サービスIDの設定

Webでは、AppleのサービスID (Androidと同じ) が必要です。
Apple Developer Portalに、正しいReturn URLを設定したサービスIDが必要です。
Apple Developer Portalに、ドメインを許可リストに追加してください。

リダイレクトURL

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

Supabase クライアント ID

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

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

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

ヘルパーファンクションを更新してください。

ヘルパーファンクションを使用する場合、 authenticateWithAppleSupabase ヘルパーファンクションを使用する場合、必須更新する 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,
  },
});

トラブルシューティング

認証が失敗した場合:

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

Supabase Apple Webログインを使用している場合 Supabase Apple Webログイン 認証とアカウントフローの計画に使用している場合、Supabase Apple Webログインを Capgoでは、@capgo/capacitor-social-loginを使用します。 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric @capgo/capacitor-social-login Capgoの実装詳細については@capgo/capacitor-native-biometricのページを参照してください。 2要素認証 2要素認証の実装詳細については2要素認証のページを参照してください。