Passer au contenu principal

Implémentation d’une logique d’authentification personnalisée

Si vous souhaitez que l'ensemble de votre application soit sécurisé après la connexion, vous n'avez pas besoin de vous soucier de cette page. La logique d'authentification est gérée dans la fonction Jutro start().

Configuration de l’authentification personnalisée​

Si vous souhaitez contrôler la façon dont votre application applique la connexion, par exemple, si vous n'avez besoin de vous connecter que pour certaines pages, vous devez implémenter les étapes suivantes.

  1. Définissez les variables d'environnement d'exécution, comme décrit dans la section configuration sur la page des clients d'authentification, mais désactivez l'utilisation globale du client d'authentification en définissant les éléments suivants :

    REACT_APP_JUTRO_AUTH_ENABLED=false

  2. Enveloppez votre application ou une partie de votre application avec le composant AuthProvider et définissez les propriétés onLocationChange et location. Reportez-vous à la section Encapsulation dans AuthProvider pour obtenir un exemple.

  3. Utilisez le crochet useAuth pour accéder à l’état d’authentification, le cas échéant. Reportez-vous à la section Accès à l’état d’authentification pour obtenir un exemple.

Vous pouvez ensuite effectuer l'une des opérations suivantes :

  • Utilisez les fonctions login et logout pour implémenter la fonctionnalité de connexion et de déconnexion.
  • Utilisez les propriétés accessToken/getAccessToken et idToken/getIdToken pour accéder aux jetons.
  • Utilisez les fonctions decodeToken et decodeJWTTokenPayload pour décoder les jetons si nécessaire.
  • Utilisez les propriétés isAuthenticated, getIsAuthenticated et isPending pour implémenter des états de chargement.
  • Utilisez la propriété error pour gérer les erreurs.
  • Utilisez le composant <SecureRoute> dans la configuration de votre routeur pour sécuriser les routes sélectionnées. Pour en savoir plus, reportez-vous à notre documentation sur le routage.

Encapsulation dans AuthProvider​

Le composant AuthProvider permet d'accéder au crochet useAuth. Vous devez encapsuler votre application ou une partie de votre application avec 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 vous n'indiquez pas la propriété onLocationChange, votre application ne fonctionnera pas.

Sécuriser les routes dans un routeur personnalisé​

Dans l’exemple précédent, toutes les pages seront accessibles sans connexion. Pour définir des routes nécessitant une authentification, utilisez le composant SecureRoute dans un routeur personnalisé.

Pour obtenir un exemple d'implémentation d'un routeur personnalisé avec des routes sécurisées, reportez-vous à notre documentation sur le routage sécurisé.

Accès à l'état d'authentification​

Le crochet useAuth donne accès à l'état d'authentification. Il renvoie un objet avec tout ce dont vous avez besoin. Reportez-vous à la section useAuth pour en savoir plus.

Par exemple, si vous souhaitez afficher un composant uniquement lorsque l'utilisateur est connecté et qu'il appartient à un groupe spécifique, vous pouvez procéder comme suit :

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

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

  if (!isAdmin) {
    return null;
  }

  return <AdminPanel />;
}

Gestion personnalisée des erreurs d’authentification​

Par défaut, les erreurs d'authentification sont gérées par AuthRoute. La gestion des erreurs par défaut consiste à interrompre le flux de l'application et à afficher un écran d'erreur d'authentification générique. Elle enregistre également les détails dans la console pour permettre une assistance et un débogage plus efficaces.

Vous pouvez transmettre l'indicateur disableAuthErrorsHandling à la fonction start() pour contourner le comportement par défaut et implémenter votre propre gestion des erreurs personnalisée. Ainsi, aucune erreur ne sera traitée automatiquement. Vous pouvez décider quelles erreurs vous souhaitez traiter et comment.

Par exemple, le code suivant affiche une fenêtre modale lorsqu'une erreur est détectée. Cette fenêtre modale montre le code d'erreur à l'utilisateur et lui demande s'il souhaite réessayer de se connecter. Si l'utilisateur accepte, elle appellera la fonction renewTokens() si l'erreur indique qu'une erreur s'est produite lors de l'actualisation du jeton (JUTRO_AUTH_REFRESH_ERROR), sinon elle appelle login() pour reconnecter l'utilisateur.

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>;
};

Pour en savoir plus sur les erreurs d’authentification, reportez-vous à la documentation du client d’authentification

Logique d’autorisation personnalisée​

Même si Jutro n'effectue pas d'autorisation utilisateur, vous pouvez toujours vérifier les autorisations d'un utilisateur et utiliser ces informations de manière pratique. Un cas d'utilisation consiste à déterminer quels éléments de l'interface utilisateur sont affichés ou activés. Par exemple, désactiver ou masquer un bouton de saisie si un utilisateur ne dispose pas de l'autorisation post nécessaire. Dans une application Jutro, vous disposez des options suivantes pour vérifier les autorisations utilisateur :

Vous pouvez utiliser les liens HATEOAS dans la réponse de Cloud API pour déterminer les actions autorisées pour l'utilisateur sur une ressource d'API REST spécifique. Par exemple, une section relative aux liens d'une réponse de ClaimCenter peut ressembler à ceci :

"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"
        ]
    }
}

Utilisation du SDK Digital​

Si vous utilisez le SDK Digital, les liens HATEOAS sont analysés dans une liste d'actions disponibles pour l'utilisateur.

Pour en savoir plus sur cette fonctionnalité, reportez-vous à la section Présentation des actions de la documentation du SDK Digital.

Utilisation de la propriété userInfo​

En fonction de votre fournisseur d'identité (IdP), des informations de groupe peuvent être disponibles dans la propriété userInfo du crochet useAuth. Si tel est le cas, vous pouvez utiliser la propriété userInfo pour vérifier les groupes auxquels l'utilisateur appartient.

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

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