As a beginner to vue.js I'm struggling with this problem for days. I know that there are few plugins for that:

vue-google-auth

and

vue-google-signin-button

and

vue-authenticate

But none of these e with good documentations, so my attempts to make use of them failed. I also could not find any tutorial on vue.js with OAuth2 authentication after extensive googling. So appreciate if someone could e up with a full working example or refer me to some plete code.

As a beginner to vue.js I'm struggling with this problem for days. I know that there are few plugins for that:

vue-google-auth

and

vue-google-signin-button

and

vue-authenticate

But none of these e with good documentations, so my attempts to make use of them failed. I also could not find any tutorial on vue.js with OAuth2 authentication after extensive googling. So appreciate if someone could e up with a full working example or refer me to some plete code.

• javascript
• authentication
• vue.js
• google-oauth

Share Improve this question Follow edited Aug 31, 2017 at 16:53 Karlom asked Aug 31, 2017 at 16:45 KarlomKarlom 14.9k2929 gold badges7878 silver badges118118 bronze badges 1

• 1 Maybe it would help if you would be more specific on which area you are struggling with. Sample codes or whatever you have done would be helpful so that others could provide you with some good guidance. – Angelo Commented Aug 31, 2017 at 21:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Example of usage without any plugins:

index.html

<meta name="google-signin-client_id" content="your-client-id.apps.googleusercontent."
/>

<script src="https://apis.google./js/platform.js"></script>

App.vue

<template>
  <div v-show="!profile" id="g-signin2"></div>
  <div v-if="profile">
    <pre>{{ profile }}</pre>
    <button @click="signOut">Sign Out</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initGoogleAuth();
    this.renderGoogleAuthButton();
  },

  data() {
    return {
      profile: null
    };
  },

  methods: {
    onSignIn(user) {
      const profile = user.getBasicProfile();
      const fullName = profile.getName();
      const email = profile.getEmail();
      const imageUrl = profile.getImageUrl();
      this.profile = { fullName, email, imageUrl };
    },

    signOut() {
      var auth2 = window.gapi.auth2.getAuthInstance();
      auth2.signOut().then(() => {
        console.log("User signed out");
        this.profile = null;
      });
    },

    initGoogleAuth() {
      window.gapi.load("auth2", function () {
        window.gapi.auth2.init();
      });
    },

    renderGoogleAuthButton() {
      window.gapi.signin2.render("g-signin2", {
        onsuccess: this.onSignIn
      });
    }
  }
};
</script>

This is a working example with vue-google-oauth2. You can install it with:

npm i vue-google-oauth2

Then you need to place these 2 lines of code in your APP ENTRY file, e.g. src/main.js

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

Where XXXXXXXX is the clientId you get from https://console.cloud.google./apis/ I will assume you have been there if you've tried to login with Google before.

Then you create this ponent

<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./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>

All credits goes to

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