uniapp 如何配置 facebook 登录功能

在uniapp中如何配置Facebook登录功能？需要引入哪些SDK或插件？具体的配置步骤和注意事项有哪些？能否提供一个完整的示例代码？

2 回复

在 manifest.json 的 App SDK 配置中启用 Facebook 登录，填写应用 ID。安装 uni-facebook 插件，在代码中调用 uni.login 并指定 provider 为 facebook。需在 Facebook 开发者后台配置应用信息和 OAuth 重定向 URL。


在 UniApp 中配置 Facebook 登录功能，需要结合第三方 SDK 和原生插件实现。以下是详细步骤：

1. 准备工作

  • 注册 Facebook 开发者账号，创建应用并获取 App ID。
  • 在 Facebook 应用配置中设置 Android 包名 和 iOS Bundle ID，并启用 Facebook 登录。

2. 安装插件

UniApp 官方推荐使用 uni-login 或第三方插件（如 uniapp-facebook-login）：

# 通过 HBuilderX 插件市场安装
# 搜索 "Facebook 登录" 并导入项目

3. 配置原生平台

Android

  • 在 manifest.json 的 App SDK 配置 中添加：
"android": {
  "permissions": ["<uses-permission android:name=\"android.permission.INTERNET\"/>"],
  "facebook": {
    "appId": "YOUR_FACEBOOK_APP_ID"
  }
}
  • 在 mainifest.json 的 源码视图 中补充：
<meta-data 
  android:name="com.facebook.sdk.ApplicationId"
  android:value="@string/facebook_app_id" />

iOS

  • 在 manifest.json 中配置：
"ios": {
  "urltypes": [
    {
      "identifier": "facebook",
      "urlSchemes": ["fbYOUR_FACEBOOK_APP_ID"]
    }
  ]
}
  • 在 info.plist 中添加：
<key>FacebookAppID</key>
<string>YOUR_FACEBOOK_APP_ID</string>
<key>FacebookDisplayName</key>
<string>YOUR_APP_NAME</string>

4. 代码实现

// 引入插件（根据实际插件调整方法名）
const facebookLogin = uni.requireNativePlugin('uni-facebook-login');

// 触发登录
function loginWithFacebook() {
  facebookLogin.login((res) => {
    if (res.code === 200) {
      console.log('登录成功:', res.authResult);
      // 获取用户信息
      facebookLogin.getUserInfo((userInfo) => {
        console.log('用户信息:', userInfo);
      });
    } else {
      console.log('登录失败:', res.errMsg);
    }
  });
}

5. 注意事项

  • 测试环境：需在 Facebook 开发者后台添加测试用户。
  • 审核要求：正式发布前需提交 Facebook 审核。
  • 域名验证：确保 OAuth 重定向域名正确配置。

通过以上步骤即可集成 Facebook 登录。如果遇到问题，可检查控制台日志或参考插件文档。

回到顶部