Saltar al contenido principal

Implementación de la lógica de autenticación personalizada

Si desea que toda su aplicación esté protegida por inicio de sesión, no necesita preocuparse por esta página. La lógica de autenticación se maneja en la función start() de Jutro.

Configuración de la autenticación personalizada​

Si desea controlar cómo su aplicación emplea el inicio de sesión, por ejemplo, requerir el inicio de sesión solo para algunas páginas, debe implementar los siguientes pasos.

  1. Establezca las variables del entorno de tiempo de ejecución, como se describe en la sección Configuración de la página Clientes de autenticación, pero deshabilite el uso global del cliente de autenticación de esta manera:

    REACT_APP_JUTRO_AUTH_ENABLED=false

  2. Encapsule su aplicación o parte de ella con el componente AuthProvider y establezca las propiedades onLocationChange y location. Consulte la sección Encapsulado en AuthProvider para ver un ejemplo.

  3. Utilice el gancho useAuth para acceder al estado de autenticación cuando corresponda. Consulte la sección Acceso al estado de autenticación para ver un ejemplo.

A continuación, puede realizar cualquiera de las siguientes acciones:

  • Utilice las funciones login y logout para implementar las funcionalidades de inicio y cierre de sesión.
  • Utilice las propiedades accessToken/getAccessToken y idToken/getIdToken para acceder a los tokens.
  • Utilice las funciones decodeToken y decodeJWTTokenPayload para decodificar los tokens cuando sea necesario.
  • Utilice las propiedades isAuthenticated/getIsAuthenticated y isPending para implementar los estados de carga.
  • Utilice la propiedad error para manejar errores.
  • Utilice el componente <SecureRoute> en la configuración de su enrutador para proteger las rutas seleccionadas. Para obtener más información, consulte nuestros documentos sobre enrutamiento.

Encapsulado en AuthProvider​

El componente AuthProvider proporciona acceso al gancho useAuth. Debe encapsular su aplicación o parte de ella con AuthProvider:

import { useCallback } from 'react';
import { AuthProvider } from '@jutro/auth';
import { useHistory, useLocation } from 'react-router-dom';

const history = useHistory();

const location = useLocation();

const onLocationChange = useCallback(
  (newPath) => history.replace(newPath),
  [history]
);

// ...

return (
  <AuthProvider
    location={location}
    onLocationChange={onLocationChange}>
    <App />
  </AuthProvider>
);
Warning: Si no proporciona la propiedad onLocationChange, su aplicación no funcionará.

Rutas seguras en un router personalizado​

En el ejemplo anterior, se podrá acceder a todas las páginas sin iniciar sesión. Para establecer rutas que requieran autenticación, utilice el componente SecureRoute en un router personalizado.

Para conocer un ejemplo de implementación de un router personalizado con rutas seguras, consulte nuestra documentación de enrutamiento seguro.

Acceso al estado de autenticación​

El gancho useAuth proporciona acceso al estado de autenticación. Devuelve un objeto con todo lo que necesita. Consulte la sección useAuth para obtener más detalles.

Por ejemplo, si desea mostrar un componente solo cuando el usuario ha iniciado sesión y pertenece a un grupo específico, puede hacerlo de la siguiente manera:

import { useAuth } from '@jutro/auth';

function SecureAdminPanel() {
  const { userInfo } = useAuth();
  const isAdmin = userInfo?.groups?.includes('admin');

  if (!isAdmin) {
    return null;
  }

  return <AdminPanel />;
}

Manejo personalizado de errores de autenticación​

De forma predeterminada, AuthRoute maneja los errores de autenticación. El manejo de errores predeterminado interrumpe el flujo de la aplicación y muestra una pantalla de errores de autenticación genérica. También registrará los detalles en la consola para permitir compatibilidad y depuración más efectivas.

Puede pasar el indicador disableAuthErrorsHandling a la función start() para omitir el comportamiento predeterminado e implementar su propio manejo de errores personalizado. De este modo, no se gestionará automáticamente ningún error. Puede decidir qué errores desea manejar y cómo.

Por ejemplo, el siguiente código mostrará un modal cuando se detecte un error. Este modal le mostrará el código de error al usuario y le preguntará si desea intentar iniciar sesión nuevamente. Si el usuario acepta, llamará a la función renewTokens() si se indica que hubo un error al actualizar el token (JUTRO_AUTH_REFRESH_ERROR); de lo contrario, llama a login() para que el usuario vuelva a iniciar sesión.

import React, { useEffect } from 'react';
import { useModal } from '@jutro/components';
import { AuthErrorCodes, useAuth } from '@jutro/auth';
export const AuthErrors: React.FC<{
  children: React.ReactNode,
}> = ({ children }) => {
  const { error, login, renewTokens } = useAuth();
  const { showConfirm } = useModal();
  useEffect(() => {
    if (error) {
      showConfirm({
        status: 'warning',
        title: 'Authentication failure',
        message: `Do you want to login again? CODE: ${error?.errorCode}`,
        confirmButtonText: 'Login',
      }).then((result) => {
        if (result === 'confirm') {
          if (error.errorCode === AuthErrorCodes.JUTRO_AUTH_REFRESH_ERROR) {
            renewTokens();
          } else {
            login();
          }
        }
      });
    }
  }, [error, login, showConfirm]);
  return <React.Fragment>{children}</React.Fragment>;
};

Para obtener más información sobre los errores de autenticación, consulte la documentación del cliente de autenticación.

Lógica de autorización personalizada​

Aunque Jutro no realiza la autorización del usuario, usted puede verificar el permiso de un usuario y utilizar esta información de manera práctica. Un caso de uso es determinar qué elementos de la interfaz de usuario se muestran o están habilitados. Por ejemplo, deshabilitar u ocultar un botón de entrada si un usuario no tiene el permiso post. En una aplicación de Jutro, tiene las siguientes opciones para comprobar los permisos de usuario:

Puede verificar los enlaces HATEOAS en la respuesta de Cloud API para determinar qué acciones están permitidas para el usuario en un recurso específico de la API REST. Por ejemplo, una sección de enlaces de respuesta de ClaimCenter podría tener un aspecto similar al siguiente:

"links": {
    "assign": {
        "href": "/common/v1/activities/xc:20/assign",
        "methods": [
            "post"
        ]

    },
    "notes": {
        "href": "/common/v1/activities/xc:20/notes",
        "methods": [
            "get",
            "post"
        ]
    },
    "self": {
        "href": "/common/v1/activities/xc:20",
        "methods": [
            "get"
        ]
    }
}

Uso del SDK de Digital​

Si utiliza el SDK de Digital, los enlaces HATEOAS se analizan en una lista de acciones disponibles para el usuario.

Consulte la sección de descripción general de acciones de los documentos del SDK de Digital para obtener más información sobre esta función.

Uso de la propiedad userInfo​

Según su proveedor de identidad (IdP), la información del grupo puede estar disponible dentro de la propiedad userInfo del gancho useAuth. En ese caso, puede utilizar la propiedad userInfo para verificar a qué grupos pertenece el usuario.

import { useAuth } from '@jutro/auth';

const { userInfo } = useAuth();
const groups = userInfo?.groups;