No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Manejo de la autenticaci贸n desde el cliente

14/20
Recursos

Aportes 7

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Nos falto el ejemplo practico para implementar un refresh token 馃槮

Consideraciones a tener en cuenta:

Al hacer un login en la API nos da la informaci贸n del usuario, pero tambi茅n env铆an el token. Lo m谩s importante es guardar el token porque debe enviarse en todas las peticiones.

  • En el cliente deber铆amos tener un estado de login, es decir, una vez hecho un login exitoso se deber铆a guardar un estado de sesi贸n iniciada en el frontend.
  • Deber铆amos guardar el estado (el token) en alg煤n lugar, se recomienda una cookie. Tambi茅n se puede en LocalStorage, pero no es la mejor practica.
  • Cada vez que se env铆e una petici贸n (request) se deber铆a enviar el token. Si se manejan librer铆as para hacer requests (ej. axios), hay formas de interceptar la petici贸n y poner el token en el header.
  • El token deber铆a tener una expiraci贸n, se recomienda que expire en 15-20 minutos, se puede implementar una t茅cnica de refresh token. La API nos puede dar un access token y otro token aparte (refresh token) que nos servir谩 para generar un nuevo token cuando el access token ya expir贸. Se recomienda estar haciendo requests continuamente para no salir de la sesi贸n.
  • Se pueden validar permisos, con el token se puede preguntar al backend qu茅 tipo de perfil es, aunque para m谩s seguridad ser铆a mejor hacer un request para obtener el perfil del usuario para no guardar nada en alg煤n lugar.

Hola devs!! ac谩 led dejo un art铆culo s煤per pr谩ctico para la implementaci贸n de los refresh token -> click aqu铆
HAPPY CODING!

Ac谩 un ejemplo de c贸mo se podr铆a implementar el refresh-token desde el cliente, (no es del proyecto que estamos haciendo en este curso pero puede ser 煤til para entender la l贸gica):

  1. Funci贸n para refrescar el token: En este caso solo se hace un get al endpoint /api/session/refresh, el refresh-token es enviado autom谩ticamente como una cookie al servidor gracias al withCredentials: true utilizando axios.
export const RefreshTokenService = async (): Promise<boolean> => {
  try {
    await axios.get(`${GLOBALS.API_HOST}/api/session/refresh`, {
      withCredentials: true,
    });

    return true;
  } catch (err) {
    return false;
  }
};
  1. En las funciones que utilizan el access-token, validar si la petici贸n retorna un c贸digo de estado 403, o el que se haya definido cuando el access-token est谩 vencido o no es v谩lido:
// En este caso es una funci贸n para a帽adir un producto a los favoritos a partir de su id. 
// El parametro it es un contador de los intentos que sirve para intentar refrescar el 
// access token una sola vez.
export const AddToFavoritesService = async (it: number, id: string): Promise<boolean> => {
  // Si luego de intentar refrescar el access-token sigue fallando, retorna false como 
  // indicador de que no se pudo realizar.
  if (it > 2) return false;

  try {
  // Intenta a帽adir a favoritos
    const payload = { id };
    const response = await axios.post(`${GLOBALS.API_HOST}/api/user/favorites`, payload, {
      withCredentials: true,
    });

    return response.status === 200 ? true : false;
  } catch (err) {
  // Si el servidor response algo diferente a 200 (OK) axios lo tomar谩 como error
  // Por lo que entrar谩 a este catch
    if (axios.isAxiosError(err)) {
     // El c贸digo de estado 403 es el que nos indica en este caso que el access-token
     // est谩 vencido o no es v谩lido
      if (err.response?.status === 403) {
       // Ejecutamos la funci贸n para refrescar el token
        await RefreshTokenService();
       // Hacemos una llamada recursiva a la funci贸n de a帽adir a favoritos para intentar
       // de nuevo, pero aumentamos en uno el contador de iteraciones para poner el l铆mite.
        return await AddToFavoritesService(++it, id);
      }
      return false;
    }
    return false;
  }
};

Como que esto debi贸 haber sido parte del curso en lugar de nom谩s mencionarlo, no? 馃槓

馃棟 Clase #14: Manejo de la autenticaci贸n desde el cliente 14/20 馃棟



Con un token empezamos a manejar la capa de autenticaci贸n y de autorizaci贸n desde el lado del backen, pero del lado de los clientes es diferente, lo hacen a trav茅s de una interfaz creada por Angular, React o Vue que se conectan a la API y manejan las sesiones, cuando se hace login, nos env铆a toda la informaci贸n relacionada con el usuario: nombre, email, datos de fechas, incluso un avatar y lo m谩s importante el token, todo esto se debe almacenar para tener mas accesos.

Client Session (Browser): 鈾


Las fases o etapas a considerar desde el punto de vista de la sesi贸n del cliente, es decir desde el Browser o la app (aplicaciones m贸viles) son las siguientes:

  • Un estado de login: una vez qu se hace el login y es exitoso debemos guardar en alg煤n estado la informaci贸n proveniente del usuario, como los token son stealers, es decir que no tienen un estado fijo se debe guardar en un LocalStorage o cookie.
  • Cookies o LocalStorage: el mejor lugar para guardar el token podr铆a ser una cookie (que es mejor que un LocalStorage), cada vez que se hace un request (una petici贸n), es decir se quiere por ejemplo consultar categor铆as, se quiere crear una orden, se quiere editar un producto, etc, se debe enviar el token por cada petici贸n.
  • Enviar en el header: Existe en Angular una manera que se pueda interceptar el token por medio de un header y no sea necesario enviar el token cada vez que se haga una petici贸n.
  • Refresh token: Los token deben tener una duraci贸n, es decir un tiempo de expiraci贸n, esto se ve relejado por ejemplo en las sesiones bancarias en donde despu茅s de un tiempo de consulta, se expira la sesi贸n y se sale, sin embargo en otras sesiones no relacionadas con el 谩rea bancaria puede crear malestar al usuario que lo est茅n sacando por ejemplo cada 15 minutos, para evitar esto se encuentra los Refresh token, que es un segundo token que se genera al hacer login que al expirar el primero, el segundo lo sustituye sin necesidad de salir de la sesi贸n (el frontend lo solicita).
  • Validar permisos: Al tener el token se puede validar permisos e indicarle al backend qu茅 tipo de perfil es y verificar si est谩 autorizado a visualizar o consultar cierta informaci贸n restringida a la mayor铆a de usuarios.

Manejo de la autenticaci贸n desde el cliente

En el login nos mandan el token, este debemos guardarlo porque lo enviaremos en todas las peticiones.

Podemos guardar el token en Cookies (lo m谩s recomendado) o en LocalStorage (no es la mejor pr谩ctica).

Es muy usado en bancos el 鈥榬efresh token鈥 por medidas de seguridad, por ejemplo, cada 15 minutos expira el token y sacamos al usuario de la sesi贸n y debe de vovler a hacer login.