Supabase Google Login on Web

GitHub

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

導入

このガイドでは、Google Sign-InをWeb上の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 で、リダイレクトが発生すると、 MUST プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じることができます。プラグインからどの関数を呼び出すかは、 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サインインの流れについては、 General Setupガイドの「How It Works」セクションを参照してください.

詳細なcodeの説明については、 General Setupガイドの「Complete Code Reference」セクションを参照してください.

参考資料

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

重要な注意事項

redirectHandling

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

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

ノンスハンドリング

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

rawNonce goes to Supabase’s signInWithIdToken()
SupabaseはGoogle Sign-InのIDトークンから取得した rawNonce をハッシュ化し nonceDigest と比較します。
nonceDigest Google Sign-In APIの nonce パラメータにハッシュ値を送信します。

ハッシュ値はSHA-256ハッシュ値で16進数エンコードされています。

「自動リトライ」セクション

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

リトライも失敗した場合、エラーが返されます。

認証が失敗した場合:

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

Supabase Google Login on Webを使用している場合 Supabase Google Login on Webを使用して認証とアカウントフローの計画を行っている場合、Capacitorの Using @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login Using @capgo/capacitor-social-loginのネイティブ機能 for the native capability in Using @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要素認証の実装詳細について