前端接入facebook jsSDK，实现登录授权功能

开发步骤

1. 需要在facebook官网（https://developers.facebook.com/）注册开发者账号；
2. 创建应用；
3. 配置相关参数，拿到应用编号appid和AppSecret。

前端授权

1. 配置地址

- 配置js SDK允许使用的网域（这个必须的！）
- 配置回调地址（非必须。如果项目中使用了客户端授权登录，或者纯服务端登录，通过回调拿到参数，则需要配置）
配置回调地址。这里以网页版的授权为例，如果开发网页版的Facebook授权登录，需要在Facebook后台配置有效OAuth跳转URL，就是用户在Facebook登录页面登录成功之后需要回调到部署你自己的登录页面的服务器地址。

2. 引入授权登录SDK

Facebook官方提供了详细的说明，也有现成的sdk和完整的demo。官方文档： https://developers.facebook.com/docs/facebook-login/web

方法一： 通过在index.html内加入script

<!--appId 写上开发者-->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v12.0&appId=你的appid&autoLogAppEvents=1">
</script>

方法二：写一个fb.ts，引入登录sdk，以及配置信息，供业务中使用

// fb.ts
//  引入登录SDK
export const fbJsdk = () => {
  (function (d: any, s: any, id: any) {
    var js; var fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.id = id;
    (js as any).src = 'https://connect.facebook.net/zh_CN/sdk.js';
    (fjs as any).parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  // 初始化
  (window as any).fbAsyncInit = function () {
    // @ts-ignore：
    // eslint-disable-next-line no-undef
    FB.init({
      appId: '这是应用编号appid', // 应用编号
      autoLogAppEvents: true,
      xfbml: true,
      version: 'v12.0'
    });
  }
}

TIP:

一般情况下可以直接将fb.ts直接在vue的main.ts中使用。

只要在项目中执行了这段代码之后, 就会有一个全局对象FB。使用这个FB对象就可以调用sdk中的api实现登录操作。

但是可能会导致url携带重要参数时，暴露给bacebook。因为加载facebook sdk时,会通过get请求给facebook发送一些验证信息，其中就会传过去当前的页面的url。

3. Vue页面中调用fb登录

const login = () => {
  // 检查用户登录状态
  FB.getLoginStatus(function (response) {
    if (response.status !== 'connected') {
      // 未登录，fb会让用户登录
      FB.login((res) => {
        // 不管用户有没有登录都会有res
        console.log('FB.login', res)
        facebookPost(res.authResponse)
      })
    } else { 
      // 已登录过，fb直接返回response
      console.log('FB.getLoginStatus已登录', response)
      facebookPost(response.authResponse)
    }
  })
}
// 将FB数据传给后台，进行用户登录操作
const facebookPost = (authResponse: any) => {
    ...http请求...
}

这个网页不能直接用浏览器打开，需要部署在支持https的服务器上。

 登录过程的截图：

  登录成功之后可以看到控制台打印出了登录成功后Facebook返回的信息，有accessToken、userID等：

{
    status: 'connected',
    authResponse: {
        accessToken: '{access-token}',
        expiresIn:'{unix-timestamp}',
        reauthorize_required_in:'{seconds-until-token-expires}',
        signedRequest:'{signed-parameter}',
        userID:'{user-id}'
    }
}

4. Vue页面中调用fb登出

const signOut = () => {
  console.log('登出')
  FB.logout(function (response: any) {
    console.log('FB.logout登出', response)
  })
}

后端校验

 前端拿到登录token后，需要后端校验一下，防止别人拿其他平台的appId授权的token来请求。  所以上面从facebook拿到的response里，前端必须得给后端accessToken、userID。accessToken用来校验授权，userID用来标识用户。

TIP：配置测试用户

在应用没正式上架前，可以使用测试用户账号来测试应用。上架后，也可以使用测试用户账号。