Google signin button invalid origin

Question

I'm implementing google signin button, however I just want to get access to the user profile image, so I go to the console, create a project, create a new OAuth2 Client Id, add the allowed origins: localhost, dev and prod(protocol https and only http for localhost), load and configure the google button script like this:

createGoogleScript () {
  this.script = document.createElement('script')
  this.script.src = 'https://apis.google.com/js/api:client.js'
  this.script.onload = () => {
    this.renderGoogleButton()
  }
  document.getElementsByTagName('head')[0].appendChild(this.script)
},
renderGoogleButton () {
  gapi.load('auth2', () => {
    const auth2 = gapi.auth2.init({
      client_id: 'MYKEY.apps.googleusercontent.com',
      cookiepolicy: 'single_host_origin'
    })
    this.attachSignin(auth2)
  })
},
attachSignin (auth2) {
  auth2.attachClickHandler(
    googleButtonElement,
    {},
    this.onSuccess,
    this.onFailure
  )
}

But when the page is loaded I get this error on the init method:

{
"error": "idpiframe_initialization_failed",
"details": "Not a valid origin for the client: https://my-origin-here has not been registered for client ID MYKEY.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."

}

Just for making sure, I did go to the console, open the oauth2 client ID specified in the message, copied and paste the origin in the message above, and paste it both in allowed origins and allowed redirect uris, I still get this error, I'm missing something here, but I dont know what, how can he give me that message, if I did exactly what the message is saying.

Google signin button invalid origin

0 Answers