开发步骤

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-undefFB.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) => {// 不管用户有没有登录都会有resconsole.log('FB.login', res)facebookPost(res.authResponse)})} else { // 已登录过，fb直接返回responseconsole.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：配置测试用户

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

前端接入facebook jsSDK，实现登录授权功能相关推荐

java微信企业号接入_微信企业号登录授权Java实现根据userid换openid
前提是授权先获取到userid 代码在这里http://my.oschina.net/xshuai/blog/497300 根据userid换取openid 需要第三步里面的方法.自己拼接json格 ...
微信网页登录授权详解(前端)
前几天做了一个H5页面项目,它是依托于微信服务号的网页.需要包含微信登录.微信支付以及微信订单查询功能; 在这里说一下先说一下微信登录授权功能的实现 **微信登录授权** 微信登录授权呢,分为静默授权 ...
Android平台以WebView方式集成H5+SDK和支付宝登录授权插件开发思路总结
首先附上Demo地址,大家可以去GitHub上面下载https://github.com/GitLGH/AlipayDemo 一:思路总结蚂蚁金融开发平台上面对于支付宝登录授权部分使用的原生andr ...
H5 微信开发接入流程（网页登陆授权JS-SDK授权）
1.网页授权:(参阅:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842) 登陆公众号,开发 - 接口权限 - ...
微信公众平台开发：接入JS-SDK和实现分享功能
微信公众平台开发:接入JS-SDK和实现分享功能一.本文是实现微信公众号自定义的分享功能开发,也是亲自实践实现该功的一些总结体会. 首先贴上微信JS-SDK说明文档地址:http://mp.weix ...
（unity）新手接入Facebook登录，分享以及google登录，Android，IOS，OC接入篇
最近接Android,IOS的Facebook登录,分享以及Google登录,分享流程以及遇到的问题整理. 一. Android接入 google登录第一步,前往 [ firebase] http ...
接入FaceBook登录和遇到问题排查
一.接入Facebook登录接入流程: 接入流程:https://developers.facebook.com/docs/facebook-login/android 官方Demo:https:/ ...
Unity2019接入FaceBook登录详解(Android)
Unity接入FaceBook 如何获取FaceBook SDK Unity导入Facebook SDK Unity代码如何获取FaceBook SDK 注册前的准备工作由于国内网络无法直接打开F ...
IOS客户端接入Facebook，SSO授权
原贴地址:http://blog.csdn.net/wxq888/article/details/7905003 一首先说明下: 1:Facebook采用的时Oauth2.0授权 2: 说明下什么是 ...

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