Zum Hauptinhalt springen

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. Anmeldung nur für bestimmte Seiten erforderlich, 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 für den Zugriff auf die Tokens die Eigenschaften accessToken/getAccessToken und idToken/getIdToken.
  • Verwenden Sie die Funktionen decodeToken und decodeJWTTokenPayload, um die Tokens bei Bedarf zu decodieren.
  • Verwenden Sie die Eigenschaften isAuthenticated/getIsAuthenticated und isPending zur Implementierung von Ladezuständen.
  • Behandeln Sie Fehler mit der Eigenschaft error.
  • Verwenden Sie die Komponente <SecureRoute> in der Routerkonfiguration, um ausgewählte Routen zu sichern. Weitere Informationen finden Sie in den Dokumenten zum Routing.

Wrapping mit AuthProvider​

Die Komponente AuthProvider ermöglicht den Zugriff auf den Hook useAuth. Sie müssen Ihre Anwendung oder einen Teil Ihrer Anwendung mit dem 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 Hook useAuth bietet Zugriff auf den Authentifizierungsstatus. Sie gibt ein Objekt mit allem zurück, was Sie brauchen. 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 dem Benutzer der Fehlercode angezeigt und er wird gefragt, ob er die Anmeldung erneut versuchen möchte. 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>;
};

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:

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 könnte 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"
        ]
    }
}

Verwendung des Digital SDK​

Bei der Verwendung des Digital SDK werden die HATEOAS-Links zu einer Liste von Aktionen geparst, die dem Benutzer zur Verfügung stehen.

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

Verwendung der Eigenschaft userInfo​

In Abhängigkeit von Ihrem Identitätsanbieter (IdP) sind Gruppeninformationen möglicherweise in der Eigenschaft userInfo des Hooks useAuthverfü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;