import GoogleAuth from 'vue-google-auth'
Vue.use(GoogleAuth, { client_id: 'myjibberish-xfewerwe.apps.googleusercontent.com' })
Vue.googleAuth().load()
And when I made a component based on sample.html
<template>
<div class="container container-table">
<!-- Errors -->
<div v-if=response class="text-red"><p>{{response}}</p></div>
<!-- login Button -->
<a id="signin-button" v-on:click="signIn">
<i class="fa fa-google-plus-official fa-3x"></i>
Sign in with Google
</a>
</div>
</template>
<script>
import axios from 'axios';
import Vue from 'vue'
export default {
name: 'webLogin',
data: function () {
return {
section: 'Login',
loading: '',
response: ''
}
},
computed: {
BASE_URL () {
return this.$store.state.BASE_URL;
}
},
methods: {
signIn: function () {
Vue.googleAuth().signIn(this.onSignInSuccess, this.onSignInError)
},
onSignInSuccess: function (authorizationCode) {
console.log('sign in succesfull. code: ', authorizationCode)
this.toggleLoading()
this.resetResponse()
this.$http.post( 'http://127.0.0.1:8090/web/auth', { code: authorizationCode, redirect_uri: 'postmessage' }).then(function (response) {
if (response.body) {
var data = response.body
// Save to vuex
var token = data.token
this.$store.commit('SET_USER', data.user_data)
this.$store.commit('SET_TOKEN', token)
// Save to local storage as well
// ( or you can install the vuex-persistedstate plugin so that you won't have to do this step, only store to Vuex is sufficient )
if (window.localStorage) {
window.localStorage.setItem('user', JSON.stringify(data.user_data))
window.localStorage.setItem('token', token)
}
// redirect to the dashboard
this.$router.push({ name: 'home' })
}
}, function (response) {
var data = response.body
this.response = data.error
console.log('BACKEND SERVER - SIGN-IN ERROR', data)
})
},
onSignInError: function (error) {
this.response = 'Failed to sign-in'
console.log('GOOGLE SERVER - SIGN-IN ERROR', error)
},
toggleLoading: function () {
this.loading = (this.loading === '') ? 'loading' : ''
},
resetResponse: function () {
this.response = ''
}
}
}
</script>
<style>
</style>
But on component load I get this error in firefox:
uncaught exception: gapi.auth2.ExternallyVisibleError: Missing required parameter 'client_id'
I appreciate if you could provide a full working example. I really need google oauth2 for vue.js but could not find any one that actually works.
I encountered this as well. The README seems wrong in a trivial way: the clientID option should be client_id. These options are passed directly through to the Google API.
I have imported the 3 lines into main.js
And when I made a component based on
sample.html
But on component load I get this error in firefox:
uncaught exception: gapi.auth2.ExternallyVisibleError: Missing required parameter 'client_id'
I appreciate if you could provide a full working example. I really need google oauth2 for vue.js but could not find any one that actually works.