记录一下 vue web第三方登录facebook

工作中遇到了需要facebook第三方登录的功能小记 直接上代码
facebook第三方登录api地址

      <el-button type="danger" @click="logout()" >退出facebook</el-button>
      <el-button type="primary" @click="login()" >facebook授权</el-button>

  created() {
 // 添加sdk
    if (!window.FB) {
      window.fbAsyncInit = function () {
        FB.init({
          appId: '123456', // 填入自己 app 的 id
          cookie: true,
          xfbml: true,
          version: 'v17.0' // 目前版本
        })
      }
      ;(function (d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) {
          return
        }
        js = d.createElement(s)
        js.id = id
        js.src = 'https://connect.facebook.net/en_US/sdk.js'
        fjs.parentNode.insertBefore(js, fjs)
      })(document, 'script', 'facebook-jssdk')
    }

  },
   methods: {
    login() {
      // 检查登录状态
      FB.getLoginStatus(function (response) {
        console.log(response)
        // 登录状态 - 已登录
        if (response.status === 'connected') {

        } else {
          // 登录状态 - 未登录
          FB.login(
            function (res) {
              console.log(res)
              // 获取用户资料
            },

            // 授权的各种权限
            //[facebook权限参考文档](https://developers.facebook.com/docs/permissions/reference)
            { scope: 'public_profile,pages_show_list,pages_read_engagement,pages_manage_posts' }
          )
        }
      })

    },
},
    // 退出
    logout() {
     
      FB.getLoginStatus(function (response) {
         // 检查登录状态
        if (response.status === 'connected') {
          FB.api('/me/permissions', 'DELETE', function (res) {
            FB.logout()
            alert('退出成功！')
          })
        } else {
          alert('暂未登录无需退出！')
         
        }
      })
    },

只是前端代码 如果授权失败或者提示没有权限需要去facebook官方获取权限这里就不贴了