Question

作为vue.js的初学者，我几天都在努力解决这个问题。我知道插件很少：

vue-google-auth

和

vue-google-signin-button

和

vue-authenticate

但这些都没有好的文件，所以我尝试使用它们失败了。在广泛的谷歌搜索后，我也找不到任何有关OAuth2身份验证的vue.js教程。如果有人能够提出一个完整的工作示例或者向我推荐一些完整的代码，那就表示赞赏。

Answer 1

这是一个使用 vue-google-oauth2 的工作示例。您可以通过以下方式安装：

npm i vue-google-oauth2

然后你需要将这两行代码放在你的APP ENTRY文件中，例如src/main.js

import GAuth from 'vue-google-oauth2'
Vue.use(GAuth, {clientId: 'XXXXXXXX'})

其中 XXXXXXXX 是您从 https://console.cloud.google.com/apis/ 获得的 clientId 如果您之前尝试过使用 Google 登录，我会假设您已经去过那里。

然后你创建这个组件

<template>
  <div>
    <h1>Test</h1>
    <button @click="handleClickGetAuth" :disabled="!isInit">get auth code</button>
    <button @click="handleClickSignIn" v-if="!isSignIn" :disabled="!isInit">signIn</button>
    <button @click="handleClickSignOut" v-if="isSignIn" :disabled="!isInit">signOout</button>
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      isInit: false,
      isSignIn: false
    }
  },

  methods: {
    async handleClickGetAuth() {
      try {
        const authCode = await this.$gAuth.getAuthCode()
        const response = await this.$http.post('http://your-backend-server.com/auth/google', { code: authCode, redirect_uri: 'postmessage' })
      } catch (error) {
        // On fail do something
      }
    },

    async handleClickSignIn(){
      try {
        const googleUser = await this.$gAuth.signIn()
        console.log('user', googleUser)
        this.isSignIn = this.$gAuth.isAuthorized
      } catch (error) {
        // On fail do something
        console.error(error);
        return null;
      }
    },

    async handleClickSignOut(){
      try {
        await this.$gAuth.signOut()
        this.isSignIn = this.$gAuth.isAuthorized
      } catch (error) {
        // On fail do something
      }
    }
  },
  mounted(){
    let that = this
    let checkGauthLoad = setInterval(function(){
      that.isInit = that.$gAuth.isInit
      that.isSignIn = that.$gAuth.isAuthorized
      if(that.isInit) clearInterval(checkGauthLoad)
    }, 1000);
  }
  
}
</script>

所有学分都归于

https://github.com/guruahn/vue-google-oauth2/blob/master/sample.html

如何在Vue.js中对google OAuth2进行身份验证？

1 个答案: