Supabase Google Web ログイン

GitHub

このプラグインのインストール手順と全てのマークダウンガイドを含むセットアップコマンドをコピーする。

導入

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

日本語 Google ログイン Web の設定
日本語 Supabase Google ログイン - 一般設定.

実装

実装の詳細は、サンプルアプリケーションの supabaseAuthUtils.ts ファイルにあります。このガイドでは、主な概念と使用方法を説明します。

認証ヘルパーの使用

The 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 での Google ログインの使用時 MUST リダイレクトが発生したときにプラグインの任意の関数を呼び出すことができます。プラグインを初期化してリダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらかを呼び出すことができます。 isLoggedIn() OR 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 」を参照してください。

詳細な説明については、

「」を参照してください。.

For the complete code reference, see the 総合設定ガイドの「General Setup」セクションの「Complete Code Reference」部分を完了してください。.

も参照してください:

SupabasePage.tsx - リダイレクト処理を含む例のコンポーネント
Supabaseアカウント作成ページ.tsx - アカウント作成ページの例

重要な注意事項

リダイレクト処理

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

OAuth ポップアップフローが正しく動作するために不可欠です。この設定を省略すると、認証後ポップアップウィンドウが閉じません。

Nonce ハンドリング

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

rawNonce nonce のハッシュ値は Supabase が作成します。 signInWithIdToken()
nonce のハッシュ値は Supabase が作成します。 rawNonce nonce のハッシュ値は Google Sign-In の ID トークンから取得します。 nonceDigest nonce のハッシュ値は SHA-256 ハッシュ値で、16 進数エンコードされています。
nonceDigest items nonce Google Sign-In APIのパラメータ

自動再試行

実装には自動再試行ロジックが含まれています：

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

トラブルシューティング

セクション：トラブルシューティング

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

もし、 Supabase Google Login on Web を 利用している場合 Capgoでは、@capgo/capacitor-social-loginを使用します。 Capgoのネイティブ機能である@capgo/capacitor-social-loginの使用 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login のネイティブ機能のために Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login の実装詳細のために、 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric を参照してください。 2要素認証 2要素認証の実装詳細についてはこちらを参照してください。