Google

这里使用vue-google-signin-button-directive

安装插件：npm i vue-google-signin-button-directive –save
登录页面添加相关指令和回调

<button v-google-signin-button="clientId" class="login-third-btn google" type="button">Google</button>

<script>
import 'vue-google-signin-button-directive'

export default {
  data() {
    return {
      clientId: '*****' // 申请的GoogleKey
    }
  },
  methods: {
    OnGoogleAuthSuccess(idToken) {
      // 请求后端接口，对登录信息进行校验
      this.GoogleLoginWithIdToken(idToken)
    },
    OnGoogleAuthFail(error) {
      console.log(error)
    },
    async GoogleLoginWithIdToken(idToken) {
      let res = await GoogleLoginWithIdToken(idToken)
      if (res.code === 0) {
        console.log('Google login success')
      }
    }
  }
}
</script>

FaceBook

(function (d) {
  var js, id = "facebook-jssdk";
  if (d.getElementById(id)) {
    return;
  }
  js = d.createElement("script");
  js.id = id;
  js.async = true;
  js.src = "https://connect.facebook.net/en_US/sdk.js";
  d.getElementsByTagName("head")[0].appendChild(js);
})(window.document);

<button class="login-third-btn facebook" type="button" @click="handleFaceBookLogin">Facebook</button>

<script>
export default {
  methods: {
    handleFaceBookLogin() {
      let vue_this = this;
      FB.login(function(response) {
        // get facebook user info
        // FB.api("/me?fields=id,name,picture", function(response) {
        //   // console.log('Good to see you, ' + response.name + '.')
        //   // console.log('picture=' + response.picture.data.url)
        // })
        // 登录回调函数
        vue_this.statusChangeCallBack(response)
      }, { scope: "public_profile" })
    },
    async statusChangeCallBack(response) {
      if (response.status === "connected") {
        var params = {
          id_token: response.authResponse.accessToken
        }
        const res = await FaceBookCallBack(params)
        if (res.code === 0) {
          console.log('Facebook login success')
        }
      }
    },
  }
}
</script>