跳过主要内容
Capgo logo
教程

使用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_KEEP_0__ Social Login插件 Capgo 让它变得简单。 本教程将指导您在Capacitor应用中集成社交身份验证（Google、Apple、Facebook）和 Supabase。

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

Supabase 提供强大的后端服务，内置身份验证，同时 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login 插件提供了原生社交身份验证，适用于 iOS、Android 和 web 平台。为了更紧密的 Supabase 集成， @capgo/capacitor-supabase 添加了原生身份验证助手和 JWT 访问。他们一起提供： 社交身份验证的无缝体验 @capgo/capacitor-supabase 跨平台兼容性

  • 实时数据库集成
  • Why Use Supabase with Social Login?
  • Supabase
  • provides a robust backend-as-a-service with built-in authentication, while the
  • 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. 获取您的项目凭据:

    • 创建后，转到 设置 > 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. 如果需要： 配置电子邮件设置

    • (可选但建议：） SMTP 设置配置您的电子邮件提供商
    • 这使得电子邮件确认和密码重置
    • 对于开发，您可以使用内置的电子邮件服务

启用社交身份验证提供商

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

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

步骤 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: 你的 Google OAuth Web Client Secret
      • Redirect URL: https://your-project-ref.supabase.co/auth/v1/callback (自动填充)
    • 点击 “Save”

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

在 Supabase 中设置 Apple 认证

获取 Apple 凭证：

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

本指南涵盖：

  • 设置 Apple 开发者帐户
  • 创建 App ID 和 Service ID
  • 配置 Sign in with 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 认证设置最为复杂，因为 Apple 对 Service IDs、私钥和 JWT 生成有特定的要求。请仔细阅读我们的每个平台的文档。

在 Supabase 中设置 Facebook 认证

获取 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 (自动填充)
    • 点击 “保存”

重要提示: 确保在 Facebook 应用程序的 https://your-project-ref.supabase.co/auth/v1/callbackValid OAuth Redirect URIs 中添加 Supabase 回调 URL ( )。

重要的 Supabase 配置说明

行级安全性 (RLS):

  • 在设置身份验证后，启用 RLS 在您的表中
  • 前往 数据库 > 表格 并切换 启用 RLS 每个表格
  • 根据已验证用户创建数据访问策略

用户管理:

  • 查看已验证用户在 认证 > 用户
  • 在 认证 > 日志
  • 监控认证事件 在

认证 > 邮件模板

  • 设置邮件模板
  • 测试配置: 使用 Supabase 的内置认证测试工具进行测试 并点击 “邀请用户” 测试电子邮件流程
  • 检查 日志 区域：Capgo Builder / 原生云构建产品页面。角色：短 UI 标签或导航项。见于：页面 native-build.astro。消息键 `native_build_v2_trust_logs_lbl` (Native Build V2 Trust Logs Lbl)。

任何身份验证错误的部分

步骤 4：配置社交登录插件 现在，需要配置 Supabase 后，需要设置 Social Login 插件的对应凭证。重要 区域：漏洞赏金计划页面。角色：UI 标签。见于：页面 bug-bounty.astro。消息键 `bug_bounty_important_label` (Bug Bounty Important Label)。 : 社交登录插件需要从原有的提供者获取 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'
    }
  });
}

重要说明：

  • Call initialize() 当应用程序启动时，而不是在每次登录前 您只需要配置您打算使用的提供者
  • 这些凭据来自
  • 原始提供者 而不是来自 Supabase确保提供者凭据与您在 Supabase 中配置的匹配
  • 步骤 5：设置 Supabase 客户端

安装 Supabase 客户端：

__CAPGO_KEEP_0__

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. Step 9: Using Supabase Database with Authenticated Users 自动与 Supabase 配合使用

常见问题排查

令牌匹配错误

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

平台特定问题

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

身份验证流程中断

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

结论

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

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

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

如果您需要更高级的功能，如 多因素身份验证 或 自定义声明请查看 Supabase 文档 and the Social Login插件文档.

继续Setup Supabase认证与Capacitor Social Login插件

如果您正在使用 Setup Supabase认证与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 双因素认证 双因素认证的实现细节 SSO (企业) SSO (企业)的实现细节

实时更新 Capacitor 应用

当 web层 bug 活跃时，通过 Capgo 直接将修复推送给用户，而不是等待几天的 app store 审核。用户在后台接收更新，而原生变化仍在正常审查路径中。

来自 Martin 的人工支持

立即开始

最新博客文章

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

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

2-Capacitor 通信

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

避免的5种OTA更新常见错误

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

5 移动应用安全最佳实践

查看所有博客文章