跳转到内容

从 @capacitor-community/facebook-login 迁移到 @capgo/capacitor-social-login 的指南

本指南提供从 @capacitor-community/facebook-login 迁移到 @capgo/capacitor-social-login 的全面说明。新插件通过支持多个社交提供商、改进的 TypeScript 支持和增强功能的统一 API 来现代化 Facebook 身份验证。

  1. 删除旧包:

    Terminal window
    npm uninstall @capacitor-community/facebook-login
  2. 安装新包:

    Terminal window
    npm install @capgo/capacitor-social-login
    npx cap sync
import { FacebookLogin } from '@capacitor-community/facebook-login';
import { SocialLogin } from '@capgo/capacitor-social-login';

关键更改:新包需要在代码中进行显式设置:

// 旧包不需要在代码中进行显式初始化
// 配置仅在原生平台上完成
// 新包需要显式初始化
await SocialLogin.initialize({
facebook: {
appId: 'YOUR_FACEBOOK_APP_ID', // Web 和 Android 必需
clientToken: 'YOUR_CLIENT_TOKEN' // Android 必需
}
});

登录方法现在接受提供商参数:

const FACEBOOK_PERMISSIONS = ['email', 'public_profile'];
const result = await FacebookLogin.login({ permissions: FACEBOOK_PERMISSIONS });
const result = await SocialLogin.login({
provider: 'facebook',
options: {
permissions: ['email', 'public_profile'],
limitedLogin: false,
nonce: 'optional_nonce'
}
});

响应结构已通过更全面的配置文件对象进行了现代化:

// 旧响应类型
interface FacebookLoginResponse {
accessToken: {
applicationId: string;
userId: string;
token: string;
expires: string;
};
recentlyGrantedPermissions: string[];
recentlyDeniedPermissions: string[];
}
// 新响应类型
interface FacebookLoginResponse {
provider: 'facebook';
result: {
accessToken: {
token: string;
applicationId?: string;
expires?: string;
userId?: string;
permissions?: string[];
declinedPermissions?: string[];
} | null;
idToken: string | null;
profile: {
userID: string;
email: string | null;
friendIDs: string[];
birthday: string | null;
ageRange: { min?: number; max?: number } | null;
gender: string | null;
location: { id: string; name: string } | null;
hometown: { id: string; name: string } | null;
profileURL: string | null;
name: string | null;
imageURL: string | null;
};
};
}

关键差异

  • 响应现在包含一个 provider 字段,用于标识身份验证提供商
  • 包含额外用户信息的更详细的 profile 对象
  • 所有社交登录提供商的一致结构
const result = await FacebookLogin.getCurrentAccessToken();
const isLoggedIn = result && result.accessToken;
const status = await SocialLogin.isLoggedIn({
provider: 'facebook'
});
const isLoggedIn = status.isLoggedIn;
await FacebookLogin.logout();
await SocialLogin.logout({
provider: 'facebook'
});

配置现在通过 initialize 方法处理:

// AndroidManifest.xml 更改保持不变
// strings.xml 变得不相关
// 另外在代码中初始化:
await SocialLogin.initialize({
facebook: {
appId: 'your-app-id',
clientToken: 'your-client-token' // 新要求
}
});

重要提示:Android 身份验证现在需要 Client token。

  1. AppDelegate.swift 中的 iOS 设置保持不变:
import FBSDKCoreKit
// 在 application:didFinishLaunchingWithOptions: 中
FBSDKCoreKit.ApplicationDelegate.shared.application(
application,
didFinishLaunchingWithOptions: launchOptions
)
// 在 application:openURL:options: 中
ApplicationDelegate.shared.application(
app,
open: url,
sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
annotation: options[UIApplication.OpenURLOptionsKey.annotation]
)
  1. Info.plist 配置保持不变:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb[APP_ID]</string>
</array>
</dict>
</array>
<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>fbauth</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>

迁移时的重大更改摘要:

  1. 现在需要显式初始化 - 在使用前必须调用 initialize()
  2. 响应对象结构发生了重大变化 - 具有增强配置文件数据的新嵌套结果格式
  3. Android 现在需要 client token - 需要额外配置
  4. 不同的方法名称和参数结构 - 基于提供商的方法
  5. 错误处理和错误类型已更改 - 更详细的错误信息

新插件提供:

  • 多个社交提供商(Google、Apple、Facebook)的统一 API
  • 具有更好类型定义的改进 TypeScript 支持
  • 包含更多用户信息的增强配置文件数据
  • 积极维护和社区支持
  • 所有提供商的一致错误处理
  • 具有正确过期处理的更好的令牌管理

有关更详细的设置说明,请参阅官方文档