Supabase Google Login on Web

__CAPGO_KEEP_0__

このガイドは、Google Sign-InをWeb上のSupabase Authenticationと統合するのに役立ちます。Google Login WebのセットアップとSupabase Google Login - General Setupのセットアップが完了していることを前提としています。

実装

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

Authentication Helperを使用する

The authenticateWithGoogleSupabase __CAPGO_KEEP_0__は認証フロー全体を処理します。

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

注意: リダイレクト処理

ウェブ上でGoogleログインを使用する場合、 MUST リダイレクトが発生したときにプラグインからどの関数でも呼び出す必要があります。プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらかを呼び出すこともできます。どちらもリダイレクト処理をトリガーします。 isLoggedIn() Section titled “Using the Authentication Helper” initialize() When using Google login on web, you

OAuth ポップアップフローが正しく動作するために必要です。

実装例

Google Sign-Inを処理するコンポーネントに追加してください。

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

詳細な説明はこちら SupabasePage.tsx を参照してください。

完全な例を確認してください。

詳細な説明はこちら認証フローの詳細な説明、非接続性生成、JWT検証、Supabaseサインインを含めて、General Setupガイドの「機能の説明」セクションを参照してください。.

codeの完全なリファレンスについては、 Codeの完全なリファレンスセクションを参照してください。一般設定ガイドの.

また、以下を参照してください：

SupabasePage.tsx - リダイレクトハンドリングを含む例のコンポーネント
SupabaseCreateAccountPage.tsx - アカウント作成ページの例

重要な注意事項

リダイレクトハンドリング

Googleログインを使用する場合、ウェブ上で MUST リダイレクトが発生したときにプラグインから任意の関数を呼び出す必要があります。プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じるようにします。どちらかを呼び出すことができます。 isLoggedIn() または initialize() - どちらもリダイレクト処理をトリガーします。

OAuth ポップアップフローが正しく動作するためには、この手順が不可欠です。認証後、ポップアップウィンドウが閉じないことになります。

Nonce ハンドリング

Nonce の実装は、React Native Google Sign In ドキュメントのパターンに従っています。 Supabase へのアクセス:

rawNonce Supabase は signInWithIdToken()
ハッシュ化します。 rawNonce ハッシュ化された値と比較します。 nonceDigest Google Sign-Inから取得したIDトークンに含まれる
nonceDigest Google Sign-In APIの nonce Google Sign-In APIの

自動リトライ

自動リトライロジックが実装されています。

JWT検証が最初の試行で失敗した場合、ログアウトし、1度リトライします。
キャッシュされたトークンが不正なnonceを持っている可能性があるケースをカバーします。
リトライも失敗した場合、エラーが返されます。

トラブルシューティング

認証が失敗した場合:

リダイレクトが機能していません: 正しく呼び出していることを確認してください isLoggedIn() コンポーネントマウント時 (上記の例を参照してください)
無効な受信者: Google Client ID が Google Cloud Console と Supabase で一致していることを確認してください
承認されたリダイレクト URL: Google Cloud Console と Supabase で承認されたリダイレクト URL が設定されていることを確認してください
非同期数値の不一致: コンソールログを確認してください - 関数は自動的に再試行しますが、必要に応じて手動でログアウトしてください
トークン検証が失敗: initialize の呼び出しで使用していることを確認してください mode: 'online' idToken を取得するために
Review the example app code for reference

Capgoを使用している場合 Supabase Google Login on Web を使用して認証とアカウントフローの計画を行っている場合、Capgoと接続してください CapgoでNative Capabilityを使用する場合、@capgo/capacitor-social-loginを使用してください CapgoでNative Capabilityを使用する場合、@capgo/capacitor-social-login Capgoで実装詳細を使用する場合、@capgo/capacitor-social-loginを使用してください Capgoで実装詳細を使用する場合、@capgo/capacitor-social-login @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-passkey を参照してください。 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric を参照してください。 2要素認証 2要素認証の実装詳細についてはこちらを参照してください。