Supabase Google Web 登录

简介

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

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

实现

完整的实现可在 示例应用程序中找到 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);
}

关键：重定向处理

关键：重定向处理

当在 web 上使用 Google 登录时，您 必须 在重定向发生时调用该插件中的任何函数以初始化该插件，使其可以处理重定向并关闭弹出窗口。您可以调用 isLoggedIn() 或 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 指南中的.

For the complete code reference, see the 完整的Code参考，请参阅.

在 General Setup 指南中的

• Complete __CAPGO_KEEP_0__ Reference 部分 另外请参阅：
• SupabasePage.tsx - 重定向处理的示例组件

SupabaseCreateAccountPage.tsx

重要注意事项：

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

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

标题：随机数处理

React Native Google Sign In 文档 转到 Supabase:

• rawNonce 的模式 signInWithIdToken()
• Supabase 使用 Google Sign-In 的 ID token 中的 rawNonce 与 Supabase 中的 nonceDigest 进行比较（SHA-256 hash，16 进制编码）将传递给
• nonceDigest Google Sign-In API 的 nonce 自动重试

标题：自动重试

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

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

context: 支持/高级支持页面或底部支持部分。角色：标题或页面标题。见：页面 support-policy.astro。

如果认证失败:

• 重定向不工作确保你在组件挂载时调用 isLoggedIn() 无效的受众
• : 验证您的 Google Client IDs 在 Google Cloud Console 和 Supabase 中都匹配授权重定向 URL
• : 检查 Google Cloud Console 和 Supabase 中是否配置了授权重定向 URLNonce 不匹配
• : 检查控制台日志 - 函数将自动重试，但如果需要，可以手动注销令牌验证失败
• items: 确保您正在使用 mode: 'online' in the initialize call to get an idToken
• Review the example app code for reference

从 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 的实现细节，以及 双因素认证 为双因素认证的实现细节