Supabase Google 登录 - 通用设置

介绍

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

前提条件

开始之前，请确保您有:

1. 创建了 Supabase 项目

2. 阅读了 上下文：Capgo 市场网站的 HTML 文本片段（父级键 `read_the_style_guide`）。页面/区域：Capgo 市场网站。角色：网站副本句子。见于：contributing.astro 页面。信息键 `read_the_style_guide`（阅读风格指南）。 Google 登录通用设置

3. Google OAuth 凭证设置指南

   • 遵循了各自平台的指南来为目标平台设置 Google OAuth 凭证：
   • Android 设置
   • iOS 设置

   注意

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

在 Supabase 中启用 Google OAuth 提供者

1. 前往您的 Supabase 控制台

2. 点击您的项目

   

3. 请前往菜单 Authentication menu

   

4. 启用 Providers tab

   

5. 找到 Google 提供商

   

6. 启用提供商

   

7. 为您计划使用的平台添加客户端 ID

   

   注意

   此处包括 Web 客户端 ID、iOS 客户端 ID 和 Android 客户端 ID。您可以根据所使用的平台跳过一些客户端 ID。

8. 点击按钮 Save 按钮

   

注意

您 不应设置 设置 Client Secret (for OAuth) 或 Callback URL (for OAuth)此指南中不需要设置 Google iOS。 Skip nonce checks Voilà，您现在已启用 Supabase 身份验证中的 Google Sign-In 🎉

保存 Supabase Google 提供商

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

本节解释了 Google Sign-In 与 Supabase 的底层工作原理。了解此流程将有助于您实现和调试身份验证过程。

完整实现

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

1. 随机数生成

实现生成了遵循 Supabase 随机数要求的安全随机数 pair Nonce Generation:

// 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 登录

函数初始化插件并使用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 上，验证令牌确保令牌是为您的特定 Google Client IDs 发行的，从而防止使用其他应用程序的令牌可能引起的安全问题。

4. 更好的错误处理: 在 Supabase 允许自动重试逻辑之前，检测问题是处理 iOS 缓存问题的关键。

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

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 安全的随机非对称
• sha256Hash() - 使用 SHA-256 哈希字符串
• getNonce() - 生成非对称 pair
• decodeJWT() - 解码 JWT token
• validateJWTToken() - 验证 JWT 受众和非对称
• authenticateWithGoogleSupabase() - 主要身份验证函数，自动重试

额外示例文件

• SupabasePage.tsx - 示例组件，包含重定向处理（Web)
• Supabase创建账户页面.tsx - 示例创建账户页面

下一步

下一步

• 请前往针对目标平台的平台特定设置指南:
• 安卓设置
• iOS设置

Web设置

区域标题：继续使用 Supabase Google 登录 - 通用设置 如果您正在使用 为了计划身份验证和帐户流程，连接它 使用@capgo/capacitor-social-login 为@capgo/capacitor-social-login的本机能力 @capgo/capacitor-社交登录 为@capgo/capacitor-social-login的实现细节 @capgo/capacitor-passkey 为@capgo/capacitor-passkey的实现细节 @capgo/capacitor-native-生物识别 为@capgo/capacitor-native-biometric的实现细节，并 双因素身份验证 为双因素身份验证的实现细节。