Erstellen Sie eine React -App mit Benutzerauthentifizierung in 15 Minuten

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.

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:

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

   <code class="language-bash">git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
   cd okta-react-widget-sample</code>

2. Installieren Sie das Widget: Installieren Sie das OKTA-Anmelde-Widget über NPM:

   <code class="language-bash">npm install @okta/okta-signin-widget@2.3.0 --save</code>

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

   <code class="language-html"><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"></code>

Erstellen der Anmeldebaukomponente:

1. Erstellen Sie die Komponente: Erstellen Sie eine LoginPage.js -Datei in ./src/components/auth/. Anfangs ist es eine einfache Komponente:

   <code class="language-javascript">import React from 'react';
   
   export default class LoginPage extends React.Component {
     render() {
       return <div>Login Page</div>;
     }
   }</code>

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

   <code class="language-javascript">// ... other imports ...
   import LoginPage from './components/auth/LoginPage';
   
   // ... within the main route ...
   <route component="{LoginPage}" path="/login"></route></code>

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

   ein

Integrieren Sie das Widget:

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

   <code class="language-javascript">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) ...
   }</code>

2. 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

3. Anmeldeverbindung hinzufügen: Fügen Sie Ihrer Navigationsleiste einen Anmeldeverbindungslink hinzu (z. B. ./src/components/common/Navigation.js).

4. testen: run npm install und npm start. Die Anwendung sollte nun das Okta-Anmelde-Widget anzeigen.

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!