Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Missing required parameter 'client_id' #3

Open
k0fi opened this issue Aug 31, 2017 · 2 comments
Open

Missing required parameter 'client_id' #3

k0fi opened this issue Aug 31, 2017 · 2 comments

Comments

@k0fi
Copy link

k0fi commented Aug 31, 2017

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.

@doublemarked
Copy link

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.

@reinzor
Copy link

reinzor commented Sep 28, 2017

or clientId, note the last lowercase d

@reinzor reinzor mentioned this issue Sep 28, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants