Supabase Google Login - General Setup

導入

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

前提条件

__CAPGO_KEEP_0__を開始する前に、以下のことを確認してください:

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

2. を読んでください Googleログインの一般的なセットアップ Google OAuthのクレデンシャルをセットアップするためのガイドを読んでください

3. Google OAuthのクレデンシャルをセットアップするためのプラットフォーム固有のガイドを読んでください:

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

   注意

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

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

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

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

   

3. プロバイダーを有効にするには、 Authentication メニュー

   

4. プロバイダーを有効にする Providers タブ

   

5. Find the Google provider

   

6. Enable the provider

   

7. Add the client IDs for the platforms you plan to use

   

   Note

   This included the web client ID, the iOS client ID and the Android client ID. You can skip providing some of them, depending on the platforms you plan to use.

8. Click on the Save button

   

注意

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

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

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

このセクションでは、Google Sign-InとSupabaseの統合の内部動作について説明します。 このフローを理解することで、認証プロセスの実装とトラブルシューティングを支援できます。

完全実装

完全実装は 例のアプリの supabaseAuthUtils.ts ファイル

1. Nonce Generation

実装では、Supabase nonce 要件に従って安全なnonce Pairを生成します。 コピー:

// 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 };
}

__CAPGO_KEEP_0__

• rawNonce: __CAPGO_KEEP_0__ (64バイトの16進数文字列)
• nonceDigest: __CAPGO_KEEP_0__ のSHA-256ハッシュ rawNonce (16進数エンコード)
• nonceDigest Google Sign-In への nonce のダイジェストが含まれるIDトークンをGoogleが生成する
• rawNonce Supabase への nonce のハッシュが生成され、トークン内の 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 検証

Supabase へのトークン送信前に JWT トークンの検証を行う

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 に送る前に検証するのですか?

Supabase への JWT トークンを送る前にトークンを検証することは、以下の重要な目的を果たします:

1. 無効な要求を防ぐ: トークンに不正な受信者または非一致の nonce が含まれている場合、Supabase はトークンを拒否します。検証することで、不必要な API 呼び出しを回避し、明確なエラーメッセージを提供できます。

2. トークン キャッシュの問題: iOS などのプラットフォーム (特に iOS) で、Google Sign-In SDK がパフォーマンスのためにトークンをキャッシュすることがあります。キャッシュされたトークンが返される場合、キャッシュされたトークンは、異なる nonce (または nonce がない場合) で生成された可能性があり、Supabase によってトークンが

3. nonce の一致エラー で拒否される可能性があります。Supabase へのトークンを送る前に検証することで、早期にこの問題を検出し、自動的にリトライして新しいトークンを取得できます。

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

エラー処理の向上、":検証が失敗した場合、関数は自動的に:

1. Google からログアウト (キャッシュされたトークンをクリア - iOS では重要)
2. 再試行 (正しい nonce を使用して新しいトークンを生成)
3. 再試行も失敗した場合にエラーを返す

4. Supabase サインイン

最終的に検証されたトークンは Supabase に送信される

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

「Code」の完全なリファレンス

完全な実装は、 例のアプリの 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 Login - General Setup から続けてください。

あなたが Supabase Google Login - General Setup を使用して認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login と接続してください。 Using @capgo/capacitor-social-login native機能の使用方法については、@capgo/capacitor-social-loginを参照してください。 @capgo/capacitor-social-login @capgo/capacitor-social-loginの実装方法については、@capgo/capacitor-social-loginを参照してください。 @capgo/capacitor-passkey @capgo/capacitor-passkeyの実装方法については、@capgo/capacitor-passkeyを参照してください。 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装方法については、@capgo/capacitor-native-biometricを参照してください。 2要素認証 2要素認証の実装方法については、2要素認証を参照してください。