Capgo Social Login 集成 Facebook 登录完全指南

2025-06-26 03:26:52作者：吴年前Myrtle

前言

在现代移动应用中，社交登录已成为提升用户体验的重要功能。Capgo Social Login 作为一个强大的跨平台社交登录解决方案，为开发者提供了便捷的 Facebook 登录集成方式。本文将详细介绍如何在 Capgo Social Login 中配置 Facebook 登录功能，涵盖从基础设置到高级配置的全过程。

准备工作

在开始集成前，请确保已完成以下准备工作：

Facebook 开发者账号：需要拥有有效的 Facebook 开发者账号
应用包名/Bundle ID：准备好您的 Android 包名和 iOS Bundle ID
开发环境：确保已安装 Android Studio 或 Xcode 开发环境
终端访问权限：用于生成 Android 密钥哈希

Facebook 应用配置

创建 Facebook 应用

登录 Facebook 开发者平台
创建新应用，选择"消费者"应用类型
填写应用基本信息，包括显示名称和联系人邮箱

关键信息获取

在 Facebook 开发者平台中，您需要获取以下关键信息：

CLIENT_TOKEN：位于应用设置 > 高级 > 客户端令牌
APP_ID：位于应用仪表板的顶部
APP_NAME：位于应用设置 > 基本信息 > 显示名称

Android 平台配置

基础权限配置

首先确保您的 AndroidManifest.xml 文件中包含互联网权限：

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

密钥哈希生成

密钥哈希是 Facebook 用于验证应用身份的重要安全机制。生成步骤如下：

调试密钥哈希（开发阶段使用）：

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl base64 -A

密码输入：android

发布密钥哈希（生产环境使用）：

keytool -exportcert -alias your-key-name -keystore your-keystore-path | openssl base64 -A

清单文件配置

在 AndroidManifest.xml 中添加以下 Facebook 相关配置：

<application>
    <activity android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        android:label="@string/app_name" />
    
    <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="FB[APP_ID]" />
        </intent-filter>
    </activity>
</application>

注意：将 [APP_ID] 替换为您的 Facebook 应用 ID

iOS 平台配置

基本信息配置

在 Facebook 开发者平台添加 iOS 平台
填写 Bundle ID 和其他必要信息

Info.plist 配置

在项目的 Info.plist 文件中添加以下配置：

<key>FacebookAppID</key>
<string>[APP-ID]</string>
<key>FacebookClientToken</key>
<string>[CLIENT-TOKEN]</string>
<key>FacebookDisplayName</key>
<string>[APP-NAME]</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
</array>
<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fb[APP-ID]</string>
        </array>
    </dict>
</array>

AppDelegate 修改

在 AppDelegate.swift 中添加 Facebook SDK 初始化代码：

import FBSDKCoreKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        FBSDKCoreKit.ApplicationDelegate.shared.application(
            application,
            didFinishLaunchingWithOptions: launchOptions
        )
        return true
    }

    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
    }
}

代码实现

初始化 Facebook 登录

在应用启动时初始化 Facebook 登录：

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

await SocialLogin.initialize({
  facebook: {
    appId: 'YOUR_APP_ID',
    clientToken: 'YOUR_CLIENT_TOKEN',
  }
});

实现登录功能

async function loginWithFacebook() {
  try {
    const result = await SocialLogin.login({
      provider: 'facebook',
      options: {
        permissions: ['email', 'public_profile'],
        limitedLogin: false // 是否使用受限登录模式
      }
    });
    // 处理登录成功逻辑
  } catch (error) {
    // 处理登录错误
  }
}