一、准备工作
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>
<img
src="@/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>
<img
src="@/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;
//小窗口的登录信息，包含token
if(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、关于第一次拉起登录成功，前端再次拉起登录的的报错问题
再次拉起登录报错问题
一方面是因为权限问题，请求的权限没有申请开通，另一方面就是项目没有开启上线功能。
网友评论