facebook第三方账号登录

一、准备工作

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、关于第一次拉起登录成功，前端再次拉起登录的的报错问题

再次拉起登录报错问题

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