Supabase Googleログイン - 一般設定

導入

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

前提条件

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

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

2. Read the Google Login General Setup Google OAuth の設定方法を学びましょう

3. 各プラットフォームの設定方法を参考にして、Google OAuth の設定を実施してください。

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

   注意

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

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

1. Go to your __CAPGO_KEEP_0__ Supabase __CAPGO_KEEP_0__

2. Click on your __CAPGO_KEEP_0__

   

3. Do go to the __CAPGO_KEEP_0__ Authentication menu

   

4. Click on the __CAPGO_KEEP_2__ Providers __CAPGO_KEEP_2__ __CAPGO_KEEP_3__

   

5. provider Google プロバイダー

   

6. プロバイダーを有効にする

   

7. 使用する予定のプラットフォームごとにクライアントIDを追加する

   

   注意

   Web クライアントID、iOS クライアントID、Android クライアントIDを含む。使用する予定のプラットフォームによっては、提供する必要のあるものを省略できます。

8. ボタンをクリック Save ボタン

   

注意

このガイドを使用することで、iOS上のGoogleアカウントの設定は必要ありません。 Voilà、Google Sign-In with Supabase Authenticationを有効にしました！ Google Sign-In with Supabase Authentication Helperのしくみ Client Secret (for OAuth) このセクションでは、Google Sign-InのSupabaseとの統合の内部動作を説明します。 このフローを理解することで、認証プロセスの実装とトラブルシューティングを支援できます。 Callback URL (for OAuth)実装 Skip nonce checks __CAPGO_KEEP_0__

このガイドでは、Google Sign-Inの設定は必要ありません。

このガイドでは、Google Sign-Inの設定は必要ありません。

このガイドでは、Google Sign-Inの設定は必要ありません。

完全実装

完全な実装は、 のファイルにあります。 supabaseAuthUtils.ts 1. Nonce の生成

「1. Nonce の生成」のセクション

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

: URL 安全のランダム文字列 (64 の 16 進数文字)

• rawNonce: SHA-256 のハッシュ
• nonceDigestCopy to clipboard rawNonce (__CAPGO_KEEP_0__)
• nonceDigest Google Sign-In により渡されるnonceのハッシュ値がIDトークンに含まれます。
• rawNonce Supabase には、nonceのハッシュ値が渡されます。Supabaseは、トークンの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を含む）では、Google Sign-InSDKはキャッシュされたトークンをパフォーマンスのためにキャッシュすることがあります。キャッシュされたトークンが返された場合、キャッシュされたトークンは、異なるnonce（またはnonceが存在しない場合）で生成された可能性があり、Supabaseによってトークンが「nonceの不一致」エラーで拒否される可能性があります。検証することで、トークンが生成されたnonceが正しいかどうかを検出できます。また、キャッシュされたトークンを自動的に再試行して、最新のトークンを取得できます。

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

4. エラー処理の向上: Supabaseに送信する前に検証することで、トークンが不正である場合に自動的にリトライするロジックを実行できます。これは、iOSのキャッシュ問題を透明に扱うために不可欠です。

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

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

4. Supabaseサインイン

最終的に、検証されたトークンはSupabaseに送信されます。

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

Complete Code リファレンス

実装の詳細は、 例のアプリの supabaseAuthUtils.ts ファイルにあります。これには次のものが含まれます。

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

追加の例ファイル

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

次のステップ

目的のプラットフォームに応じたプラットフォーム固有のセットアップガイドに進みましょう:

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