Supabase Google Web 登录

介绍

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

• 这个 Google Login Web设置
• the Supabase Google 登录 - 通用设置.

Implementation

完整的实现可以在 example app的 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 登录时， __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ isLoggedIn() __CAPGO_KEEP_2__ initialize() 或

这对于 OAuth popup 流程的正常工作至关重要。

实现示例

将此添加到处理 Google Sign-In 的组件中：

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 指南中的“如何工作”部分.

要查看完整的code参考，请参阅 General Setup 指南中的“Complete Code Reference”部分.

另外请参阅：

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

重要注意事项

重定向处理

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

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

非一次性处理

非一次性实现遵循的模式来自 React Native Google Sign In 文档:

• rawNonce 转到 Supabase 的 signInWithIdToken()
• Supabase 生成 rawNonce 和与 nonceDigest 在 ID 令牌中包含的 Google Sign-In
• nonceDigest (SHA-256 哈希，十六进制编码) 转到 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 初始化调用中获取 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 的实现细节，和 双重认证 双重认证实现细节。