Implementieren einer benutzerdefinierten Authentifizierungslogik

Wenn Ihre gesamte Anwendung hinter der Anmeldung gesichert werden soll, ist diese Seite nicht relevant. Die Authentifizierungslogik wird in der Jutro-Funktion start() verarbeitet.

Einrichten einer benutzerdefinierten Authentifizierung

Wenn Sie festlegen möchten, wie die Anmeldung in Ihrer Anwendung erfolgen soll, z. B. nur für bestimmte Seiten, müssen Sie die folgenden Schritte implementieren.

1. Legen Sie die Laufzeit-Umgebungsvariablen wie im Abschnitt Konfiguration auf der Seite „Authentifizierungs-Clients“ beschrieben fest. Deaktivieren Sie jedoch die globale Verwendung des Authentifizierungs-Clients durch folgende Festlegung:

   REACT_APP_JUTRO_AUTH_ENABLED=false

2. Umschließen Sie die Anwendung oder einen Teil der Anwendung mit der Komponente AuthProvider und legen Sie die Eigenschaften onLocationChange und location fest. Ein Beispiel dafür finden Sie im Abschnitt Wrapping mit AuthProvider.

3. Verwenden Sie den useAuth-Hook, um gegebenenfalls auf den Authentifizierungsstatus zuzugreifen. Ein Beispiel finden Sie im Abschnitt Zugriff auf den Authentifizierungsstatus.

Dann können Sie eine der folgenden Aktionen ausführen:

• Verwenden Sie die Funktionen login und logout zur Implementierung der Anmelde- und Abmeldefunktionen.
• Verwenden Sie die Eigenschaften accessToken/getAccessToken und idToken/getIdToken für den Zugriff auf die Token.
• Verwenden Sie die Funktionen decodeToken und decodeJWTTokenPayload, um die Token bei Bedarf zu decodieren.
• Verwenden Sie die Eigenschaften isAuthenticated/getIsAuthenticated und isPending zur Implementierung von Ladezuständen.
• Verwenden Sie die Eigenschaft error zum Behandeln von Fehlern.
• Verwenden Sie die Komponente <SecureRoute> in der Routerkonfiguration, um ausgewählte Routen zu sichern. Weitere Informationen finden Sie in der Dokumentation zum Routing.

Wrapping mit AuthProvider

Die Komponente AuthProvider ermöglicht den Zugriff auf den Hook useAuth. Sie müssen die Anwendung oder einen Teil der Anwendung mit AuthProvider umschließen:

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: Wenn Sie die Eigenschaft onLocationChange nicht angeben, wird die Anwendung nicht ausgeführt.

Sichere Routen in einem benutzerdefinierten Router

Im vorherigen Beispiel sind alle Seiten ohne Anmeldung zugänglich. Zum Festlegen von Routen, für die eine Authentifizierung erforderlich ist, verwenden Sie die SecureRoute-Komponente in einem benutzerdefinierten Router.

Ein Beispiel für die Implementierung eines benutzerdefinierten Routers mit sicheren Routen finden Sie in der Dokumentation zum sicheren Routing.

Zugriff auf den Authentifizierungsstatus

Der useAuth-Hook bietet Zugriff auf den Authentifizierungsstatus. Er gibt ein Objekt mit allen notwendigen Informationen zurück. Weitere Informationen finden Sie im Abschnitt useAuth.

Wenn eine Komponente beispielsweise nur angezeigt werden soll, wenn der Benutzer angemeldet ist und einer spezifischen Gruppe angehört, können Sie wie folgt vorgehen:

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

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

  if (!isAdmin) {
    return null;
  }

  return <AdminPanel />;
}

Benutzerdefinierte Verarbeitung von Authentifizierungsfehlern

Standardmäßig werden Authentifizierungsfehler über AuthRoute verarbeitet. Die standardmäßige Fehlerverarbeitung besteht darin, den Anwendungsablauf zu unterbrechen und ein generisches Fenster mit einem Authentifizierungsfehler anzuzeigen. Außerdem werden Details in der Konsole protokolliert, um einen effizienteren Support und ein effizienteres Debuggen zu ermöglichen.

Sie können das start()-Flag an die Funktion disableAuthErrorsHandling übergeben, um das Standardverhalten zu umgehen und eine eigene benutzerdefinierte Fehlerbehandlung zu implementieren. Auf diese Weise werden keine Fehler automatisch verarbeitet. Sie können entscheiden, welche Fehler Sie wie verarbeiten möchten.

Der folgende Code zeigt beispielsweise ein modales Fenster bei Erkennung eines Fehlers an. In diesem modalen Fenster wird der Fehlercode für den Benutzer angezeigt und er wird gefragt, ob die Anmeldung erneut erfolgen soll. Wenn der Benutzer zustimmt, wird die Funktion renewTokens() aufgerufen, wenn der Fehler angibt, dass beim Aktualisieren des Tokens ein Fehler aufgetreten ist (JUTRO_AUTH_REFRESH_ERROR). Andernfalls wird login() aufgerufen, um den Benutzer erneut anzumelden.

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

Weitere Informationen zu Authentifizierungsfehlern finden Sie in der Dokumentation zum Authentifizierungs-Client.

Benutzerdefinierte Autorisierungslogik

Auch wenn Jutro keine Benutzerautorisierung durchführt, können Sie die Berechtigung eines Benutzers überprüfen und diese Informationen praktisch verwenden. Ein Anwendungsfall besteht darin, zu bestimmen, welche UI-Elemente angezeigt oder aktiviert werden. Beispielsweise das Deaktivieren oder Ausblenden einer Eingabeschaltfläche, wenn ein Benutzer nicht über die entsprechende post-Berechtigung verfügt. In einer Jutro-Anwendung haben Sie die folgenden Optionen zum Überprüfen von Benutzerberechtigungen:

Überprüfen von HATEOAS-Links

Sie können die HATEOAS-Links in der Cloud-API-Antwort verwenden, um festzulegen, welche Aktionen für den Benutzer in einer bestimmten REST-API-Ressource zulässig sind. Ein Abschnitt mit Antwortlinks in ClaimCenter kann beispielsweise folgendermaßen aussehen:

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

Verwenden des Digital SDK

Bei Verwendung des Digital SDK werden die HATEOAS-Links in einer Liste der für den Benutzer verfügbaren Aktionen aufgegliedert.

Weitere Informationen zu dieser Funktion finden Sie im Abschnitt „Übersicht der Aktionen“ in der Dokumentation zum Digital SDK.

Verwenden der userInfo-Eigenschaft

In Abhängigkeit von Ihrem Identitätsanbieter (IdP) sind Gruppeninformationen möglicherweise in der Eigenschaft userInfo des Hooks useAuth verfügbar. Wenn dies der Fall ist, können Sie mit der Eigenschaft userInfo die Gruppen überprüfen, denen der Benutzer angehört.

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

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