跳过主要内容
Capgo logo
简体中文

Setup Supabase Authentication with Capacitor 社交登录插件

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

马丁·多纳迪厄

马丁·多纳迪厄

内容营销
Setup Supabase Authentication with Capacitor 社交登录插件

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

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

Supabase 提供了一个强大的后端即服务（BaaS）以及内置身份验证，而__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login 插件则提供了原生社交身份验证，适用于 iOS、Android 和 web 平台。他们共同提供： @capgo/capacitor-social-login 安全令牌管理

  • 跨平台兼容性
  • 实时数据库集成
  • 内置用户管理
  • 前置条件
  • Why Use Supabase with Social Login?

Supabase

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

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

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

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

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

步骤 2：设置 Supabase 项目

创建并配置您的 Supabase 项目

  1. 创建一个 Supabase 项目:

    • 前往 supabase.com 并注册/登录
    • 点击 “新建项目”
    • 选择您的组织
    • 输入一个 项目名称 (例如，“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 云端项目
  • 为 web、iOS 和 Android 配置 OAuth 2.0 凭据
  • 配置-consent 屏幕
  • 获取所需的客户端 ID 和密钥

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

  1. 在 Supabase 中启用 Google 提供者:
    • 在您的 Supabase 控制台中，前往 身份验证 > 提供者
    • 找到 Google 并切换它 ON
    • 填写配置:
      • 客户端 ID: 从 Google 云控制台获取您的 Google OAuth Web 客户端 ID (从 Google 云控制台获取)
      • 客户端密钥: 从 Google 云控制台获取您的 Google OAuth Web 客户端密钥
      • 重定向 URL: https://your-project-ref.supabase.co/auth/v1/callback (自动填充)
    • 点击 “Save”

重要: 在 Supabase 中使用 Web Client ID and 在 Supabase 中设置 Apple 认证 获取 Apple 凭证：

按照我们的详细 Apple 配置指南进行操作：

Apple 认证设置

Apple Authentication Setup Apple Authentication Setup

本指南涵盖:

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

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

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

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

在Supabase中设置Facebook认证

获取Facebook凭证：

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

本指南涵盖：

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

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

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

重要: 确保在 Facebook 应用程序的设置中添加 Supabase 回调 URL (https://your-project-ref.supabase.co/auth/v1/callback) Facebook 登录设置中的有效 OAuth 重定向 URI Facebook 登录设置

重要的 Supabase 配置说明

行级安全性 (RLS):

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

查看已验证用户在

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

__CAPGO_KEEP_0__

  • 使用 Supabase 内置的身份验证测试工具进行测试
  • 前往 身份验证 > 用户 并点击 “Invite user” 测试邮件流
  • 检查 日志 部分是否有身份验证错误

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

现在已配置 Supabase，需要使用相应凭据设置 Social Login 插件。 重要: 插件需要从 原生提供商 (而不是 Supabase)获取 OAuth 凭据，而 Supabase 则处理服务器端身份验证。

认证流程工作原理

在配置之前，了解流程：

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

Google 插件配置

该插件需要您提供 所有平台的 Web Client ID 以及可选的 iOS Client 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 的关键点:

  • 使用 __CAPGO_KEEP_0__ （不使用 Android/iOS 客户端 ID） webClientId __CAPGO_KEEP_0__
  • 该插件将在所有平台上正常工作，只需使用 Web Client ID
  • __CAPGO_KEEP_1__ 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 (requires 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 配置指南 有关详细的有限登录信息，包括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>

请遵循相关平台指南，了解 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. 自动刷新令牌 与 Supabase

常见问题排查

令牌匹配错误

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

平台特定问题

  • iOS: 确保您的 bundle ID 与 Apple Developer 配置匹配
  • Android: 确保在 Google Console 中正确添加 SHA1 指纹

认证流程中断

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

结论

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

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

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

如需更多高级功能 多因素身份验证 或 自定义声明, 检查 Supabase 文档 和 社会登录插件文档.

实时更新 Capacitor 应用

当 web 层面的 bug 在实时更新时，通过 Capgo 发送修复而不是等待几天的 app store 审批。用户在后台接收更新，而原生变化仍然在正常的审批路径中。

立即开始

最新博客文章

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

2-Way Communication in Capacitor Apps
开发,移动,更新
2025年4月26日

2-Way Communication in Capacitor Apps

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

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

移动应用实时更新的5项安全最佳实践
开发,移动,更新
2025年1月14日

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

查看所有博客文章