1

Estoy realizando un login en Angular.

Cuando se inicia mi componente login:

   ngOnInit(): void { 
     google.accounts.id.initialize({
          client_id: "...",
          callback: this.handleCredentialResponse
        });
   }

Al iniciar y presional el botón, se dispara el callback.

botón login

La función del callback, decodifica un token, lo procesa y quiere hacer otra serie de acciones.

handleCredentialResponse(response:any) {
    //We decode the jwt
    const jwt = response.credential.split('.')[1];
    const decodedJwtJsonData = window.atob(jwt);  
    const decodedJwtData = JSON.parse(decodedJwtJsonData);

    //Create an UserGoogle
    const user:UserGoogle={
      email: decodedJwtData.email,
      photo: decodedJwtData.picture,
    }

    this.store.dispatch(fromUser.createUser({
      user:user,
      email: user.email,
    }))
}

El problema surge dentro del callback, no detecta ninguna variable ni funcion que sea del componente en el que estoy por más que compile.

En este caso, me sale el siguiente error: error

Intenté creando un subject y subscribiendome. Pero pasa lo mismo cuando quiero aplicar su metodo next(), detecta que no existe.

1 respuesta 1

1

El problema es causado por la pérdida de contexto. A causa de esto, this no es el componente y por tanto no tiene un store (this.store es undefined).

Puedes solucionarlo así:

ngOnInit(): void { 
     google.accounts.id.initialize({
          client_id: "...",
          callback: this.handleCredentialResponse.bind(this);
        });
   }

o así:

ngOnInit(): void { 
     google.accounts.id.initialize({
          client_id: "...",
          callback: response => this.handleCredentialResponse(response);
        });
   }

Puedes leer sobre el contexto aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.