So integrieren Sie den Auth0-Authentifizierungsdienst in eine React-Anwendung

2023/01/31

Auth0 vereinfacht den Prozess zum Festlegen der Benutzeridentität in Ihrer Web-App. Es bietet sichere und anpassbare Authentifizierungs- und Autorisierungsfunktionen über seine API. Verwenden Sie es, und Sie müssen sich keine Gedanken über den Aufbau Ihres eigenen Authentifizierungssystems von Grund auf machen.

Die Integration mit Auth0 macht es einfach, eine zuverlässige Authentifizierung in Ihre React-Anwendung aufzunehmen und garantiert einen sicheren Zugriff auf Ihre App.

Die folgenden Schritte erklären, was notwendig ist, um Auth0 in eine React-Anwendung zu integrieren.

Was ist Auth0?

Auth0 ist ein Webdienst, der eine sichere API bereitstellt, um die Benutzerauthentifizierung und -autorisierung in Ihren Apps zu handhaben.

Es bietet ein anpassbares Authentifizierungssystem, das Sie einfach in Ihre React-Anwendung integrieren können. Nachdem Sie Auth0 mit Ihrer App verbunden haben, übernimmt es den Rest der Authentifizierungsarbeitslast.

Wie funktioniert Auth0?

Auth0 bietet eine Funktion für die universelle Anmeldung, die den Authentifizierungsablauf implementiert. Jedes Mal, wenn sich ein Benutzer anmelden möchte, leitet ihn die API auf eine Auth0-Anmeldeseite weiter, er wird authentifiziert, und die Nutzlastdaten für die erfolgreiche Authentifizierung werden dann an Ihre App gesendet.

Sie können den Authentifizierungsworkflow für Ihre App anpassen, indem Sie verschiedene Anmeldemethoden definieren. Die universelle Anmeldung bietet einen Benutzernamen und ein Passwort als primäre Authentifizierung, aber Sie können auch andere Optionen wie Social Login über einen Anbieter wie Google und Multi-Faktor-Authentifizierung hinzufügen.

Der Vorteil dieser Art der Authentifizierung besteht darin, dass Sie nicht mit Identitätsprotokollen wie OAuth 2.0 oder OpenID Connect vertraut sein müssen, die häufig zum Erstellen sicherer Authentifizierungssysteme verwendet werden.

Erstellen Sie ein neues Projekt in der Auth0-Entwicklerkonsole

Um zu beginnen, müssen Sie sich zunächst für ein Auth0 – Konto anmelden. Navigieren Sie nach der Anmeldung zu Ihrem Dashboard und klicken Sie auf Anwendung erstellen , um die Projekteinstellungen für die Authentifizierung zu konfigurieren.

Auth0 bietet verschiedene Authentifizierungskonfigurationen, abhängig von der Art der Anwendung, die Sie erstellen. Geben Sie für dieses Tutorial Ihren Anwendungsnamen ein, wählen Sie Single Page Web Applications aus und klicken Sie dann auf Save .

Wählen Sie als Nächstes React aus der Liste der von Auth0 unterstützten Technologien aus.

Eine Liste von Webentwicklungstechnologien, die von Auth0 unterstützt werden

Konfigurieren Sie die URIs der Anwendung

Nachdem Sie Ihre Anwendung erstellt und die erforderlichen Einstellungen konfiguriert haben, klicken Sie im Dashboard Ihrer Anwendung auf die Registerkarte Einstellungen , um die erforderlichen URI-Eigenschaften einzurichten.

Legen Sie die folgenden Eigenschaften fest:

Zulässige Rückruf-URLs . Die URL, die der Auth0-Server aufruft, nachdem sich ein Benutzer authentifiziert hat.
Zulässige Abmelde-URLs . Die URL, zu der Auth0 den Benutzer umleitet, wenn er sich abmeldet.
Zulässige Webursprünge . Die zulässige URL, von der eine Autorisierungsanforderung stammen kann.

Wenn Sie mit dem Ausfüllen der URLs fertig sind, klicken Sie unten auf der Einstellungsseite auf Änderungen speichern .

Klicken Sie im linken Menübereich des Anwendungs-Dashboards von Auth0 auf Authentication und wählen Sie dann Socials aus . Klicken Sie anschließend auf der Seite mit den Einstellungen für soziale Verbindungen auf die Schaltfläche Verbindung erstellen .

Auth0 neue Einstellungsseite für Social-Login-Anbieter.

Wählen Sie abschließend Ihren bevorzugten Social-Login-Anbieter aus und fügen Sie ihn hinzu.

Eine Liste der von Auth0 unterstützten Social-Login-Anbieter

Konfigurieren Sie Auth0 in Ihrer React-App

Integrieren Sie den Auth0-Authentifizierungsdienst in Ihre React-Anwendung, indem Sie die Anmelde- und Erfolgskomponenten erstellen.

1. Erstellen Sie eine React-Anwendung und richten Sie eine ENV-Datei ein

Erstellen Sie eine React-Anwendung und öffnen Sie dann den Projektordner in Ihrem Code-Editor. Erstellen Sie als Nächstes im Stammverzeichnis Ihres Projektordners eine ENV-Datei, die Ihre Umgebungsvariablen enthält: Ihren Domänennamen und Ihre Client-ID. Melden Sie sich bei Ihrem Auth0-Konto an, kopieren Sie im Dashboard der Anwendung den Domänennamen und die Client-ID und speichern Sie sie wie folgt in Ihrer ENV-Datei:

REACT_APP_AUTH0_DOMAIN= your domain name REACT_APP_AUTH0_CLIENT_ID= your client ID

2. Installieren Sie die erforderlichen Pakete

Führen Sie diesen Befehl auf Ihrem Terminal aus, um die erforderlichen Abhängigkeiten zu installieren:

npm install @auth0/auth0-react

3. Verpacken Sie Ihre App-Komponente mit dem Auth0-Anbieter

Der Auth0-Anbieter verwendet React Context. Auf diese Weise können Sie von der App-Komponente aus auf alle Eigenschaften zugreifen. Der Auth0-Anbieter benötigt drei Parameter: die Clientdomäne, die Client-ID und den Umleitungs-URI.

Öffnen Sie die Datei index.js, löschen Sie den React-Code der Vorlage und fügen Sie den folgenden Code hinzu:

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import{Auth0Provider} from '@auth0/auth0-react';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render( <Auth0Provider domain = {process.env.REACT_APP_AUTH0_DOMAIN} clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID} redirectUri = {window.location.origin} > <App /> </Auth0Provider>, document.getElementById('root') );

Erstellen Sie einen neuen Ordner im /src-Verzeichnis Ihrer React-Anwendung und nennen Sie ihn Seiten. Erstellen Sie in diesem Ordner zwei Dateien: Login.js und Success.js.

Öffnen Sie die Datei login.js und fügen Sie den folgenden Code hinzu. Die Anmeldeseitenkomponente rendert eine Anmeldeschaltfläche.

import React from 'react' import { useAuth0 } from '@auth0/auth0-react';

const Login = () => { const { loginWithRedirect, isAuthenticated } = useAuth0();


    return (isAuthenticated || (
      <button onClick={() => loginWithRedirect()}> Log In</button>
    ))
}

export default Login

Standardmäßig stellt Auth0 eine E-Mail und ein Passwort als Authentifizierungsmethode bereit. Darüber hinaus zeigt Auth0 je nach den von Ihnen ausgewählten Social-Login-Anbietern auch die Anmeldeoption des Anbieters an.

5. Erstellen Sie eine Erfolgsseitenkomponente

Diese Komponente rendert zwei Hauptfunktionen: ein authentifiziertes Benutzerprofil und eine Abmeldeschaltfläche.

Fügen Sie in der Success.js-Datei den folgenden Code hinzu:

import React from 'react' import { useAuth0 } from '@auth0/auth0-react'

const Success = () => { const { user, logout, isAuthenticated } = useAuth0();


    return (isAuthenticated && (
        <div> 
            <h1>User Profile</h1> 
            <img src={user.picture} alt={user.name} /> 
            <h2>{user.name}</h2> 
            <p>{user.email}</p> 
            <button onClick={() => logout()}> Log Out</button> 
        </div>
    ))
}

export default Success

Sobald Sie sich anmelden und von Auth0 authentifiziert werden, leitet Auth0 Sie zurück zu Ihrer App und sendet Nutzlastdaten mit den Benutzerdetails an Ihre App. Sie können diese Daten in Ihrer App verwenden, um benutzerdefinierte Benutzerprofile zu erstellen und Benutzersitzungen zu verwalten. Die User-Eigenschaft des UseAuth-Hooks ermöglicht Ihnen den Zugriff auf bestimmte Benutzerdaten.

Der UseAuth0-Hook bietet auch eine Eigenschaft namens isAuthenticated, mit der Sie die Komponenten bedingt rendern können. Wenn ein Benutzer authentifiziert ist, rendert der Code seine Profildetails und zeigt eine Abmeldeschaltflächenkomponente an.

Wenn dies nicht der Fall ist, rendern Sie die Komponente der Anmeldeschaltfläche. Das bedeutet, dass Sie die Routen nicht basierend auf dem Authentifizierungsstatus eines Benutzers angeben müssen, da diese Eigenschaft diesen Prozess automatisch verwaltet. Auth0 definiert sowohl die Anmelde- als auch die Abmeldelogik und erleichtert Ihnen so die Implementierung der Authentifizierungsfunktion.

Ist der Auth0-Authentifizierungsdienst einen Versuch wert?

Auth0 bietet sofort einsatzbereite Lösungen, die die Authentifizierungsanforderungen Ihrer App verarbeiten. Darüber hinaus bietet der Auth0-Service Unterstützung für Web-, Mobil- und native Entwicklungsplattformen, sodass Sie das Authentifizierungssystem einfach in einen Technologie-Stack Ihrer Wahl integrieren können.