Facebook 注册/登录

用户可以通过 Facebook 账号登录/注册系统

接口使用说明

在调用接口之前，请确保您已经认真阅读了相关的接口文档。以下是针对不同登录方式的具体说明：

一、设置 Facebook 登录配置信息

更详细步骤可参考 Facebook 开发文档

Facebook 开发文档：https://developers.facebook.com/docs/facebook-login/web?locale=zh_CN

在使用Facebook JavaScript SDK之前，您需要先注册Facebook开发者账号并创建一个应用。具体步骤如下：

1. 访问Facebook开发者平台：

   • 使用您的Facebook账号登录 Facebook开发者平台。

2. 创建新应用：

   • 进入“我的应用”页面，点击“创建应用”按钮，输入应用名称和联系邮箱，并选择应用类别。

3. 获取应用ID和应用密钥：

   • 创建成功后，进入“设置”页面，获取客户端ID（Client ID）和客户端密钥（Client Secret）。

4. 配置JavaScript SDK允许使用的域名：

   • 将当前页面域名添加到“JavaScript SDK 允许使用的网域”中（不能配置本地域名）。

5. 启用“Login with JavaScript SDK”：

   • 打开“Login with JavaScript SDK”的配置开关。

6. 在白标管理后台配置客户端ID和客户端密钥。

二、获取三方登录配置信息

调用获取三方配置接口拿到第一步注册的 Facebook 的 ClientId

请求参数

{
    // 第三方源：支持的第三方登录来源
    // 可选值包括：google, facebook, twitter, telegram, apple, metamask, 多个可用逗号隔开
    "thirdSource": "google,facebook"  // 示例：使用 Google Faceb 登录
}

返回结构

{
    // 第三方源：支持的第三方登录来源，例如 "google", "facebook", "twitter", "telegram", "apple", "metamask"
    "thirdSource": "facebook",  // 示例：使用 Facebook 登录

    // 客户端 ID：第三方应用的唯一标识符
    "clientId": "abcesddff",    // 示例：您的应用在 Facebook 上的客户端 ID

    // 开发者账号：与第三方源关联的开发者邮箱
    "developerAccount": "[email protected]" // 示例：开发者的邮箱地址
}

三、登录代码实现

1.引入Facebook JavaScript SDK

在HTML页面中引入Facebook JavaScript SDK，可以通过以下方式：

<script>
    // 初始化 Facebook SDK
    window.fbAsyncInit = function () {
        FB.init({
            appId: clientId, 
            cookie: true,     // 启用 cookies 以便服务器能够访问会话
            xfbml: true,      // 解析网页上的社交插件
            version: 'v12.0'  // 使用的 Graph API 版本
        });
    };

    // 加载 Facebook SDK
    (function (d, s, id) {
        var js; 
        var fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement(s); 
        js.id = id;
        js.src = 'https://connect.facebook.net/en_US/sdk.js'; 
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

appId: 替换为三方登录配置接口返回的 clientId。

2. 发起登录授权功能，获取 accessToken

在引入 Facebook JavaScript SDK 后，实现用户登录并获取 accessToken 的步骤如下：

1. 调用 FB.login() 方法：在交互式场景中使用此方法，让用户使用 Facebook 账号登录并授权。

2. 处理用户登录状态：在回调函数中检查登录状态，若登录成功，则可获取 accessToken，并进行后续操作。

以下是完整的实现代码示例：

const login = () => {
    FB.login(function (response) {
        console.log(response); // 输出登录响应

        if (response.status === 'connected') {
            // 用户已成功登录到您的网页和 Facebook
            const accessToken = response.authResponse.accessToken; // 获取 accessToken
            
            // 登录完成后，调用处理逻辑
            facebookVerify({accessToken});
        } else {
            // 用户未登录到您的网页或无法确定登录状态
            console.log('用户未登录或未授权应用');
        }
    }, { scope: 'public_profile,email' }); // 请求的权限
};

3. Facebook 三方 accessToken 校验

调用Facebook三方登录校验接口

请求参数

{
    // 渠道来源：支持的渠道类型，例如 "h5"、"pc"
    "channelSource": "h5",  // 示例：表示来自 H5 端

    // 用户授权信息：以 JSON 字符串形式提供，例如包含 accessToken
    "accessToken": "accessToken"  // 示例：替换为实际的 accessToken
}

返回结构

{
    // 下一步操作行为：支持的操作类型，如 "login"、"bind"、"register"
    "action": "login",  // 示例：表示用户进行登录操作

    // 三方返回的用户邮箱
    "email": "[email protected]",  

    // 校验失败的原因（如果有）
    "failReason": "Invalid credentials", 

    // 三方返回的用户手机号
    "phone": "[phone]", 

    // 校验结果：表示校验是否成功，true 为成功，false 为失败
    "result": true,  // 示例：表示校验成功

    // 第三方登录源：支持的来源，例如 "google"、"facebook"、"twitter"
    "thirdSource": "facebook",  

    // 校验 token：用于身份验证的 token
    "token": "exampleToken123",

    // 第三方用户 ID：用户在第三方平台的唯一标识符
    "userId": "thirdPartyUserId",

    // 第三方授权凭证：用于访问第三方 API 的凭证
    "authToken": "authToken123" 
}

4. 完成登录/注册

根据上一步返回的信息，进行三方登录或注册接口的调用。

const facebookVerify = (data: UserService.LoginVerifyRes) => {
   // 获取操作类型、失败原因和第三方来源
    let { action, failReason, thirdSource } = data;

    // 根据操作类型进行不同的处理
    if (action === 'register') {
        // 注册操作
        register(data); 注册
    } else if (action === 'login') {
        // 登录操作
        login(data); 
    } else if (action === 'bind') {
        // 绑定操作
        login(data);
    } else {
        // 操作不符合预期，显示失败原因
        Toast.error(failReason);
    }
};

通过以上步骤，您可以成功集成 Facebook 登录功能，并获取用户授权的 AccessToken。如果在集成过程中遇到问题，请检查网络连接或 Facebook 应用的配置，确保所有步骤正确无误。如需更多信息，请参考 Facebook开发文档。