simmatrix / vue-google-auth

[DEPRECATED] Handling Google sign-in and sign-out for Vue.js applications
MIT License
46 stars 45 forks source link

Missing required parameter 'client_id' #3

Open k0fi opened 7 years ago

k0fi commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

or clientId, note the last lowercase d