Supabase Google Web 登录

简介

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

• 这个 Google 登录 Web 设置
• 这个 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 完整示例请参见此处。

如何工作

了解详细的认证流程，包括 nonce 生成、 JWT 验证和 Supabase 登录，请参见 在 General Setup 指南中的.

For the complete code reference, see the Complete Code Reference section in the General Setup guide.

在 General Setup 指南中的

• Complete __CAPGO_KEEP_0__ Reference SupabasePage.tsx
• - 重定向处理示例组件 SupabaseCreateAccountPage.tsx

- 创建账户页面示例

重定向处理

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

这对于 OAuth 弹出式登录流程的正常工作至关重要。没有这个，弹出窗口在身份验证后不会关闭。

标题：随机数处理

React Native Google Sign In 文档 转到 Supabase 的:

• rawNonce pattern signInWithIdToken()
• Supabase 使用 Google Sign-In 的 ID token 中的 rawNonce 与缓存中的 nonceDigest （SHA-256 hash，16 进制编码）传递给
• nonceDigest 参数在 Google Sign-In API 中 nonce 自动重试

标题：自动重试

如果 JWT 验证在第一次尝试失败，会注销并重试一次

• 这处理了缓存令牌可能具有错误的 nonce 的情况
• 如果重试也失败，会返回错误
• 故障排除

context

如果认证失败:

• 重定向不工作确保你在组件挂载时调用 isLoggedIn() 无效的受众
• : 验证您的Google Client ID在Google Cloud Console和Supabase中都匹配授权重定向URL
• : 检查Google Cloud Console和Supabase中是否配置了授权重定向URL令牌匹配不符
• : 检查控制台日志 - 函数将自动重试，但如果需要，可以手动注销令牌验证失败
• __CAPGO_KEEP_0__: 确保您正在使用 mode: 'online' 在初始化调用中使用
• Review the 示例应用程序 code 以供参考

从 Supabase Google Login on Web 继续

如果您正在使用 Supabase Google Login on Web 来规划身份验证和帐户流程，连接它 使用 @capgo/capacitor-social-login 为 Using @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 Two-factor authentication Two-factor authentication