コンテンツにジャンプ
Capgo - Capacitor アプリのリアルタイム更新 Capgo

Supabase GoogleログインのiOS

GitHub

導入

Section titled “Introduction”

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

Implementation

実装の詳細は、

example appの ファイルにあります。このガイドでは、実装の重要な概念と使用方法について説明します。 supabaseAuthUtils.ts Using the Authentication Helper

Using the Authentication Helper

「認証ヘルパーを使用する方法」

この authenticateWithGoogleSupabase 機能は、認証フロー全体を処理します。

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';


const result = await authenticateWithGoogleSupabase();
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ラベルまたはナビゲーションアイテム。見られる場所:ページpremiumpremium.astro。メッセージキー`ps_how_it_works` (PSのしくみ)。| ページ/エリア:ライブアップデート製品ページ。役割:セクションまたはページヘッダー。見られる場所:ページlive-update.astro。メッセージキー`live_update_how_it_works_title` (ライブアップデートのしくみのタイトル)。

「機能のしくみ」 認証フローのしくみについての詳細な説明、包括して、nonceの生成、JWTの検証、Supabaseのサインインについては、.

「機能のしくみ」セクションを参照してください。

「重要な注意事項」

「iOS TokenキャッシングとNonceの問題」

「iOS TokenキャッシングとNonceの問題」

iOS Nonce Caching Issue

iOSの場合、Google Sign-Inはトークンをキャッシュすることがあり、これによりnonceの検証が失敗する可能性があります。 validateJWTToken この機能はこれを検出して自動的に処理します:

  1. 自動検出: この機能は、トークン内のnonceが期待どおりであるかどうかを確認します。 nonceDigest
  2. 自動リトライ: 検証が失敗した場合、Googleから自動的にログアウトし、1度リトライします
  3. エラーハンドリング: リトライも失敗した場合、エラーが返されます

なぜこれが起こるのか: iOSのGoogle Sign-InはSDKのためにパフォーマンス向上のためにトークンをキャッシュします。キャッシュされたトークンが返された場合、生成されたnonceが異なる(またはnonceが存在しない)可能性があり、不一致が発生します。

解決策: Google の実装は自動的にログアウトし、再試行することで、正しい nonce を含む新しいトークンを生成するように強制します。

手動の回避策 自動再試行が機能しない場合:

// Logout first to clear cached tokens
await SocialLogin.logout({ provider: 'google' });


// Then authenticate
const result = await authenticateWithGoogleSupabase();

これにより、正しい nonce を含む新しいトークンが取得されます。

Capgo の完全な code リファレンスについては、 Capgo の完全な Code リファレンスのセクションを参照してください。.

重要な注意事項

「重要な注意事項」というセクション

nonce の取り扱い

「nonce の取り扱い」というセクション

nonce の実装は、Capacitor からパターンを取り入れています。 React Native Google Sign In ドキュメント:

  • rawNonce は Supabase へ移動します。 signInWithIdToken()
  • Supabase は rawNonce をハッシュ化します。 nonceDigest をハッシュ化したものと
  • nonceDigest が含まれるIDトークンからGoogle Sign-In nonce (SHA-256ハッシュ、16進数エンコード)は

Google Sign-In APIの

自動リトライメカニズム

セクション authenticateWithGoogleSupabase 自動リトライメカニズム retry 関数には

  • 初回呼び出し (retry=false): 認証失敗の場合、自動的にログアウトし、1度だけ再試行します
  • 再試行呼び出し (retry=true): 認証失敗が再び発生した場合、直ちにエラーを返します

iOSのトークンキャッシュ問題を自動的に処理します。

トラブルシューティング

セクションのタイトルは「トラブルシューティング」です

認証が失敗した場合:

  • ノンスの不一致: 関数は自動的に再試行します - 詳細はコンソールログを確認してください。再試行が続行される場合は、手動でログアウトしてください
  • 無効な受信者: Google Cloud ConsoleとSupabase (iOSとWebの両方のクライアントID) で、Google Client IDが一致していることを確認してください
  • トークン検証が失敗しました: 正しく設定されていることを確認してください mode: 'online' initialize呼び出しでidTokenを取得するために
  • Info.plistの設定: Info.plistに正しいURLスキームとGIDClientIDが設定されていることを確認してください
  • 例のアプリを参照してください example app code Capgoの例アプリ

Supabase Google Login on iOSから続けてください

「Supabase Google Login on iOSから続けてください」のセクション

Capgoを使用している場合 iOSでCapgoを使用している場合 認証とアカウントフローの計画に役立つため、Cloudflare、Capacitor、GitHub、Capgo、code、API、SDK、CLI、npm、bunを接続します。 Using @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 Using @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication ページを編集する