Créez une application React avec l'authentification des utilisateurs en 15 minutes-js tutoriel-php.cn

Créez une application React avec l'authentification des utilisateurs en 15 minutes

Joseph Gordon-Levitt

Libérer： 2025-02-16 11:54:10

original

818 Les gens l'ont consulté

Cet article montre l'intégration du widget de connexion d'Okta dans une application React pour l'authentification des utilisateurs. Le widget, un outil JavaScript, simplifie le processus en tirant parti de l'infrastructure d'Okta.

Build a React App with User Authentication in 15 Minutes

Le tutoriel commence par un projet de base React, ajoutant l'authentification via le widget de connexion OKTA (installé à l'aide de NPM). Il couvre la création d'un composant LoginPage, en configurant une application OpenID Connect dans OKTA et en intégrant le widget.

Le processus comprend le rendu du widget, la vérification de l'état de connexion de l'utilisateur et l'ajout d'un lien de connexion à la barre de navigation. Le composant final LoginPage gère la connexion, la déconnexion et le rendu conditionnel en fonction de l'état de connexion.

Configuration du projet:

Clone Le projet de semences: Commencez par cloner un simple projet de semences React en utilisant Git:
```
git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
cd okta-react-widget-sample
```
Copier après la connexion
Installez le widget: Installez le widget de connexion OKTA via NPM:
```
npm install @okta/okta-signin-widget@2.3.0 --save
```
Copier après la connexion

Ajouter des styles: Incluez le CSS du widget du CDN OKTA dans la section index.html du fichier <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"/>

Copier après la connexion

Build a React App with User Authentication in 15 Minutes

Création du composant LoginPage:

Créez le composant: Créer un fichier LoginPage.js dans ./src/components/auth/. Initialement, c'est un composant simple:
```
import React from 'react';

export default class LoginPage extends React.Component {
  render() {
    return <div>Login Page</div>;
  }
}
```
Copier après la connexion

Ajouter le routage: Importer LoginPage dans ./src/app.js et ajouter un itinéraire:

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

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

Copier après la connexion

Configuration de l'application OKTA: Créez une application OpenID Connect dans la console du développeur OKTA. Réglez l'uri de redirection vers http://localhost:3000.

Build a React App with User Authentication in 15 Minutes

Intégration du widget:

Initialisation du widget: dans LoginPage.js, initialisez le widget oktasignine avec votre OKTA Organization URL et ID client:

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) ...
}

Copier après la connexion

Rendre le widget: Utiliser this.widget.renderEl pour rendre le widget dans un div désigné. Implémentez les méthodes pour vérifier l'état de connexion (componentDidMount), afficher le widget de connexion (showLogin) et gérer la déconnexion (logout). Le composant complet LoginPage.js (avec la gestion des erreurs et la fonctionnalité de connexion / déconnexion) est fourni dans l'article d'origine.
Ajouter un lien de connexion: Ajouter un lien de connexion à votre barre de navigation (par exemple, ./src/components/common/Navigation.js).
Test: Run npm install et npm start. L'application doit désormais afficher le widget de connexion OKTA.

Build a React App with User Authentication in 15 Minutes

Le code complet et fonctionnel et plus de détails sur la gestion de divers scénarios d'authentification (connexion sociale, réinitialisation du mot de passe, etc.) sont disponibles dans l'article d'origine et son référentiel GitHub associé. N'oubliez pas de remplacer les espaces réservés comme {oktaOrgUrl} et {clientId} par vos valeurs de configuration OKTA réelles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!