Supabase Google Web 登录

GitHub

复制安装指南

介绍

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

它 Google 登录 Web 配置
the Supabase Google 登录 - 通用配置.

实现

完整的实现可在示例应用的文件中找到。本指南解释了关键概念和如何使用它。使用身份验证助手 supabaseAuthUtils.ts 标题：使用身份验证助手

该

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() 或 initialize() - 两者都会触发重定向处理。

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

实现示例

将此添加到处理 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 完整示例

如何工作

如何工作详细了解.

For the complete code reference, see the 完成通用设置指南中的Code参考部分.

另外看看

SupabasePage.tsx - 使用 Supabase 的示例组件，包含重定向处理
Supabase创建账户页面 - 使用 Supabase 的示例创建账户页面

重要注意事项

重定向处理

在使用 Google 登录时，必须在重定向发生时， isLoggedIn() OR initialize() - 两者都会触发重定向处理.

OAuth 流程的弹出窗口需要此项，否则认证后弹出窗口不会关闭.

防重发处理

防重发处理的实现遵循了 React Native Google Sign In 文档中的模式从 Supabase 的:

rawNonce Supabase 对 signInWithIdToken()
并与 Google Sign-In 的 ID token 中的 rawNonce （SHA-256 哈希，16 进制编码）传递给 Google Sign-In APIs 中的 nonceDigest 参数
nonceDigest __CAPGO_KEEP_0__ nonce __CAPGO_KEEP_0__

自动重试

实现包括自动重试逻辑:

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

故障排除

如果认证失败:

重定向不起作用确保您在组件挂载时调用 isLoggedIn() onComponentMount (请参见上面的示例)
无效的受众: 确认在 Google Cloud Console 和 Supabase 中的 Google Client IDs 均一致
授权重定向 URL: 检查在 Google Cloud Console 和 Supabase 中是否已配置授权重定向 URL
随机数不匹配: 检查控制台日志 - 函数将自动重试，但如果需要，可以手动注销
令牌验证失败: 确保在初始化调用中使用 mode: 'online' 在 initialize 调用中使用
Review example app code 查看示例应用 __CAPGO_KEEP_0__

如果您正在使用 Google Web Supabase 登录 来规划身份验证和帐户流程，连接它到使用 @capgo/capacitor-social-login 为在使用 @capgo/capacitor-social-login 中的原生能力 @capgo/capacitor-社交登录为在 @capgo/capacitor-social-login 中的实现细节 @capgo/capacitor-passkey 为在 @capgo/capacitor-passkey 中的实现细节 @capgo/capacitor-原生生物识别 for capgo 的实现细节在 @capacitor-native-biometric 中双因素认证 Capgo