跳过主要内容
Capgo logo
教程

使用Capacitor Social Login 插件设置 Supabase 认证

了解如何在您的Capacitor应用中无缝地集成 Supabase 认证和Capgo Social Login 插件中的 Google、Apple 和 Facebook 认证

Martin Donadieu

Martin Donadieu

内容营销师
使用Capacitor Social Login 插件设置 Supabase 认证

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

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

Supabase 提供强大的后端服务，内置身份验证，同时 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login 插件提供了原生社交身份验证，适用于 iOS、Android 和 web 平台。为了更紧密的 Supabase 集成，@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-supabase 提供了原生身份验证助手和 JWT 访问。他们一起提供： @capgo/capacitor-social-login 安全令牌管理 @capgo/capacitor-supabase 实时数据库集成

  • Why Use Supabase with Social Login?
  • Supabase
  • provides a robust backend-as-a-service with built-in authentication, while the
  • Capacitor-social-login plugin offers native social authentication across iOS, Android, and web platforms. For tighter Supabase integration, Capacitor-supabase adds native auth helpers and JWT access. Together, they provide:
  • Built-in user management

前置条件

开始之前，请确保您有:

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

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

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

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

查看 社交登录 和 Supabase 平台特定设置的插件页面。

步骤 2：设置 Supabase 项目

创建和配置您的 Supabase 项目

  1. 创建 Supabase 项目:

    • 前往 supabase.com 并注册/登录
    • 点击 “New Project”
    • 选择您的组织
    • 输入一个 项目名称 (例如，“MyApp Auth”)
    • 设置一个 数据库密码 (安全保存)
    • 选择你的 地区 点击
    • “创建新项目” 获取你的项目凭证

  2. 创建后，前往:

    • 设置 > __CAPGO_KEEP_0__ 设置 > API
    • 复制您的 项目 URL (例如 https://your-project-ref.supabase.co)
    • 复制您的 匿名公共 API
    • 保存这些以便在您的应用中稍后使用

配置身份验证设置

  1. 设置一般身份验证设置:

    • 转到 身份验证 > 设置
    • 在 通用设置:
      • 设置 站点URL 到您的应用程序的URL（例如， https://yourdomain.com 或 http://localhost:3000 到您的应用程序的URL（例如，
      • 或 到您的应用程序的URL（例如， 或 
        http://localhost:3000
https://yourdomain.com
capacitor://localhost (for mobile apps)

  2. 到您的应用程序的URL（例如， 或

    • 添加额外的 SMTP 设置, 配置您的电子邮件提供商
    • 这使得电子邮件确认和密码重置成为可能
    • 对于开发，您可以使用内置的电子邮件服务

启用社交身份验证提供商

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

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

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

在 Supabase 中设置 Google 认证

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

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

本指南涵盖:

  • 创建 Google 云项目
  • 为 Web、iOS 和 Android 设置 OAuth 2.0 凭证
  • 配置-consent 屏幕
  • 获取所需的客户端 ID 和密钥

完成 Google 配置后，配置它在 Supabase 中：

  1. 在 Supabase 中启用 Google 提供者:
    • 在您的 Supabase 控制台中，转到 身份验证 > 提供者
    • 找到 Google 并切换到 ON
    • 填写配置：
      • 客户端 ID:您的 Google OAuth Web Client ID (来自 Google Cloud Console)
      • Client Secret: Your Google OAuth Web Client Secret
      • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (auto-filled)
    • Click “Save”

重要提示: 使用 Web Client ID : 使用 和 Web Client Secret 即使您正在构建移动应用程序，在 Supabase 中也可以使用。

在 Supabase 中设置 Apple 认证

获取 Apple 凭证：

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

本指南涵盖：

  • 设置 Apple 开发者帐户
  • 创建 App ID 和 Service ID
  • 配置 Apple 登录能力
  • 生成所需的私钥
  • iOS、Android和Web平台的设置

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

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

注意: Apple 认证设置是最复杂的，因为 Apple 需要 Service IDs、私钥和 JWT 生成。请仔细阅读每个平台的文档。

在 Supabase 中设置 Facebook 认证

获取 Facebook 凭证：

请参阅我们的完整 Facebook 设置指南： Facebook 认证设置

本指南涵盖:

  • 创建 Facebook 开发者帐户和应用
  • 添加 Facebook 登录产品
  • 配置 OAuth 重定向 URI
  • 获取您的 App ID、App Secret 和 Client Token
  • 完成 Facebook 设置后，配置它在 Supabase 中:

在 Supabase 中启用 Facebook 提供者

  1. 转到:
    • 身份验证 > 提供者 并切换 Authentication > Providers Facebook 开启
    • 填写配置:
      • Client ID: 你的 Facebook App ID
      • Client Secret: 你的 Facebook App Secret
      • 重定向 URL: https://your-project-ref.supabase.co/auth/v1/callback (自动填充)
    • 点击 “保存”

重要提示: 确保在 Facebook 应用程序的 https://your-project-ref.supabase.co/auth/v1/callback) 中添加 Supabase 回调 URL（ Facebook Login 设置中的 重要的 Supabase 配置注意事项

行级安全性 (RLS):

在设置身份验证后，启用表格的 RLS

  • 转到
  • 数据库 > 表格 并为每个表格切换 启用 RLS Enable RLS for each table
  • 根据已验证用户创建数据访问策略

用户管理：

  • 查看已验证用户在 身份验证 > 用户
  • 在 身份验证 > 日志
  • 在 身份验证 > 邮件模板

测试配置：

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

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

现在，需要配置 Supabase 后配置社交登录插件的对应凭证。 重要: 插件需要从原有的提供者处获取 OAuth 凭证（而不是从 Supabase），而 Supabase 则负责服务器端的身份验证。 “邀请用户” 测试电子邮件流程

认证流程是如何工作的

在配置之前，了解流程:

  1. 插件验证 与社交提供者 (Google/Apple/Facebook) 本地验证
  2. 插件接收令牌 (访问令牌，ID令牌) 从提供者
  3. 您的应用程序将这些令牌 发送到 Supabase 使用 signInWithIdToken()
  4. Supabase 验证 令牌与提供者并创建用户会话
  5. Supabase 返回 自己的 JWT 令牌为您的应用程序的已认证请求

Google 插件配置

该插件需要您的 Web 客户端 ID 所有平台和可选的 iOS 客户端 ID iOS 特定功能:

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'
  }
});

Google 的关键点:

  • 使用 Web 客户端 ID (而不是 Android/iOS 客户端 ID)填写 webClientId 字段
  • 仅需 Web 客户端 ID 即可在所有平台上使用该插件
  • The iOSClientId 是可选的，仅用于 iOS 特有的 Google 功能

Apple 插件配置

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

对于 iOS (原生 Apple 登录):

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

对于 Android/Web (需要 Service 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
  • The redirectUrl 应与您在 Apple Developer Portal 和 Supabase 中配置的内容一致

Facebook 插件配置

Facebook 需要您的 App ID 和 Client Token:

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
  }
});

Facebook 的关键点:

  • 使用您在 Supabase 中配置的相同 App ID
  • Client Token 可在您的 Facebook App 的基本设置中找到
  • limitedLogin: true 启用 Facebook 的 iOS-only privacy-focused Limited Login 功能
  • 重要: 查看我们的 Facebook 配置指南 有关详细的 Limited Login 信息，包括 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() context 启动应用程序时
  • 而不是在每次登录前
  • 您只需要配置您计划使用的提供者 这些凭据来自原始提供者
  • 而不是来自 Supabase

确保提供者凭据与您在 Supabase 中配置的凭据匹配

步骤 5：设置 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>

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

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

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

// 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;
  }
}

重要的安全考虑

  1. 绝不暴露敏感密钥 在客户端中 code
  2. 使用环境变量 进行配置
  3. 在 Supabase 中启用行级安全性 验证令牌
  4. 如果需要在后端验证令牌 处理令牌刷新
  5. 步骤 9: 使用 Supabase 数据库与已验证用户 自动与 Supabase 配合使用

常见问题排查

令牌匹配错误

  • 确保社交登录插件和 Supabase 的 OAuth 提供商配置一致
  • 检查重定向 URL 是否正确配置

平台特定问题

  • iOS：验证您的 bundle ID 与 Apple Developer 配置一致
  • Android：确保 SHA1 指纹正确添加到 Google Console

身份验证流程中断

  • 实现网络问题的适当错误处理
  • 在身份验证期间添加加载状态

结论

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

  • 安全的本机社交身份验证
  • 无缝的令牌管理
  • 实时数据库集成
  • 跨平台兼容性

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

对于像 多因素身份验证 或 您可以查看Supabase 文档 Supabase documentation 并且继续从Setup Supabase Authentication with __CAPGO_KEEP_0__ Social Login Plugin中 Social Login插件文档.

Setup Supabase Authentication with Capacitor Social Login Plugin

如果您正在使用 Setup Supabase Authentication with Capacitor Social Login Plugin 来规划身份验证和帐户流程，连接它到 @capgo/capacitor-social-login @capgo/capacitor-social-login中实现的详细信息 @capgo/capacitor-passkey @capgo/capacitor-passkey中实现的详细信息 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric中实现的详细信息 双因素认证 双因素认证的实现细节, 和 SSO (企业) SSO (企业)的实现细节,

Capacitor实时更新应用

当一个web层bug是活跃的，通过Capgo将修复推送到应用，而不是等待几天的应用商店审批。用户在后台接收更新，而原生变化保持在正常的审批路径中。

人性化支持从Martin

立即开始

最新博客

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

2-Capacitor 通信
开发 移动 +1
2025年4月26日

2-Capacitor 通信

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

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

5 移动应用安全最佳实践
开发 移动 +1
2025年1月14日

5 移动应用安全最佳实践

查看我们博客中的所有内容