es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo guardar un token después de una autenticación exitosa de OIDC usando oidc-client en JavaScript?

¿Cómo guardar un token después de una autenticación exitosa de OIDC usando oidc-client en JavaScript?

12 Jul, 2023 Programación

Hola, estoy intentando obtener el id_token después de una autenticación exitosa utilizando la biblioteca OIDC y OIDC-client. A continuación, puedes inspeccionar mi definición de servicio:

import Oidc from "oidc-client";

const config = {
  authority: process.env.VUE_APP_API_URL,
  client_id: process.env.VUE_APP_OAUTH_CLIENT_ID,
  redirect_uri: process.env.VUE_APP_OAUTH_REDIRECTION_URL,
  response_type: process.env.VUE_APP_OAUTH_RESPONSE_TYPE,
  scope: process.env.VUE_APP_OAUTH_SCOPE,
  post_logout_redirect_uri: process.env.VUE_APP_OAUTH_REDIRECTION_URL
};

const userManager = new Oidc.UserManager(config);

const service = {
  signIn() {
    userManager.signinRedirect();
  },
  signOut() {
    userManager.signoutRedirect();
  },
};

export default service;

After authentication process, im being redirected from Google to this url:
http://localhost:8080/#id_token=mytoken&scope=openid&state=mystate&session_state=mysessionstate

Me gustaría persistir el token obtenido en el almacenamiento local. Mi primera pregunta es saber de dónde debo obtener el token. Puedo obtenerlo directamente de la URL o tal vez usar Oidc.UserManager. La intuición me dice que debo obtenerlo del userManager, pero me gustaría saber cuáles son las ventajas/desventajas de las dos soluciones. La segunda pregunta es cómo puedo capturar un hook que se activa después de la redirección. Es decir, quiero ejecutar una lógica si la redirección se ha completado al 100%. Intenté usar la función await y then, sin embargo, signinRedirect parece terminar antes de que se complete la redirección. Sé que existe una función llamada signinRedirectCallback, pero no sé cómo usarla para estar seguro al 100% de que se está ejecutando después de que se complete la redirección. Gracias de antemano por cualquier ayuda. Saludos.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para recuperar el id_token después de una autenticación exitosa utilizando la biblioteca oidc y oidc-client, puedes utilizar la función signinRedirectCallback() provista por el userManager.

    Simplemente puedes modificar tu definición de servicio para incluir la función signinRedirectCallback() como se muestra a continuación:

    “`import Oidc from “oidc-client”;

    const config = {
    authority: process.env.VUE_APP_API_URL,
    client_id: process.env.VUE_APP_OAUTH_CLIENT_ID,
    redirect_uri: process.env.VUE_APP_OAUTH_REDIRECTION_URL,
    response_type: process.env.VUE_APP_OAUTH_RESPONSE_TYPE,
    scope: process.env.VUE_APP_OAUTH_SCOPE,
    post_logout_redirect_uri: process.env.VUE_APP_OAUTH_REDIRECTION_URL
    };

    const userManager = new Oidc.UserManager(config);

    const service = {
    signIn() {
    userManager.signinRedirect();
    },
    signOut() {
    userManager.signoutRedirect();
    },
    async completeSignIn() {
    const user = await userManager.signinRedirectCallback();
    localStorage.setItem(‘id_token’, user.id_token);
    // ejecuta tu lógica aquí después de completar la redirección
    }
    };

    export default service;


    La función `completeSignIn()` anterior se puede utilizar para completar el proceso de inicio de sesión y recuperar el `id_token`. El `id_token` se guarda en el almacenamiento local utilizando el método `setItem()`.

Para capturar el gancho que se activa después de la redirección, puedes llamar a la función `completeSignIn()` después de que se haya completado la redirección.

Por ejemplo, puedes crear una nueva ruta en tu aplicación que apunte a la `redirect_uri` definida en tu `config`, y llamar a la función `completeSignIn()` en el gancho `mounted` de ese componente.

Alternativamente, puedes escuchar el evento `hashchange` y llamar a la función `completeSignIn()` en la devolución de llamada.

    window.addEventListener(‘hashchange’, () => {
    if (window.location.hash.includes(‘id_token’)) {
    service.completeSignIn();
    }
    });
    “`

    En general, utilizar la función signinRedirectCallback() provista por el userManager es la forma recomendada de recuperar el id_token, ya que maneja todos los flujos de autenticación necesarios.

Comments are closed.