提示：移动端的APP可以直接使用 uniapp 的 uni.login ，按照官方文档来操作就好。下面文章是针对 uniapp 开发的 h5 端。
准备条件
可访问Facebook服务器
注册Facebook账号，登录Facebook(http://www.facebook.com/)
好的，啥也没有，这就乖乖去注册
开一下vpn，去上面那个网址，按照提示用邮箱开心注册了一个账号。BUT！
？？？三个大问号也表达不出此时的疑惑。怎么刚注册就停用我。不信邪换成手机号再注册了一个账号，结果还是停用了。这时，鼠标往下滑了一下看了这个按钮：
马上反对！ 结果让我上传一张本人的自拍，我上传了（其实没必要），上传成功后FB提示我他们需要一天的时间来审核，行，反正也不急。
第二天...
今天一上班马上去登录一下看看，
OK，百度一下
zhuanlan.zhihu.com/p/580311992 这篇文章说道，可能是IP引起的，想了一下估计不是，可能是涉及到什么诡异的FB安全规范，于是在手机浏览器上尝试了一下登录，咦，登上了。好吧，乖乖按照文章提示进行双重验证，之前是用手机号注册得嘛，现在把邮箱也绑定上了。
敲黑板了： 所以其实直接在手机上注册，登录成功后按照文章所说进行双重验证就可以了，在电脑上注册时只是选择手机号和邮箱其中一个注册的，还是得去做一下双重验证。
添加双重验证后，在电脑上使用邮箱进行登录，成功登录！接下来就是在开发者中心（developers.facebook.com/） 注册成为一个开发者。
继续->输入账户的邮箱后提示：
意思是：这封邮件已经在你的Facebook账户中确认了。您可以在Facebook设置页面更改您的主要电子邮件。
所以需要一个新的邮箱？到底需要多少个邮箱....行，再去注册一个看看
弄了一下新的邮箱，输入邮箱，会拿到一个验证码邮件，看来可行，继续选择成为一个开发者，完成注册。
接下来就是要创建一个应用了，这里这里
这里就选择消费者（之前顺手选择了商务，结果企业版的Facebook登录和普通的Facebook登录不一样！死活拿不到授权，这里我们自己搞，就选消费者）
输入自己的应用名称，邮箱已经自己填好了，业务账户先不填，创建应用
在打开的控制面板里点击设置->基本
鼠标往下滑，先点添加平台，根据自己的需求选择不同平台，因为安卓的话要先上架Google商城，ios要输入包名啥的，这里先选webSite（选的时候忘了截图，这是输入好了再回来截的），输入网站地址，保存更改
上面终于做完了准备工作，从零开始就是麻烦哈，接下来就是代码部分，先尝试一下在H5上的登录，上面添加的应用也是web，安卓和IOS后面再弄。
uniapp插件市场有相关的插件：ext.dcloud.net.cn/plugin?id=5…
或者复制下面的 afu-facebookWebLogin.js文件，用的时候直接调用就好啦
/**
* afu-facebookWebLogin
* @description afu-facebookWebLogin是一个Facebook网页授权登录JS SDK
*/
let isFacebookInit = false;
const afuFacebookWebLogin = {};
/* 初始化授权登录环境配置动态加载Facebook官方JavaScript SDK */
afuFacebookWebLogin.asyncLoadJs = function() {
const me = this;
// #ifdef H5
return new Promise((resolve, reject) => {
let isScript = false;
document.scripts.forEach(item => {
if (item['src'] && item['src'] ==
'https://connect.facebook.net/en_US/sdk.js') {
isScript = true;
}
})
if (isScript) {
resolve(true);
} else {
let script = document.createElement('script')
script.type = 'text/javascript';
script.src = 'https://connect.facebook.net/en_US/sdk.js';
document.body.appendChild(script);
script.onload = () => {
resolve(true);
}
script.onerror = () => {
resolve(false);
}
}
})
// #endif
}
/* 初始化Facebook授权登录相关配置信息 */
afuFacebookWebLogin.init = async function(appId, complete = () => {}) {
const me = this;
// #ifdef H5
let isAsyncLoadJs = await me.asyncLoadJs();
if (isAsyncLoadJs) {
if (window['FB']) {
window['FB'].init({
appId: appId,
// cookie: true,
xfbml: true,
version: 'v12.0'
});
window['FB'].AppEvents.logPageView();
isFacebookInit = true;
complete(true);
}
} else {
isFacebookInit = false;
complete(false);
}
// #endif
}
/* 检查用户登录状态 */
afuFacebookWebLogin.getLoginStatus = function(complete = () => {}) {
const me = this;
// #ifdef H5
if (isFacebookInit) {
window['FB'].getLoginStatus((response) => {
complete(response)
});
}
// #endif
}
/* 通过 Javascript SDK 登录对话框登录 */
afuFacebookWebLogin.login = function(complete = () => {}, Permissions = {}) {
const me = this;
// #ifdef H5
if (isFacebookInit) {
window['FB'].login((response) => {
complete(response)
}, Permissions);
}
// #endif
}
/* 通过 Javascript SDK 退出登录 */
afuFacebookWebLogin.logout = function(complete = () => {}) {
const me = this;
// #ifdef H5
if (isFacebookInit) {
me.getLoginStatus(response => {
if (response['status'] == 'connected') {
window['FB'].logout((res) => {
complete(res)
});
}
})
}
// #endif
}
/* 通过 图谱 API 彻底取消授权应用或撤销登录 */
afuFacebookWebLogin.revocationAuthorization = function(complete = () => {}) {
const me = this;
// #ifdef H5
if (isFacebookInit) {
me.getLoginStatus(response => {
if (response['status'] == 'connected') {
me.api("id", (res) => {
window['FB'].api(`/${res['id']}/permissions`, 'DELETE', (req) => {
complete(req)
});
})
}
})
}
// #endif
}
/* 通过 图谱 API 查询用户信息 */
afuFacebookWebLogin.api = function(fields = "id,name", complete = () => {}) {
const me = this;
// #ifdef H5
if (isFacebookInit) {
me.getLoginStatus(response => {
if (response['status'] == 'connected') {
window['FB'].api('/me', 'GET', {
"fields": fields
}, (res) => {
complete(res)
});
}
})
}
// #endif
}
export default afuFacebookWebLogin;
1、先在准备进行登录的页面导入一下这个js，我这里是放在uni_modules下的
import afuFacebookWebLogin from '@/uni_modules/afu-facebookWebLogin/js_sdk/afu-facebookWebLogin.js';
2、在onload生命周期函数里初始化Facebook授权登录相关配置信息。
afuFacebookWebLogin.init(appId,(status)=>{
if(status) {
this.facebookShow = true
}
})
这里的 appId 是刚刚在Facebook创建的应用编号，替换上去。可以打印一下status的值，status是个布尔值true/false来表示登录环境配置成功与否
3、检查一下用户登录状态
afuFacebookWebLogin.getLoginStatus((response)=>{
console.log(889, response)
})
这里的response有三种状态：
- response.status 为 connected 表示用户已登录 Facebook 和您的网页
- response.status 为 not_authorized 用户已登录 Facebook，但未登录您的网页
- response.status 为 unknown 表示用户未登录 Facebook，所以无法知道他们是否登录了您的网页。或者之前已调用 FB.logout()，因此无法连接至 Facebook
根据不同状态进行不同操作
4、登录
afuFacebookWebLogin.login((response)=>{},Permission)
这里的Permission为登录权限，具体可以看下官方文档Parameters。比如使用邮箱授权登录的话，Permission的值为{scope: 'email'}。登录成功后，如果 response.status 为 connected ，响应中会包含 authResponse 参数
5、通过 图谱 API 查询用户信息
afuFacebookWebLogin.api(fields,(response)=>{})
用户登录后可以通过这个api来查询所登录用户的信息，可以首先将fields传值为‘permissions’来获取所有用户登录时授权的权限，再根据返回的权限再调用一次这个api，fields改成刚刚获得权限信息就可以了
afuFacebookWebLogin.getLoginStatus((response)=>{
console.log(889, response)
//已登录
if (response['status'] == 'connected') {
//拿到用户登录时授权的权限
afuFacebookWebLogin.api('permissions', res => {
// console.log(JSON.parse(JSON.stringify(res.permissions.data)));
let fields = 'id,name,';
fields += res.permissions.data
.filter(item => {
return item['status'] == 'granted' && item['permission'] !=
'public_profile';
})
.map(item => {
return item['permission'];
})
.join(',');
console.log(891,fields)
afuFacebookWebLogin.api(fields, facebookInfo => {
console.log(JSON.parse(JSON.stringify(facebookInfo)));
// 拿到登录用户的信息
this.facebookInfo = facebookInfo;
});
});
}
//未登录
else {
//这里就是使用邮箱登录
afuFacebookWebLogin.login((response) => {
console.log(890, response)
}, {
scope: 'email',
return_scopes: true
})
}
})
6、 通过 图谱 API 彻底取消授权应用或撤销登录
afuFacebookWebLogin.revocationAuthorization((response)=>{})
