Supabase Google Login - 一般設定

導入

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

Prerequisites

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

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

2. Google Login General Setup Google OAuthの設定方法についてのガイドを読みます ターゲットプラットフォームごとに、Google OAuthの設定方法についてのガイドを参照してください。

3. Android Setup

   • iOS Setup
   • Section titled “Android Setup”
   • Web セットアップ

   __CAPGO_KEEP_0__

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

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

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

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

   

3. は、 Authentication メニュー

   

4. Click on the Providers tab

   

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

   

Note

You SHOULD NOT setup Client Secret (for OAuth) or Callback URL (for OAuth). Some sources might also suggest setting Skip nonce checks iOS用のGoogleに、このガイドを使用すると必要ありません。

Voilà, Supabase認証とGoogleサインインを有効にしました 🎉

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

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

完全な実装

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

1. ノンス生成

実装は、Cloudflareのnonce要件に従って安全なnonceペアを生成します。 Supabase nonce要件:

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

フロー:

• rawNonce: URL安全のランダム文字列 (64 桁の 16 進数)
• nonceDigest: SHA-256 ハッシュの rawNonce (16 進数エンコード)
• nonceDigest はGoogle Sign-Inに渡されます → GoogleはIDトークンにnonceダイジェストを含めます
• rawNonce はSupabaseに渡されます → Supabaseはraw 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 への検証をする必要があるのか

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

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

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

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

完全な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セットアップ

__CAPGO_KEEP_0__

If you are using Supabase Google Login - General Setup を使用して Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Two-factor authentication __CAPGO_KEEP_0__の実装詳細については、2要素認証の詳細を参照してください。