Supabase Google ログイン (Web)

インストール

導入

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

Google Login Webの設定 Supabase Google Login - 一般設定
実装 __CAPGO_KEEP_0__.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__の完全な実装は、 __CAPGO_KEEP_0__の 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);
}

注意: リダイレクトハンドリング

The complete implementation is available in the __CAPGO_KEEP_0__'s file. This guide explains the key concepts and how to use it.

Google ログインを使用する場合のウェブでは、 __CAPGO_KEEP_0__ プラグインから任意の関数を呼び出す必要があります。リダイレクトが発生したときに、プラグインを初期化するために呼び出す必要があります。リダイレクトを処理し、ポップアップウィンドウを閉じることができます。どちらもリダイレクト処理をトリガーします。 isLoggedIn() OAuth ポップアップフローが正しく動作するためには、これが不可欠です。 initialize() 実装例

セクション “実装例”

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
}

targetLanguage protectedTokens 完全な例のために。

How It Works

非同期認証フローについての詳細な説明、nonceの生成、JWTの検証、Supabaseへのサインインを含む、はGeneral Setupガイドの「How It Works」セクションを参照してください。 General Setupガイドの「How It Works」セクション.

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

も参照してください。

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

注意事項

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

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

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

ノンスハンドリング

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

rawNonce Supabaseは signInWithIdToken()
を生成し、 rawNonce を比較します。 nonceDigest Google Sign-Inから取得したIDトークンに含まれる
nonceDigest (SHA-256ハッシュ、16進数エンコード)をSupabaseに送信します。 nonce Google Sign-In APIの

自動リトライ

nonce実装には自動リトライロジックが含まれています。

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

トラブルシューティング

認証が失敗した場合:

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