Supabase Google 登录 - 通用设置

简介

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

前提条件

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

1. 创建了 Supabase 项目

2. 已阅读 context:HTML 文本片段来自更长的 Capgo UI 字符串（父键 `read_the_style_guide`）。页面/区域：Capgo 市场网站。角色：网站副本句子。见于：contributing.astro 页面。消息键 `read_the_style_guide`（阅读样式指南）。 Google 登录通用设置

3. 设置 Google OAuth 凭证指南

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

   注意

   在开始 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)某些来源也可能建议在 iOS 上设置 Google，但本指南中不需要。 Skip nonce checks Voilà，您现在已启用了 Supabase 身份验证的 Google Sign-In 🎉

Google Sign-In 与 Supabase 身份验证助手的工作原理

Google Sign-In 与 Supabase 身份验证助手的工作原理

完整实现

完整的实现可在示例应用的文件中找到。

Google Sign-In 与 Supabase 身份验证助手的工作原理 本节解释了 Google Sign-In 与 Supabase 身份验证的工作原理。了解此流程将有助于您实施和调试身份验证过程。 supabaseAuthUtils.ts 完整实现

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. 安全性 (iOS): 在 iOS 上，验证确保令牌是为您的特定 Google Client IDs 发行的，从而防止使用其他应用程序意图的令牌引起潜在安全问题。

4. 更好的错误处理: 检测问题之前发送到 Supabase 可以实现自动重试逻辑，这对于在 iOS 缓存问题下处理透明地非常重要。

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

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

4. Supabase 登录

4. 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 @capgo/capacitor-native-biometric 双因素认证 Capgo 双因素认证