Vue.js中Facebook第三方登录api实现

Vue.js中Facebook第三方登录api实现

1.进入开发者https://developers.facebook.com/apps/

设置基本信息

这里我们只需要里面那个appid 就可以了,也就是应用编号

facebook 的比较方便一点,不用设置回调地址,窗口登录成功就直接关掉了.返回结果.

2.代码

a.在index.html中加入这个 sdk, appid换成 你的应用编号:

  <!--appId 写上开发者-->
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=3356227040432352&autoLogAppEvents=1"></script>

b.在main.js中注册该组件,同时安装 npm install vue-facebook-signin-button

import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)

c…然后就是在组件中使用了,可以集合到登录组件里面去:

  <fb-signin-button
        :params="fbSignInParams"
        @success="onSignInSuccess"
        @error="onSignInError">
  Sign in with Facebook
</fb-signin-button>

其中 onSignInSuccess 回调 用来获取结果的:

    methods: {
      onSignInSuccess (response) {
        // FB.api('/me', dude => {
        //   console.log(`Good to see you, ${dude.name}.`)
        // })
        console.log(response) //返回第三方的登录信息 tolen等
      },
      onSignInError (error) {
      }
    }

完整的使用 部分:

<template>
  <fb-signin-button
          :params="fbSignInParams"
          @success="onSignInSuccess"
          @error="onSignInError">
    Sign in with Facebook
  </fb-signin-button>
</template>
 
<script>
 
  export default {
    name:'facebook',
    data () {
      return {
        fbSignInParams: {
          scope: 'email,user_likes',
          return_scopes: true
        }
      }
    },
    methods: {
      onSignInSuccess (response) {
        FB.api('/me', dude => {
        	console.log(`Good to see you, ${dude.name}.`)
        })
        console.log(response) //返回第三方的登录信息 tolen等
      },
      onSignInError (error) {
      }
    }
  }
</script>
 
<style>
  .fb-signin-button {
    /* This is where you control how the button looks. Be creative! */
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    background-color: #4267b2;
    color: #fff;
  }
</style>

退出登录

logou() {
  localStorage.removeItem("userid");
  localStorage.removeItem("token");
  localStorage.removeItem("avatar");
  FB.getLoginStatus(function (response) {
    console.log(response, "response");
    //判断登录状态
    if (response.status == "connected") {
      //facebook退出
      FB.logout(function (response) {});
    } else {
      //谷歌退出
      var auth2 = gapi.auth2.getAuthInstance();
      auth2.signOut().then(function () {});
    }
  });
  this.$message({
    showClose: true,
    message: "Logout success",
    type: "success",
  });
  this.$router.push({
    path: "/login",
    name: "Login",
  });
},

参考文档

https://blog.csdn.net/lllomh/article/details/97245322

https://lequ7.com/vuejs-zhong-facebook-di-san-fang-deng-lu-api-shi-xian-qin-ce-ke-yong.html
https://www.cnblogs.com/lngg057/p/5020192.html

facebook的sdk

https://developers.facebook.com/docs/javascript/frameworks