Vue y login con Google

eXtreM3 #1 Abr '20

Seguro que es una chorrada pero no consigo el paso final.

He seguido esta guía https://developers.google.com/identity/sign-in/web/sign-in y consigo que salga el botón y me pida los permisos de mi cuenta de google para acceder a mi aplicación. Hasta aquí todo bien , en mi cuenta de google aparece mi aplicación como que le he dado permisos a la información del perfil y el correo electrónico.

El problema es que aparentemente no retorna nada.

Utilizo Nuxt y tengo la siguiente estructura:

template

<div
  class="g-signin2"
  data-onsuccess="onSignIn"
/>

static/js/google-login.js

(function() {
  function onSignIn (googleUser) {
    const profile = googleUser.getBasicProfile()
    console.log(profile)
  }
})();

nuxt.config.js

script: [
  { src: 'https://apis.google.com/js/platform.js?onload=renderButton', defer: true },
  { src: '/js/google-login.js' }
],

La página me carga en localhost:3000/signup/ y dentro de las credenciales de Google Platform Cloud tengo

Orígenes de JavaScript autorizados

http://localhost:3000

URI de redirección autorizados

http://localhost:3000/signup/

Me he llevado la función onSignIn a un js global para que esté lista y se ejecute, porque no ha habido manera de declararla dentro del componente.

Qué leches me falta?

ReloaD1010 #2 Abr '20

data-onsuccess="onSignIn"

Ahi se pasa una string a secas, no la funcion, asi que la libreria se encargara de llamar a la funcion dinamicamente. Si declaras el metodo dentro del contexto de Vue no la va a encontrar.
Lo primero que se me ocurre es asignarlo al contexto global (window) desde el componente, aunque no se si Vue te dejara.

<script>
  window.onSignIn = function (googleUser) {
    const profile = googleUser.getBasicProfile()
    console.log(profile)
  }

  module.exports = {
    ...
  }
</script>

Pero cuidado con abusar. Este tipo de soluciones son mala practica porque se contaminan los objetos globales.

2 respuestas

eXtreM3 #3 Abr '20

#2 mañana a primera hora lo pruebo, pero no sé si Vue dejará hacer llamadas a window dentro del componente.

MTX_Anubis #4 Abr '20 :psyduck:

Hablando de Vue 2 que el 3 ni lo he mirado.

Por qué no tienes esa lógica en alguno de los componentes que usas en la ruta signup?

O por qué no la metes en un mixin y lo utilizas en alguno de esos componentes

O por qué no importas la función y la utilizas en alguno de esos componentes

Vamos que por qué tienes un js haciendo esas guarradas para definir la función.

EDIT: Vale soy tonto y no había leído hasta el final

Lo suyo es que te hagas un componente para hacer ese botón y olvidarte del del api:

inicializas el gapi.auth2

a tu botón que inicie el sign in le metes un handler, este

https://developers.google.com/identity/sign-in/web/reference#googleauthattachclickhandlercontainer_options_onsuccess_onfailure

eXtreM3 #5 Abr '20

#2 te quiero, funciona

Vue y login con Google

Usuarios habituales

Tags