一、准备工作

1、开通facebook账号，设置后台参数和测试都用得到

注册facebook账号：https://www.facebook.com/

2、进入开发者后台，如果没有项目的话先创建相关的项目

https://developers.facebook.com/apps/1259504534946221/add/
开通公司验证

拿到其中的应用编号和应用密钥

3、申请相关的权限，包括Email、公开资料信息等，否则可能会报错

二、登录实现方式

1、使用facebook的一键登录，文档

2、faccebook登录SDKhttps://developers.facebook.com/docs/javascript

贴相关实现代码(Vue中实现)

<template><div><imgsrc="@/static/images/home/facebook.svg"alt=""class="amall-imgChild"@click="login"/></div>
</template>mounted() {this.$$.getScript("https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v16.0&appId=6015526188528736&autoLogAppEvents=1", () => {console.log(window, this);console.log(FB);window.fbAsyncInit = () => {FB.init({appId: '具体的应用编号',status: true,oauth: true,cookie: true,xfbml: true,version: 'v16.0'});FB.getLoginStatus((response) => {console.log("status", response);}, {scope: 'public_profile,email,user_likes', return_scopes: true, auth_type: 'reauthenticate', auth_nonce: '{random-nonce}'});};});
},
methods: {login() {FB.getLoginStatus((statusResponse) => {if(statusResponse.status=="unknown"){FB.login((response) => {console.log("status", response);this.$nextTick(() => {this.onSignInSuccess(response);});}, {scope: 'public_profile,email,user_likes', return_scopes: true, auth_type: 'reauthenticate', auth_nonce: '{random-nonce}'});} else {this.$nextTick(() => {this.onSignInSuccess(statusResponse);});}}, {scope: 'public_profile,email,user_likes', return_scopes: true, auth_type: 'reauthenticate', auth_nonce: '{random-nonce}'});                        },async testAPI(callbackRes) {console.log('Welcome!  Fetching your information.... ', callbackRes);var token = callbackRes&&callbackRes.authResponse&&callbackRes.authResponse.accessToken || null;// var uid = callbackRes&&callbackRes.authResponse&&callbackRes.authResponse.userID || null;const params = {};if(token){params.access_token = token;}FB.api('/me?fields=email', 'get', params, (response) => {console.log('Successful login for: ' + response.name, response);if(!response.email){this.$prompt('', 'Email', {confirmButtonText: 'Confirm',cancelButtonText: 'Cancel',inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: 'Incorrect mailbox format',inputPlaceholder: 'Please enter your email to receive product information'}).then(({ value }) => {this.$message({type: 'success',message: '你的邮箱是: ' + value});this.$store.dispatch("user/loginFromOther", {email: value,firstName: response.first_name || response.name || "",lastName: response.last_name || "",});}).catch(() => {FB.logout();});} else {this.$store.dispatch("user/loginFromOther", {email: response.email,firstName: response.first_name || response.name || "",lastName: response.last_name || "",});}});FB.api('/me/permissions', 'get', params, function(response) {console.log(response, "uid-permissions");});},onSignInSuccess(response) {console.log(response)switch (response.status) {case "connected":console.log('返回第三方FB的信息：授权成功，登录成功！');this.testAPI(response);break;case "not_authorized":console.log('返回第三方FB的信息：授权成功但是未关联该应用(用户第一次授权)');this.testAPI(response);break;case "unknown":console.log('返回第三方FB的信息：取消授权');this.$message.closeAll();this.$message.warning("Authorization exception, please try to log in using other methods");break;default: break;}},onSignInError(error) {console.log('返回第三方FB的error信息', error);},
},

3、使用后端返回的登录验证地址进行跳转

image.png

贴实现代码(vue实现)

//facebook.vue页面
<template><div><imgsrc="@/static/images/home/facebook.svg"alt=""class="amall-imgChild"@click="login"/></div>
</template><script>
export default {name: 'fbSignin',methods: {login() {this.$store.dispatch("user/openIframe", 'facebook');},},
}
</script>//store登录方法
const actions = {openIframe({state, commit}, key) {//具体的登录接口，用于返回第三方登录的验证页面url，key传的是facebook，根据自己的http请求进行配置$api(`oauth.${key}`).then((res) => {this.$bus.iframe && this.$bus.iframe.close();commit("SET_IFRAME", res);});},
}const mutations = {SET_IFRAME(state, iframeUrl){let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=800,height=500,left=10%,top=20%`;//打开小窗口this.$bus.iframe = open(iframeUrl, '_blank', params);window.addEventListener("message", (event) => {const res = event.data;//小窗口的登录信息，包含tokenif(res.code == '000000'){//拿到相应的登录token去登录，如果失败给出提示this.dispatch("user/getUserInfo", res.token).then(() => {this.$router.replace("/");});} else {//小提示：facebook注册可以使用手机号注册，因此不一定存在邮箱，需要邮箱必填的需要再次做个判断this.$message.closeAll();this.$message.error(res.message || "login fail~");}});}
};

三、踩坑报错记录

1、关于第一次拉起登录成功，前端再次拉起登录的的报错问题

再次拉起登录报错问题

一方面是因为权限问题，请求的权限没有申请开通，另一方面就是项目没有开启上线功能。