uni-app 实现 facebook 第三方登录功能

在 uni-app 中实现 Facebook 第三方登录功能，通常涉及以下几个步骤：配置 Facebook 开发者应用、获取用户授权、通过授权码换取访问令牌、使用访问令牌获取用户信息。以下是一个简化的实现流程和代码示例：

1. 配置 Facebook 开发者应用

首先，你需要在 Facebook for Developers 网站上创建一个应用，并获取 App ID 和 App Secret。然后，在应用的设置中配置重定向 URI（例如 https://yourapp.com/facebook-callback）。

2. 获取用户授权

使用 Facebook 的授权 URL 引导用户进行授权。这里假设你已经在 manifest.json 中配置了相关权限和 URL Scheme。

// 跳转到 Facebook 授权页面
const appId = 'YOUR_FACEBOOK_APP_ID';
const redirectUri = 'https://yourapp.com/facebook-callback';
const authUrl = `https://www.facebook.com/v9.0/dialog/oauth?client_id=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=email,public_profile`;

uni.setRedirectInfo({
  url: authUrl
}, () => {
  // 用户点击确认后，Facebook 会重定向到你的 redirectUri
});

3. 处理回调并获取访问令牌

在 facebook-callback 页面处理回调，提取授权码，并通过服务器后端向 Facebook 换取访问令牌。

// 假设回调页面路径为 /pages/facebook-callback/facebook-callback
Page({
  onLoad(options) {
    const code = options.code; // 从 URL 参数中获取授权码
    
    // 这里需要后端接口来处理令牌交换，因为涉及 App Secret，不应直接在前端处理
    uni.request({
      url: 'https://yourserver.com/facebook-token', // 后端接口地址
      method: 'POST',
      data: { code },
      success: (res) => {
        const accessToken = res.data.accessToken; // 从后端响应中获取访问令牌
        // 使用访问令牌获取用户信息
        this.getUserInfo(accessToken);
      }
    });
  },

  getUserInfo(accessToken) {
    uni.request({
      url: `https://graph.facebook.com/v9.0/me?access_token=${accessToken}&fields=id,name,email`,
      method: 'GET',
      success: (res) => {
        const userInfo = res.data;
        // 处理用户信息，如保存到本地或发送到服务器
        console.log(userInfo);
      }
    });
  }
});

4. 后端接口示例（Node.js）

后端接口用于安全地交换授权码为访问令牌。

const axios = require('axios');
const appId = 'YOUR_FACEBOOK_APP_ID';
const appSecret = 'YOUR_FACEBOOK_APP_SECRET';

app.post('/facebook-token', (req, res) => {
  const { code } = req.body;
  const url = `https://graph.facebook.com/v9.0/oauth/access_token?client_id=${appId}&redirect_uri=https://yourapp.com/facebook-callback&client_secret=${appSecret}&code=${code}`;
  axios.get(url)
    .then(response => res.json(response.data))
    .catch(error => res.status(500).json(error));
});

以上代码示例展示了如何在 uni-app 中实现 Facebook 第三方登录的基本流程。实际应用中，请根据具体需求调整和完善代码。