Erstellen Sie eine React -App mit Benutzerauthentifizierung in 15 Minuten-js-Tutorial-php.cn

Erstellen Sie eine React -App mit Benutzerauthentifizierung in 15 Minuten

Joseph Gordon-Levitt

Freigeben： 2025-02-16 11:54:10

Original

817 Leute haben es durchsucht

Dieser Artikel zeigt, dass das Anmeldewidget von Okta in eine React-Anwendung für die Benutzerauthentifizierung integriert wird. Das Widget, ein JavaScript -Tool, vereinfacht den Prozess durch Nutzung der Infrastruktur von Okta.

Build a React App with User Authentication in 15 Minutes

Das Tutorial beginnt mit einem grundlegenden React-Projekt, wobei die Authentifizierung über das OKTA-Anmelde-Widget (mit NPM installiert) hinzugefügt wird. Es umfasst das Erstellen einer LoginPage -Komponente, das Konfigurieren einer OpenID -Anschlussanwendung in Okta und das Integrieren des Widgets.

Der Prozess beinhaltet das Rendern des Widgets, die Überprüfung des Nutzungsanmeldestatus und das Hinzufügen einer Anmeldeverbindung zur Navigationsleiste. Die endgültige LoginPage -Komponente verwaltet Anmelde-, Abmelden- und bedingte Rendering basierend auf dem Anmeldestatus.

Einrichten des Projekts:

Klon Das Saatgutprojekt: Beginnen Sie mit einem einfachen React -Samenprojekt mit Git:

git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
cd okta-react-widget-sample

Nach dem Login kopieren

Installieren Sie das Widget: Installieren Sie das OKTA-Anmelde-Widget über NPM:
```
npm install @okta/okta-signin-widget@2.3.0 --save
```
Nach dem Login kopieren

Fügen Sie Stile hinzu: Fügen Sie das CSS des Widgets aus dem OKTA -CDN in den Abschnitt Ihrer index.html -Fatei hinzu: <head>:

<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css" type="text/css" rel="stylesheet"/>
<link href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css" type="text/css" rel="stylesheet"/>

Nach dem Login kopieren

Build a React App with User Authentication in 15 Minutes

Erstellen der Anmeldebaukomponente:

Erstellen Sie die Komponente: Erstellen Sie eine LoginPage.js -Datei in ./src/components/auth/. Anfangs ist es eine einfache Komponente:
```
import React from 'react';

export default class LoginPage extends React.Component {
  render() {
    return <div>Login Page</div>;
  }
}
```
Nach dem Login kopieren

Routing hinzufügen: in LoginPage importieren ./src/app.js und fügen Sie eine Route hinzu:

// ... other imports ...
import LoginPage from './components/auth/LoginPage';

// ... within the main route ...
<Route component={LoginPage} path="/login" />

Nach dem Login kopieren

OKTA -Anwendung Setup: Erstellen Sie eine OpenID -Anschlussanwendung in der OKTA -Entwicklerkonsole. Stellen Sie die Umleitungs -URI auf http://localhost:3000.
ein

Build a React App with User Authentication in 15 Minutes

Integrieren Sie das Widget:

Widget -Initialisierung: In LoginPage.js, initialisieren Sie das OktaSignin -Widget mit Ihrer OKTA -Organisations -URL- und Client -ID:

import React from 'react';
import OktaSignIn from '@okta/okta-signin-widget';

export default class LoginPage extends React.Component {
  // ... (constructor, componentDidMount, showLogin, logout methods as described in the original article) ...
}

Nach dem Login kopieren

Rendern des Widgets: Verwenden Sie this.widget.renderEl, um das Widget in einem bestimmten Div zu rendern. Implementieren Sie die Methoden zum Überprüfen des Anmeldestatus (componentDidMount), das Anmeldetwidget (showLogin) und das Logout (🎜>). Die vollständige logout -Komponente (mit Fehlerbehandlung und Anmeldung/Abmeldefunktion) wird im ursprünglichen Artikel angegeben. LoginPage.js
Anmeldeverbindung hinzufügen: Fügen Sie Ihrer Navigationsleiste einen Anmeldeverbindungslink hinzu (z. B. ./src/components/common/Navigation.js).
testen: run npm install und npm start. Die Anwendung sollte nun das Okta-Anmelde-Widget anzeigen.

Build a React App with User Authentication in 15 Minutes

Der vollständige, funktionale Code und weitere Details zum Umgang mit verschiedenen Authentifizierungsszenarien (Social Login, Kennwortreset usw.) sind im ursprünglichen Artikel und in seinem zugehörigen Github -Repository verfügbar. Denken Sie daran, Platzhalter wie {oktaOrgUrl} und {clientId} durch Ihre tatsächlichen Okta -Konfigurationswerte zu ersetzen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine React -App mit Benutzerauthentifizierung in 15 Minuten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!