vue-google-auth icon indicating copy to clipboard operation
vue-google-auth copied to clipboard

Missing required parameter 'client_id'

Open k0fi opened this issue 8 years ago • 2 comments

I have imported the 3 lines into main.js

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.

k0fi avatar Aug 31 '17 16:08 k0fi

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.

doublemarked avatar Sep 12 '17 13:09 doublemarked

or clientId, note the last lowercase d

reinzor avatar Sep 28 '17 07:09 reinzor