Supabase Google ログイン - 一般設定

導入

このガイドでは、Capacitor Social Login プラグインを使用して、Supabase Authentication と Google Sign-In を統合する方法を説明します。この設定では、モバイルプラットフォームでネイティブの Google Sign-In を使用しながら、バックエンドの認証に Supabase Auth を活用できます。

前提条件

開始する前に、以下を確認してください。

1. Supabase プロジェクトを作成

2. 「 「 Google Login General Setup

3. Google OAuth の設定ガイド

   • Androidの設定
   • iOSの設定
   • Webの設定

   注意

   Supabaseのチュートリアルを始める前に、使用するプラットフォームのクライアントIDを生成する必要があります。 このガイドのステップ7で使用します。

SupabaseでGoogle OAuthプロバイダを有効にする

1. あなたの Supabaseダッシュボード

2. あなたのプロジェクト

   

3. Googleアカウントを使用するには Authentication メニュー

   

4. 以下のタブをクリックしてください Providers タブ

   

5. 以下のプロバイダーを探してください Google プロバイダー

   

6. プロバイダーを有効化してください

   

7. 以下のクライアントIDを追加してください

   

   注意

   このプロバイダーには、Web クライアント ID、iOS クライアント ID、および Android クライアント ID が含まれます。使用するプラットフォームに応じて、提供する必要がある ID を省略できます。

8. ボタンをクリックしてください Save ボタン

   

注意

あなたは しないでください 設定しないでください Client Secret (for OAuth) または Callback URL (for OAuth)このガイドでは、iOS上のGoogleに設定する必要はありません。 Skip nonce checks Voilà、Supabase認証とGoogleサインインを有効にしました！🎉

GoogleサインインとSupabase認証ヘルパーのしくみ

GoogleサインインとSupabase認証ヘルパーのしくみ

完全な実装

完全な実装は、

例のアプリの ファイルにあります。 supabaseAuthUtils.ts お役に立てましたか?

1. Nonce Generation

The implementation generates a secure nonce pair following the Supabase nonce requirements:

// Generate URL-safe random nonce
function getUrlSafeNonce(): string {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return Array.from(array, (byte) => byte.toString(16).padStart(2, '0')).join('');
}

// Hash the nonce with SHA-256
async function sha256Hash(message: string): Promise<string> {
  const encoder = new TextEncoder();
  const data = encoder.encode(message);
  const hashBuffer = await crypto.subtle.digest('SHA-256', data);
  const hashArray = Array.from(new Uint8Array(hashBuffer));
  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
}

// Generate nonce pair
async function getNonce(): Promise<{ rawNonce: string; nonceDigest: string }> {
  const rawNonce = getUrlSafeNonce();
  const nonceDigest = await sha256Hash(rawNonce);
  return { rawNonce, nonceDigest };
}

Flow:

• rawNonce: URL-safe random string (64 hex characters)
• nonceDigest: SHA-256 hash of rawNonce (hex-encoded)
• nonceDigest is passed to Google Sign-In → Google includes the nonce digest in the ID token
• rawNonce is passed to Supabase → Supabase hashes the raw nonce and compares with the token’s nonce

2. Google Sign-In

この関数はプラグインを初期化し、Googleでサインインします:

await SocialLogin.initialize({
  google: {
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    // iOS only:
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    mode: 'online', // Required to get idToken
  },
});

const response = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    nonce: nonceDigest, // Pass the SHA-256 hashed nonce
  },
});

3. JWT検証

JWTトークンをSupabaseに送信する前に、実装ではトークンを検証します:

function validateJWTToken(idToken: string, expectedNonceDigest: string): { valid: boolean; error?: string } {
  const decodedToken = decodeJWT(idToken);

  // Check audience matches your Google Client IDs
  const audience = decodedToken.aud;
  if (!VALID_GOOGLE_CLIENT_IDS.includes(audience)) {
    return { valid: false, error: 'Invalid audience' };
  }

  // Check nonce matches
  const tokenNonce = decodedToken.nonce;
  if (tokenNonce && tokenNonce !== expectedNonceDigest) {
    return { valid: false, error: 'Nonce mismatch' };
  }

  return { valid: true };
}

なぜSupabaseに送る前に検証するの?

JWTトークンを検証することは、Supabaseにトークンを送信する前にいくつかの重要な目的を果たします:

1. 無効な要求を防ぐ: トークンに不正な受信者またはnonceの不一致がある場合、Supabaseはトークンを却下します。最初に検証することで、不必要なAPI呼び出しを回避し、より明確なエラーメッセージを提供します。

2. トークンキャッシュの問題: iOSのプラットフォームでは、Google Sign-In SDK がパフォーマンスのためにトークンをキャッシュすることがあります。キャッシュされたトークンが返された場合、キャッシュされたトークンは異なるnonce (またはnonceが存在しない場合) で生成された可能性があり、Supabaseがトークンを「nonceの不一致」エラーで拒否する可能性があります。トークンをSupabaseに送る前に検証することで、早期にこの問題を検出し、自動的に再試行して新しいトークンを取得できます。

3. セキュリティ (iOS): iOSでは、検証により、トークンがあなたの特定のGoogle Client IDに発行されたことを確認し、他のアプリケーション用に意図されたトークンを使用することによる潜在的なセキュリティ問題を防ぎます。

4. エラー処理の改善: Supabaseが許可する前に問題を検出することで、iOSのキャッシュ問題を透明に扱うために自動再試行ロジックが不可欠です。

検証が失敗した場合、関数は自動的に:

1. Googleからログアウト (キャッシュされたトークンをクリア - iOSでは重要)
2. 再度認証を試みる (正しいnonceで新しいトークンを生成することを強制)
3. 再試行も失敗した場合、エラーを返す

4. Supabase Sign-In

4. Supabase Sign-In

const { data, error } = await supabase.auth.signInWithIdToken({
  provider: 'google',
  token: googleResponse.idToken,
  nonce: rawNonce, // Pass the raw (unhashed) nonce
});

Capgo Code の完全なリファレンス

__CAPGO_KEEP_0__ の完全な実装は、 __CAPGO_KEEP_0__ の supabaseAuthUtils.ts ファイルに含まれています。

• getUrlSafeNonce() - URL安全のランダムなnonceを生成します。
• sha256Hash() - SHA-256で文字列をハッシュします。
• getNonce() - nonce pairを生成します。
• decodeJWT() - JWTトークンをデコードします。
• validateJWTToken() - JWTの受信者とnonceを検証します。
• authenticateWithGoogleSupabase() - 自動リトライ機能付きの主な認証関数

追加の例ファイル

• SupabasePage.tsx - Web でリダイレクトハンドリングを実行する例のコンポーネント
• SupabaseCreateAccountPage.tsx - アカウント作成ページの例

次のステップ

次のステップとして、ターゲットプラットフォームのプラットフォーム固有のセットアップガイドに進んでください。

• Android のセットアップ
• iOS のセットアップ
• Web のセットアップ

Supabase Google ログイン - 一般設定から続ける

使用している場合 Supabase Google ログイン - 一般設定から続ける 認証とアカウントフローの計画と実施に使用している場合 Using @capgo/capacitor-social-login 使用している @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey @capgo/capacitor-native-biometric @capgo/capacitor-passkey Capacitorで@capgo/capacitor-native-biometricの実装詳細について 2要素認証 Capacitorで2要素認証の実装詳細について