Supabase Google 登录 - 通用设置

简介

本指南将指导您在使用 Capacitor 社交登录插件的同时，整合 Google Sign-In 与 Supabase 身份验证。该设置允许您在移动平台上使用原生 Google Sign-In，同时利用 Supabase Auth 进行后端身份验证。

前提条件

开始之前，请确保您已完成以下步骤：

1. 创建 Supabase 项目

2. 阅读 Google 登录通用设置 指南以设置 Google OAuth 凭证

3. 遵循各个平台的指南以设置 Google OAuth 凭证以适应您的目标平台：

   • Android Setup
   • iOS Setup
   • Web Setup

   注意

   在开始 Supabase 教程之前，需要为您计划使用的平台生成客户端 ID。 您将在本教程第 7 步中使用它们。

在 Supabase 中启用 Google OAuth 提供者

1. 前往您的 Supabase 控制台

2. 点击您的项目

   

3. 去 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)__CAPGO_KEEP_0__。有些来源也可能建议在 iOS 上为 Google 设置，但根据本指南，这并不是必要的。 Skip nonce checks Voilà，您现在已经启用了 Supabase 身份验证的 Google Sign-In 🎉

Google Sign-In with Supabase Authentication Helper 的工作原理

Google Sign-In with Supabase Authentication Helper 的工作原理

完整实现

完整的实现可在

示例应用的 文件中找到。 supabaseAuthUtils.ts __CAPGO_KEEP_0__

1. 随机数生成

实现生成一个安全的随机数对，遵循 Supabase 随机数要求:

// 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 个十六进制字符）
• nonceDigest: SHA-256 哈希值 rawNonce (十六进制编码)
• nonceDigest 传递给 Google Sign-In → Google 将随机数摘要包含在 ID 令牌中
• rawNonce 传递给 Supabase → Supabase 哈希原始随机数并与令牌的随机数进行比较

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-In SDK 可以缓存令牌以提高性能。当缓存令牌返回时，缓存令牌可能已使用不同的 nonce（或无 nonce）生成，导致 Supabase 拒绝令牌并显示“nonce 匹配错误”。通过在发送到 Supabase 之前验证令牌，我们可以尽早检测到此问题并自动重试使用新令牌。

3. Security (iOS): 在 iOS 上，验证确保令牌是为您的特定 Google Client IDs 发行的，从而防止使用其他应用程序的令牌引起的潜在安全问题。

4. Better Error Handling: 检测问题之前 Supabase 允许自动重试逻辑，这对于在 iOS 缓存问题下处理透明地是必需的。

如果验证失败，函数自动：

1. 从 Google 登出（清除缓存令牌 - iOS 上至关重要）
2. 尝试一次重新认证（强制使用正确 nonce 的新令牌生成）
3. 如果重试也失败，返回错误

4. Supabase Sign-In

最后，经过验证的令牌被发送到 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 安全随机非对称密钥
• sha256Hash() - 使用 SHA-256 哈希字符串
• getNonce() - 生成非对称密钥 pair
• decodeJWT() - 解码 JWT token
• validateJWTToken() - 验证 JWT audience 和 nonce
• authenticateWithGoogleSupabase() - 主要身份验证函数，自动重试

附加示例文件

• SupabasePage.tsx - 使用 Web 重定向处理的示例组件
• SupabaseCreateAccountPage.tsx - 创建帐户页面示例

下一步

请前往针对您的目标平台的平台特定设置指南：

• 安卓设置
• iOS 设置
• Web 设置

从 Supabase Google 登录 - 通用设置继续

如果您正在使用 Supabase Google 登录 - 通用设置 来规划身份验证和帐户流程，连接它到 使用 @capgo/capacitor-social-login 为在使用 @capgo/capacitor-social-login 中的原生能力 使用 @capgo/capacitor-social-login 为在 @capgo/capacitor-social-login 中的实现细节 使用 @capgo/capacitor-passkey 为在 @capgo/capacitor-passkey 中的实现细节 使用 @capgo/capacitor-native-biometric 对于 @capgo/capacitor-native-biometric 的实现细节 双因素认证 对于双因素认证的实现细节