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 zur Handhabung bereitstellt Benutzerauthentifizierung und Autorisierung in Ihren Apps.
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 Fügen Sie auch andere Optionen wie Social Login über einen Anbieter wie Google und Multi-Faktor hinzu Authentifizierung.
Der Vorteil dieser Art der Authentifizierung besteht darin, dass Sie sich nicht mit der Identität auskennen müssen Protokolle wie OAuth 2.0 oder OpenID Connect, die häufig zum Erstellen einer sicheren Authentifizierung verwendet werden Systeme.
Erstellen Sie ein neues Projekt in der Auth0-Entwicklerkonsole
Um zu beginnen, müssen Sie sich zunächst für ein anmelden Auth0 Konto. Navigieren Sie nach der Anmeldung zu Ihrem Dashboard und klicken Sie darauf Anwendung erstellen um die Einstellungen des Authentifizierungsprojekts 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 und wählen Sie aus Einzelseiten-Webanwendungen, dann klicken Sie auf Speichern.
Wählen Sie als Nächstes aus Reagieren aus der Liste der von Auth0 unterstützten Technologien.
Konfigurieren Sie die URIs der Anwendung
Nachdem Sie Ihre Anwendung erstellt und die erforderlichen Einstellungen konfiguriert haben, klicken Sie im Dashboard Ihrer Anwendung auf Einstellungen Registerkarte, 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.
Für die lokale Entwicklung können Sie verwenden http://localhost: 3000-URL. Sobald Sie Ihren Code jedoch in die Produktion übertragen, müssen Sie Ihre Domänen-URLs angeben.
Wenn Sie mit dem Ausfüllen der URLs fertig sind, fahren Sie fort und klicken Sie Änderungen speichern unten auf der Einstellungsseite.
Legen Sie Ihre bevorzugten Social-Login-Anbieter fest
Klicken Sie im linken Menübereich des Anwendungs-Dashboards von Auth0 auf Authentifizierung, dann auswählen Soziales. Klicken Sie anschließend auf die Verbindung herstellen Schaltfläche auf der Seite mit den Einstellungen für soziale Verbindungen.
Wählen Sie abschließend Ihren bevorzugten Social-Login-Anbieter aus und fügen Sie ihn hinzu.
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= Ihr Domänenname
REACT_APP_AUTH0_CLIENT_ID= Ihre Client-ID2. 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-react3. Umschließen 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:
importieren Reagieren aus'reagieren';
importieren ReactDOM aus'react-dom/client';
importieren App aus'./App';
importieren{Auth0Provider} aus'@auth0/auth0-reagieren';konst root = ReactDOM.createRoot(dokumentieren.getElementById('Wurzel'));
root.render(
domain = {prozess.env. REACT_APP_AUTH0_DOMAIN}
clientId = {prozess.env. REACT_APP_AUTH0_CLIENT_ID}
UmleitungUri = {Fenster.location.origin}
>
</Auth0Provider>, document.getElementById('root')
);
4. Erstellen Sie eine Anmeldeseitenkomponente
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.
importieren Reagieren aus'reagieren'
importieren { useAuth0 } aus'@auth0/auth0-reagieren';konst Einloggen = () => {
konst { loginWithRedirect, isAuthenticated } = useAuth0();zurückkehren (ist authentifiziert || (
ExportStandard Anmeldung
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:
importieren Reagieren aus'reagieren'
importieren { useAuth0 } aus'@auth0/auth0-reagieren'konst Erfolg = () => {
konst {Benutzer, Abmeldung, isAuthenticated} = useAuth0();zurückkehren ( ist authentifiziert && (
Benutzerprofil</h1>
{Benutzername}</h2>
{Benutzer.E-Mail}</p>
ExportStandard Erfolg
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 für die 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.