__CAPGO_KEEP_0__
Capgo
教程

使用Capacitor Social Login插件设置Supabase身份验证

Learn how to integrate Supabase authentication with the Capgo Social Login plugin for seamless Google, Apple, and Facebook authentication in your Capacitor app.

文章来源

马丁·多纳迪厄

作者

瓦莱里亚

审阅者

乔丹

编辑

使用Capacitor Social Login插件设置Supabase身份验证

在移动应用中设置身份验证可能会很复杂，但结合 Supabase 和 Capgo Social Login 插件 可以让它变得简单。这篇教程将指导您通过在您的 Capacitor 应用中集成 Supabase 和社交身份验证（Google、Apple、Facebook）.

为什么要使用 Supabase 与社交登录?

Supabase 提供了一个强大的后端服务，内置身份验证，而 @capgo/capacitor-social-login 插件提供了原生社交身份验证，支持 iOS、Android 和 web 平台。为了更紧密地与 Supabase 集成， @capgo/capacitor-supabase 添加了原生身份验证助手和 JWT 访问。他们一起提供:

  • 无缝的社交认证
  • 安全令牌管理
  • 跨平台兼容性
  • 实时数据库集成
  • 内置用户管理

前提条件

在开始之前，请确保您有:

  • 一个Capacitor项目已设置
  • 一个Supabase帐户和项目
  • 您选择的社交提供商的开发者帐户（Google、Apple、Facebook）

步骤 1：安装和配置社交登录插件

首先，安装Capgo社交登录插件：

npm install @capgo/capacitor-social-login
npx cap sync

查看 社交登录 和 Supabase 步骤 2: 设置 Supabase 项目

创建并配置您的 Supabase 项目

创建 Supabase 项目

  1. 前往:

    • supabase.com 并注册/登录 点击
    • __CAPGO_KEEP_0__ “新项目”
    • 选择您的组织
    • 输入一个 项目名称 (例如，“MyApp Auth”)
    • 设置一个 数据库密码 (安全保存)
    • 选择您的 区域 (选择最接近您的用户)
    • 点击 “新建项目”

  2. 获取您的项目凭据:

    • 创建后，前往 设置 > API
    • 复制您的 项目 URL (例如， https://your-project-ref.supabase.co)
    • 复制您的 匿名公共 API 密钥
    • 将这些信息保存起来，以便在您的应用中使用

配置身份验证设置

  1. 设置通用身份验证设置:

    • 前往 身份验证 > 设置
    • 在 通用设置:
      • 设置 站点URL 到您的应用程序URL（例如 https://yourdomain.com 或 http://localhost:3000 用于开发
      • 添加额外的 重定向URL 如果需要: 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. 配置电子邮件设置 (可选但推荐):

    • 在 SMTP 设置,配置您的电子邮件提供商
    • 这使电子邮件确认和密码重置可用
    • 对于开发，您可以使用内置的电子邮件服务

启用社交身份验证提供商

  1. 访问提供商部分:
    • 转到 身份验证 > 提供商 在您的 Supabase 控制台中
    • 您将看到可用的社交提供商列表
    • 每个提供商都有一个 启用 开关和配置选项

现在让我们详细配置每个社交提供商:

步骤 3：在 Supabase 中配置社交提供商

在 Supabase 中设置 Google 认证

首先，获取您的 Google OAuth 凭证：

遵循我们的全面 Google 设置指南： Google 认证设置

本指南涵盖：

  • 创建 Google Cloud 项目
  • 为 web、iOS 和 Android 设置 OAuth 2.0 凭证
  • 配置-consent 屏幕
  • 获取所需的 Client ID 和密钥

完成 Google 设置后，在 Supabase 中配置它:

  1. 在 Supabase 中启用 Google 提供者:
    • 在您的 Supabase 控制台中，转到 身份验证 > 提供者
    • 找到 Google 并切换到 打开
    • 填写配置:
      • 客户端 ID:您的 Google OAuth Web 客户端 ID（来自 Google Cloud 控制台）
      • 客户端密钥:您的 Google OAuth Web 客户端密钥
      • 重定向 URL: https://your-project-ref.supabase.co/auth/v1/callback (自动填充)
    • 点击 “保存”

重要：使用 Web Client ID 和 Web Client Secret 在 Supabase 中，即使您正在构建移动应用程序。移动客户端 ID 在插件配置中单独使用。

设置 Apple 认证在 Supabase 中

获取 Apple 凭证：

遵循我们的详细 Apple 设置指南： Apple 认证设置

本指南涵盖：

  • 设置 Apple 开发者帐户
  • 创建 App IDs 和 Service IDs
  • 配置 Apple 登录功能
  • 生成所需的私钥
  • 针对 iOS、Android 和 Web 的平台特定设置

完成 Apple 设置后，在 Supabase 中配置它:

  1. 在 Supabase 中启用 Apple 提供者:
    • 转到 身份验证 > 提供者 并切换 Apple 开启
    • 填写配置:
      • 客户端 ID: 你的服务 ID 标识符（例如， com.yourapp.signin)
      • 客户端密钥: 使用你的 Apple 私钥生成此 JWT（参见 Apple Supabase 文档 ，了解 JWT 格式)
      • 重定向 URL: https://your-project-ref.supabase.co/auth/v1/callback (自动填充)
    • 点击 “保存”

注意: Apple authentication setup is the most complex due to Apple’s requirements for Service IDs, private keys, and JWT generation. Follow our documentation carefully for each platform.

设置Facebook认证在Supabase

获取Facebook凭证:

请遵循我们的完整Facebook设置指南: Facebook认证设置

本指南涵盖:

  • 创建Facebook开发者帐户和应用
  • 添加Facebook登录产品
  • 配置OAuth重定向URI
  • 获取您的App ID、App Secret和Client Token
  • 针对iOS和Android的平台特定配置

完成Facebook设置后，在Supabase中配置它:

  1. 在 Supabase 中启用 Facebook 提供者:
    • 前往 认证 > 提供者 并切换 Facebook 开启
    • 填写配置:
      • 客户端 ID: 你的 Facebook App ID
      • 客户端密钥: 你的 Facebook App Secret
      • 重定向 URL: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • 点击 “保存”

注意事项确保在Facebook应用的https://your-project-ref.supabase.co/auth/v1/callback有效OAuth重定向URI 中添加Supabase回调URL（ ）.

重要的Supabase配置说明

行级安全性（RLS）：

  • 在设置身份验证后，启用表格的RLS
  • 前往 数据库 > 表格 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 为每个表格启用 RLS
  • 根据已验证用户创建控制数据访问的策略

用户管理：

  • 查看已验证用户在 在
  • 监控认证事件在 在
  • 设置电子邮件模板在 __CAPGO_KEEP_0__

测试配置：

  • 使用 Supabase 的内置身份验证测试工具
  • 前往 身份验证 > 用户 并点击 “邀请用户” 测试电子邮件流程
  • 检查 日志 部分

步骤 4：配置社交登录插件

现在，Supabase 已配置，需要使用相应凭证设置社交登录插件 重要:该插件需要从原有提供商处获取OAuth凭据（而不是从Supabase），而Supabase则负责服务器端身份验证。 如何身份验证流程工作 在进入配置之前，了解流程：

插件使用原生方式与社交提供商（Google/Apple/Facebook）进行身份验证

插件接收令牌

  1. (访问令牌，ID令牌)从提供商 您的应用将这些令牌
  2. 发送到Supabase使用 插件验证
  3. 插件接收令牌 令牌（访问令牌，ID令牌）从提供商 signInWithIdToken()
  4. Supabase 验证 使用提供者验证令牌并创建用户会话
  5. Supabase 返回 为您的应用程序的已认证请求生成自己的 JWT 令牌

Google 插件配置

该插件需要您提供的 Web 客户端 ID 适用于所有平台，且可选的 iOS 客户端 ID 用于 iOS 特定功能： Google 的关键点：

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    // Use the same Web Client ID you configured in Supabase
    webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: iOS Client ID for iOS-specific features
    iOSClientId: 'YOUR_IOS_CLIENT_ID.apps.googleusercontent.com',
    
    // Optional: Request offline access for refresh tokens
    mode: 'offline'
  }
});

使用

  • Key points for Google: Web 客户端 ID (不是 Android/iOS 客户端 ID) 为 webClientId 字段
  • 仅需 Web 客户端 ID 即可在所有平台上使用该插件
  • 是可选项，仅用于 iOS 特有的 Google 功能 iOSClientId Apple 插件配置

Apple 配置在 iOS 和 Android 之间有所不同：

对于 iOS

(原生 Apple 登录): 对于 Android/Web

await SocialLogin.initialize({
  apple: {
    // No additional configuration needed for iOS
    // The plugin uses the native Apple Sign-In capability
  }
});

(需要 Service ID): Web Client ID

await SocialLogin.initialize({
  apple: {
    clientId: 'YOUR_SERVICE_ID', // The Service ID from Apple Developer Portal
    redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
  }
});

Apple 的关键点:

  • iOS 使用原生 Sign in with Apple (无需额外配置)
  • Android/Web 需要您在 Apple Developer Portal 中创建的 Service ID
  • 应与您在 Apple Developer Portal 和 Supabase 中配置的内容一致 redirectUrl Facebook 插件配置

Facebook 需要您的 App ID 和 Client Token:

Facebook 的关键点:

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_FACEBOOK_APP_ID',        // From Facebook Developer Dashboard
    clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN', // From Facebook Developer Dashboard
    
    // Optional: Use Facebook Limited Login (for enhanced privacy)
    limitedLogin: false // See our Facebook setup guide for important Limited Login details
  }
});

使用您在 Supabase 中配置的相同 App ID

  • Client Token 可在您的 Facebook App 的基本设置中找到
  • 启用 Facebook 的 privacy-focused Limited Login 功能 (仅限 iOS)
  • limitedLogin: true 重要
  • 注意:此页面适用于漏洞赏金计划。角色: UI 标签。位置: 页面 bug-bounty.astro。: 请参阅我们的 Facebook 设置指南 详细的有限登录信息，包括 ATT 考虑

完成插件初始化

以下是如何初始化所有提供者：

import { SocialLogin } from '@capgo/capacitor-social-login';

export async function initializeSocialLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      mode: 'offline'
    },
    facebook: {
      appId: 'YOUR_FACEBOOK_APP_ID',
      clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
    },
    apple: {
      // iOS: no config needed
      // Android/Web: uncomment the lines below
      // clientId: 'YOUR_SERVICE_ID',
      // redirectUrl: 'https://your-project-ref.supabase.co/auth/v1/callback'
    }
  });
}

重要注意事项：

  • 调用 initialize() 当您的应用程序启动时，而不是在每次登录之前 您只需要配置您计划使用的提供者
  • 以下凭据来自原始提供者
  • 一次 在您的应用程序启动时，而不是在每次登录之前, 不是从 Supabase
  • 确保提供者凭据与您在 Supabase 中配置的内容匹配

步骤 5: 配置 Supabase 客户端

安装 Supabase 客户端:

npm install @supabase/supabase-js

创建一个 Supabase 服务:

// services/supabase.ts
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://your-project-ref.supabase.co';
const supabaseKey = 'your-anon-public-key';

export const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: {
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

步骤 6: 实现身份验证流程

创建一个结合了两者的身份验证服务:

// services/auth.ts
import { SocialLogin } from '@capgo/capacitor-social-login';
import { supabase } from './supabase';

export class AuthService {
  
  async initializeSocialLogin() {
    await SocialLogin.initialize({
      google: {
        webClientId: 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
      },
      facebook: {
        appId: 'YOUR_FACEBOOK_APP_ID',
        clientToken: 'YOUR_FACEBOOK_CLIENT_TOKEN',
      },
      apple: {} // iOS configuration
    });
  }

  async signInWithGoogle() {
    try {
      const result = await SocialLogin.login({
        provider: 'google',
        options: {
          scopes: ['email', 'profile']
        }
      });

      const googleResult = result.result;
      if (!googleResult) {
        throw new Error('Google login failed');
      }

      // GoogleLoginResponse is a union type - check responseType to determine flow
      if (googleResult.responseType === 'online') {
        // Online mode: use idToken directly with Supabase
        const { data, error } = await supabase.auth.signInWithIdToken({
          provider: 'google',
          token: googleResult.idToken!,
        });
        if (error) throw error;
        return data;
      } else {
        // Offline mode: exchange serverAuthCode on your backend
        // Your backend should exchange the code for tokens and create a Supabase session
        const response = await fetch('/api/auth/google', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ serverAuthCode: googleResult.serverAuthCode })
        });
        return response.json();
      }
    } catch (error) {
      console.error('Google sign-in error:', error);
      throw error;
    }
  }

  async signInWithApple() {
    try {
      const result = await SocialLogin.login({
        provider: 'apple',
        options: {
          scopes: ['email', 'name']
        }
      });

      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'apple',
        token: result.result?.identityToken!,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Apple sign-in error:', error);
      throw error;
    }
  }

  async signInWithFacebook() {
    try {
      const result = await SocialLogin.login({
        provider: 'facebook',
        options: {
          permissions: ['email', 'public_profile']
        }
      });

      const fbResult = result.result;
      if (!fbResult?.accessToken?.token) {
        throw new Error('Facebook login failed - no access token received');
      }

      // Facebook uses accessToken for Supabase authentication
      const { data, error } = await supabase.auth.signInWithIdToken({
        provider: 'facebook',
        token: fbResult.accessToken.token,
      });

      if (error) throw error;
      return data;
    } catch (error) {
      console.error('Facebook sign-in error:', error);
      throw error;
    }
  }

  async signOut() {
    // Sign out from Supabase
    await supabase.auth.signOut();
    
    // Optionally sign out from social providers
    await SocialLogin.logout({
      provider: 'google' // or 'apple', 'facebook'
    });
  }

  getCurrentUser() {
    return supabase.auth.getUser();
  }

  onAuthStateChange(callback: (event: string, session: any) => void) {
    return supabase.auth.onAuthStateChange(callback);
  }
}

export const authService = new AuthService();

步骤 7: 在您的应用中实现

初始化服务并处理身份验证:

// main.ts or app component
import { authService } from './services/auth';

async function initializeApp() {
  await authService.initializeSocialLogin();
  
  // Listen to auth state changes
  authService.onAuthStateChange((event, session) => {
    if (event === 'SIGNED_IN') {
      console.log('User signed in:', session.user);
      // Redirect to authenticated area
    } else if (event === 'SIGNED_OUT') {
      console.log('User signed out');
      // Redirect to login
    }
  });
}

initializeApp();

在您的 UI 中创建登录按钮:

// Login component
async function handleGoogleLogin() {
  try {
    const user = await authService.signInWithGoogle();
    console.log('Signed in with Google:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleAppleLogin() {
  try {
    const user = await authService.signInWithApple();
    console.log('Signed in with Apple:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleFacebookLogin() {
  try {
    const user = await authService.signInWithFacebook();
    console.log('Signed in with Facebook:', user);
  } catch (error) {
    console.error('Login failed:', error);
  }
}

async function handleLogout() {
  try {
    await authService.signOut();
    console.log('Signed out successfully');
  } catch (error) {
    console.error('Logout failed:', error);
  }
}

步骤 8: 平台特定配置

iOS 配置

详细的iOS设置指南，请参见我们的平台特定指南：

快速概要 - 添加到 ios/App/App/Info.plist:

<!-- Google Sign-In URL scheme -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>YOUR_REVERSED_CLIENT_ID</string>
    </array>
  </dict>
</array>

<!-- Apple Sign-In capability -->
<key>com.apple.developer.applesignin</key>
<array>
  <string>Default</string>
</array>

请遵循链接指南，了解完整的iOS设置指南，包括Xcode项目配置。

Android配置

详细的Android设置指南，请参见我们的平台特定指南：

Android必备设置:

1. 获取SHA-1指纹 (Google必需)

# For debug builds (development)
cd android
./gradlew signingReport

# Look for the SHA1 fingerprint under "Variant: debug"
# Add this SHA1 to your Google Cloud Console Android OAuth client

2. 配置AndroidManifest.xml - 添加到 android/app/src/main/AndroidManifest.xml:

<!-- Internet permission -->
<uses-permission android:name="android.permission.INTERNET" />

<!-- Facebook configuration -->
<meta-data 
  android:name="com.facebook.sdk.ApplicationId" 
  android:value="@string/facebook_app_id"/>
<meta-data 
  android:name="com.facebook.sdk.ClientToken" 
  android:value="@string/facebook_client_token"/>

3. 添加 Facebook 资源 到 android/app/src/main/res/values/strings.xml:

<string name="facebook_app_id">YOUR_FACEBOOK_APP_ID</string>
<string name="facebook_client_token">YOUR_FACEBOOK_CLIENT_TOKEN</string>

context:产品页面/区域：实时更新产品页面。角色：短的 UI 标签或导航项。消息键 `live_update_dynamic_label_to` (实时更新动态标签到)。

按照链接的平台指南完成 Android 配置，包括 Google Play Services 设置和包名配置。

步骤 9：使用 Supabase 数据库与已验证用户

// Example: Fetch user profile
async function getUserProfile() {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .select('*')
      .eq('id', user.user.id)
      .single();
    
    return data;
  }
}

// Example: Update user profile
async function updateUserProfile(updates: any) {
  const { data: user } = await supabase.auth.getUser();
  
  if (user) {
    const { data, error } = await supabase
      .from('profiles')
      .update(updates)
      .eq('id', user.user.id);
    
    return data;
  }
}

一旦用户验证成功，您就可以使用 Supabase 的数据库，使用行级安全性 (RLS):

  1. 重要的安全考虑 in your client code
  2. 在客户端 __CAPGO_KEEP_0__ 使用环境变量
  3. 进行配置项的配置项 在 Supabase 中
  4. 验证令牌 如果需要在您的后端验证令牌
  5. 使用 Supabase 自动刷新令牌 解决常见问题

令牌匹配错误

确保您的社交登录插件和 Supabase 之间的 OAuth 提供商配置匹配

  • 检查重定向 URL 是否正确配置
  • 平台特定问题

iOS：验证您的包 ID 与 Apple Developer 配置匹配

  • Android：确保 SHA1 指纹正确添加到 Google Console
  • Troubleshooting Common Issues

认证流程中断

  • 网络问题时正确处理错误
  • 在认证期间添加加载状态

结论

您现在已经拥有一个结合了 Supabase 强大的后端和原生社交登录功能的完整认证系统。这个设置提供:

  • 安全的原生社交认证
  • 无缝的令牌管理
  • 实时数据库集成
  • 跨平台兼容性

Supabase 和 Capgo 社交登录插件的结合提供了一个强大的、可扩展的认证解决方案，适用于您的 Capacitor 应用。

像 多因素认证等高级功能 或 自定义声明查看 Supabase 文档 和 社会登录插件文档.

继续 Setup Supabase Authentication with Capacitor 社会登录插件

如果您正在使用 Setup Supabase Authentication with Capacitor 社会登录插件 来规划身份验证和帐户流程，连接它与 @capgo/capacitor-social-login 查看 @capgo/capacitor-social-login 的实现细节 @capgo/capacitor-passkey Capgo @capgo/capacitor-passkey @capgo/capacitor-native-biometric Capgo @capgo/capacitor-native-biometric 双因素验证 双因素验证的实现细节，以及 SSO (企业) SSO (企业)的实现细节。

实时更新 Capacitor 应用

当 web 层 bug 活跃时，通过 Capgo 直接发布修复，而不是等待几天的应用商店审批。用户在后台接收更新，而原生变化仍在正常审批路径中。

来自 Martin 的人性化支持

立即开始

最新博客文章

Capgo 为您提供创建真正专业的移动应用所需的最佳见解。

双向通信在 Capacitor 应用中
开发 移动 +1
2025 年 4 月 26 日

双向通信在 Capacitor 应用中

5种OTA更新的常见错误
开发 安全 +1
2025年4月13日

5种OTA更新的常见错误

开发
移动 2025年1月14日 +1
5种移动应用程序实时更新的安全最佳实践

5种移动应用程序实时更新的安全最佳实践

查看所有我们的博客文章