Supabase Google Web 登录

介绍

本指南将帮助您在Web上将Google Sign-In与Supabase Authentication集成。假设您已经完成：

• 这个 Google Login Web设置
• the Supabase Google 登录 - 一般设置.

Implementation

完整的实现可以在 示例应用程序的 supabaseAuthUtils.ts 文件中找到。 本指南解释了关键概念和如何使用它。

使用身份验证助手

身份验证助手 authenticateWithGoogleSupabase 函数处理整个身份验证流程：

import { authenticateWithGoogleSupabase } from './supabaseAuthUtils';

const result = await authenticateWithGoogleSupabase();
if (result.success) {
  console.log('Signed in:', result.user);
  // Navigate to your authenticated area
} else {
  console.error('Error:', result.error);
}

严重: 重定向处理

严重: 重定向处理

在使用 Google 登录时， 必须 在重定向发生时调用插件中的任何函数以初始化插件，使其能够处理重定向并关闭弹出窗口。您可以调用 isLoggedIn() 或 initialize() -

两者都会触发重定向处理。

这对于 OAuth 弹出窗口流程的正常工作至关重要。

标题：实现示例

import { useEffect } from 'react';
import { SocialLogin } from '@capgo/capacitor-social-login';

function SupabasePage() {
  // Check Google login status on mount to invoke redirect handling
  // This doesn't serve any functional purpose in the UI but ensures
  // that any pending OAuth redirects are properly processed
  useEffect(() => {
    const checkGoogleLoginStatus = async () => {
      try {
        await SocialLogin.isLoggedIn({ provider: 'google' });
        // We don't use the result, this is just to trigger redirect handling
      } catch (error) {
        // Ignore errors - this is just for redirect handling
        console.log('Google login status check completed (redirect handling)');
      }
    };

    checkGoogleLoginStatus();
  }, []);

  // ... rest of your component
}

查看 SupabasePage.tsx 请参阅完整示例

如何工作

要了解详细的说明，包括 nonce 生成、 JWT 验证和 Supabase 登录，请参阅 在 General Setup 指南中的“如何工作”部分.

For the complete code reference, see the Code.

参考，请参阅

• 在 General Setup 指南中的“完整__CAPGO_KEEP_0__参考”部分 - 使用重定向处理的示例组件
• SupabaseCreateAccountPage.tsx - 使用重定向处理的示例创建账户页面

重要注意事项

重定向处理

在使用 Google 登录时， 必须 在重定向发生时调用插件中的任何函数以初始化插件，使其可以处理重定向并关闭弹出窗口。您可以调用 isLoggedIn() 或 initialize() - 两者都会触发重定向处理。

这对于 OAuth popup 流程的正常工作是必需的。没有这个，弹出窗口在身份验证后不会关闭。

随机数处理

随机数的实现遵循了从 React Native Google Sign In 文档中的模式:

• rawNonce 转到 Supabase 的 signInWithIdToken()
• Supabase 对 rawNonce 并将其与 nonceDigest 从 Google Sign-In 中获得的 ID 令牌中的
• nonceDigest (SHA-256 哈希，16 进制编码)转到 nonce 参数在 Google Sign-In API 中

自动重试

实现包括自动重试逻辑：

• 如果 JWT 验证在第一次尝试失败时，会注销并尝试一次
• 这处理了缓存令牌可能有错误的 nonce 的情况
• 如果重试也失败，会返回错误

故障排除

如果认证失败：

• 重定向不工作: 确保你在 isLoggedIn() 组件挂载时调用（见上面的示例）
• 无效的受众: 确认 Google Client IDs 在 Google Cloud Console 和 Supabase 中匹配
• Authorized redirect URLs: 确认在 Google Cloud Console 和 Supabase 中配置了授权重定向 URL
• Nonce mismatch: 检查控制台日志 - 函数将自动重试，但如果需要，可以手动注销
• Token validation fails: 确保在初始化调用中使用 mode: 'online' in the initialize call to get an idToken
• Review the example app code for reference

Keep going from Supabase Google Login on Web

如果您正在使用 Supabase Google Login on Web 来规划身份验证和帐户流程，连接它到 使用 @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 中的实现细节 双重身份验证 双重身份验证的实现细节。