Supabase Google Login on Web

简介

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

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

实施

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

使用身份验证助手

The 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);
}

关键：重定向处理

关键：重定向处理

当在 web 上使用 Google 登录时， 必须 在重定向发生时从插件中调用任何函数以初始化插件，使其可以处理重定向并关闭弹出窗口。您可以调用任意一个函数 isLoggedIn() OR initialize() - both will trigger the redirect handling.

为了 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 登录，请参见《通用设置指南》中的 How It Works.

完整的code参考，请参见《通用设置指南》中的 Complete Code Reference.

另外请参见：

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

重要注意事项

重定向处理

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

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

Nonce Handling

Nonce 实现遵循从 React Native Google Sign In 文档:

• rawNonce 转到 Supabase 的 signInWithIdToken()
• Supabase生成一个哈希值 rawNonce 并将其与 nonceDigest Google Sign-In ID token中的
• nonceDigest (SHA-256哈希值，16进制编码)发送到 nonce Google Sign-In API的

参数

标题为“自动重试”

• 实现包括自动重试逻辑：
• 如果JWT验证在第一次尝试时失败，它会注销并重试一次
• 这处理了缓存令牌可能具有错误的非法令牌的场景

如果重试也失败，会返回错误信息

如果认证失败：

• 重定向不起作用: 确保你在组件挂载时调用 isLoggedIn() (如上例所示)
• 无效的受众: 确保在 Google Cloud Console 和 Supabase 中的 Google Client ID 匹配
• 授权重定向 URL: 检查在 Google Cloud Console 和 Supabase 中配置的授权重定向 URL
• 随机数值不匹配: 检查控制台日志 - 函数将自动重试，但如果需要，可以手动注销
• 令牌验证失败: 确保您正在使用 mode: 'online' in the initialize call to get an idToken
• Review the 示例应用程序 code 以获取参考

从 Supabase Google Login on Web 继续

如果您正在使用 Supabase Google Login on Web 来规划身份验证和帐户流程，连接它 使用 @capgo/capacitor-social-login 为 native 能力在使用 @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的实现细节, 双因素认证 为双因素认证的实现细节