Supabase Google Login on Web

GitHub

インストール

導入

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

その Google Login Webの設定
その Supabase Google Login - General Setupの設定.

実装

完全な実装は例のアプリケーション supabaseAuthUtils.ts ファイル。このガイドでは、主な概念とその使用方法について説明します。

認証ヘルパーの使用

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

重要: リダイレクト処理

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

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サインインの流れについては、「一般設定ガイド」の「How It Works」セクションを参照してください.

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

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

SupabasePage.tsx - リダイレクトハンドリングを実装した例のコンポーネント
- リダイレクトハンドリングを実装した例のアカウント作成ページ重要な注意事項

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

重要な注意事項

Web上でのGoogleログインを使用する場合、必須リダイレクトが発生したときにプラグインから任意の関数を呼び出す必要があります。プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらかを呼び出すとリダイレクトハンドリングがトリガーされます。 isLoggedIn() 両方を呼び出すとリダイレクトハンドリングがトリガーされます。 initialize() OAuthポップアップフローが正しく動作するためには、このステップが不可欠です。認証後、ポップアップウィンドウが閉じないためです。

ノンスハンドリング

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

Supabaseのを参照しています。:

rawNonce goes to Supabase’s signInWithIdToken()
SupabaseはGoogle Sign-InのIDトークンから取得した rawNonce をハッシュ化し、 nonceDigest と比較します。
nonceDigest Google Sign-In APIの nonce パラメータにハッシュ値（SHA-256ハッシュ値、16進数エンコード）が含まれます。

自動リトライ

自動リトライロジックが含まれる実装です。

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

トラブルシューティング

認証が失敗した場合:

リダイレクトが機能しない: 以下の例を参照してくださいが、コンポーネントをマウントする際に呼び出してください isLoggedIn() 無効な受信者
: Google Cloud Console と Supabase で両方の Google Client ID が一致していることを確認してください承認済みリダイレクト URL
: Google Cloud Console と Supabase で両方の承認済みリダイレクト URL が設定されていることを確認してくださいNonce の一致性が不正
: コンソールログを確認してください - 関数は自動的に再試行しますが、必要に応じて手動でログアウトしてくださいトークン検証が失敗
protectedTokens: Supabase Google Login を正しく使用していることを確認してください。 mode: 'online' : initialize の呼び出しで idToken を取得するために使用してください。
: Supabase Google Login の Web の例を参照してください。 example app code : Supabase Google Login on Web から続けてください。

: Supabase Google Login on Web を使用して認証とアカウントフローの計画を行っている場合、 : @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login を使用して、 : @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login のネイティブ機能を使用してください。 : @capgo/capacitor-social-login のネイティブ機能を使用してください。 : @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要素認証を参照してください。