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

重要说明

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

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

标题：随机数处理

React Native Google Sign In 文档 转到 Supabase:

• rawNonce protectedTokens signInWithIdToken()
• Supabase 使用 Google Sign-In 的 ID token 中的 rawNonce 并与其进行比较 nonceDigest SHA-256 散列（十六进制编码）包含在 ID token 中
• nonceDigest （SHA-256 散列，十六进制编码）将传递给 Google Sign-In API 的 nonce 自动重试

标题：自动重试

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

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

上下文：支持/高级支持页面或底部支持部分。角色：部分或页面标题。见：页面 support-policy.astro。消息键 `support_policy_troubleshooting_title` (支持政策故障排除标题)。

如果认证失败:

• 重定向不工作确保你在组件挂载时调用 isLoggedIn() 无效的受众
• : 验证你的Google Client IDs在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 用于在使用 @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 的实现细节，以及 双因素认证 为双因素认证的实现细节