Cet article a été initialement publié sur le blog Okta Developer. Merci de soutenir les partenaires qui rendent le point de point possible.
Les internautes d'aujourd'hui s'attendent à une expérience personnalisée. Les développeurs doivent apprendre à développer des sites Web qui fournissent cette expérience personnalisée tout en gardant les informations de leur utilisateur privées. Les applications Web modernes ont également tendance à avoir une API côté serveur et une interface utilisateur côté client. Il peut être difficile de faire prendre conscience les deux extrémités de l'utilisateur actuellement connecté. Dans ce didacticiel, je vous guiderai dans la configuration d'une API de nœud qui alimente une interface utilisateur React et créer une inscription à l'utilisateur qui maintient les informations de l'utilisateur privées et personnelles.
Dans ce tutoriel, je n'utiliserai aucune bibliothèque de gestion d'État comme Redux ou ReduxThunk. Dans une application plus robuste, vous voudrez probablement le faire, mais il sera facile de câbler Redux et Reduxthunk, puis d'ajouter les instructions de récupération utilisées ici comme Thunks. Par souci de simplicité et pour garder cet article axé sur l'ajout de la gestion des utilisateurs, j'ajouterai des instructions de récupération dans des fonctions composantsDidMount.
Pour configurer l'application de base, assurez-vous que ces outils de base sont installés:
Vous aurez également besoin d'un compte de développeur OKTA.
Pour installer le nœud et le npm, vous pouvez suivre les instructions de votre système d'exploitation sur https://nodejs.org/en/.
Ensuite, installez simplement les deux packages NPM avec la ligne de commande NPM:
npm i -g create-react-app express-generator
Maintenant, vous êtes prêt à configurer la structure d'application de base.
Accédez au dossier où vous souhaitez que votre application vive et créez un nouveau dossier pour cela:
npm i -g create-react-app express-generator
Cela créera deux dossiers dans le dossier d'adhésion appelée API et client, avec une application NodeJS et Express dans le dossier API et une application REACT de base dans le dossier client. Ainsi, votre structure de dossier ressemblera à:
Pour faciliter cette partie suivante, ouvrez deux terminaux ou onglets de terminal; L'un à l'API du dossier de l'application Express et l'autre au client du dossier React App.
Par défaut, l'application React et l'application de nœud s'exécuteront toutes deux sur le port 3000 en développement, vous devrez donc faire fonctionner l'API sur un port différent, puis le proxy dans l'application client.
Dans le dossier de l'API, ouvrez le fichier / bin / www et modifiez le port que l'API s'exécutera sur 3001.
mkdir MembershipSample cd MembershipSample express api create-react-app client
puis configurez le proxy de l'API dans l'application client afin que vous puissiez toujours appeler / API / {Resource} et le faire proxir du port 3000 au port 3001. Dans le fichier client / package.json, ajoutez le proxy Réglage ci-dessous Nom:
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
Enfin, n'oubliez pas d'exécuter l'installation de NPM ou l'installation du fil pour chaque sous-dossier (API et client) pour vous assurer que les dépendances sont installées.
Vous pouvez désormais exécuter les deux applications en exécutant NPM Start ou YARN Start dans les dossiers appropriés pour l'API et l'application client.
Si vous ne l'avez pas déjà fait, créez un compte de développeur gratuit pour toujours sur https://developer.okta.com/signup/.
Une fois que vous vous êtes inscrit, cliquez sur les applications dans le menu supérieur. Puis cliquez sur le bouton Ajouter de l'application.
Vous serez ensuite emmené à l'assistant de création d'applications. Choisissez le bouton d'application à une seule page et cliquez sur Suivant en bas.
Sur l'écran suivant, vous verrez les paramètres par défaut fournis par le modèle d'application à une seule page. Changez le nom de l'application en quelque chose de plus descriptif, comme «application d'adhésion». En outre, modifiez les URI de base et les paramètres d'URI Redirection de connexion pour utiliser le port 3000, car c'est là que votre application sera en cours d'exécution. Le reste des paramètres par défaut est bien.
puis cliquez sur le bouton Terminé en bas.
Une fois l'application créée, sélectionnez-la dans la liste des applications et cliquez sur l'onglet Général pour afficher les paramètres généraux de votre application.
En bas, vous verrez un paramètre d'identification client (le vôtre ne sera pas flou, évidemment). Copiez-le à utiliser dans votre application React. Vous aurez également besoin de votre URL de l'organisation OKTA, que vous pouvez trouver en haut à gauche de la page de tableau de bord. Il ressemblera probablement à quelque chose comme «https://dev-xxxxxx.oktapreview.com».
Maintenant que l'application est créée, ajoutez l'authentification à l'aide d'OKTA en ajoutant quelques dépendances NPM. Depuis le dossier client:
npm i -g create-react-app express-generator
ou, si vous utilisez le gestionnaire de package de fils:
mkdir MembershipSample cd MembershipSample express api create-react-app client
Ajoutez un fichier au dossier client / src appelé app.config.js. Le contenu du fichier est:
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
Ensuite, configurez le fichier index.js pour utiliser le routeur React et le SDK React d'Okta. Lorsque le fichier index.js est terminé, il ressemblera à ceci:
"name": "client", "proxy": "http://localhost:3001"
Une fois terminé, vous aurez ajouté le composant Browserrouter (aliasé comme "routeur") du routeur React, et le composant de sécurité du SDK React d'Okta. Également que le fichier app.config.js est importé comme «config» afin que vous puissiez utiliser les valeurs de configuration dans les propriétés requises par le composant de sécurité.
Vous aurez également entouré le composant de l'application avec le routeur et les composants de sécurité, passant dans les valeurs spécifiées. La méthode OnAuthRequired, dit simplement au SDK React d'Okta que lorsque quelqu'un essaie d'accéder à un itinéraire sécurisé et qu'ils ne sont pas connectés, redirigez-les vers la page de connexion.
Tout le reste proviendra de la commande create-react-app que vous avez exécutée précédemment.
Avant d'ajouter des itinéraires à l'application React, créez des composants pour gérer les itinéraires que vous souhaitez ajouter.
Ajoutez un dossier Composants au dossier client / src. C'est là que tous vos composants vivront et le moyen le plus simple de les organiser. Créez ensuite un dossier domestique pour les composants de votre page d'accueil. Pour l'instant, il n'y en aura qu'un, mais il peut y avoir plus de composants utilisés uniquement pour la page d'accueil plus tard. Ajoutez un fichier homepage.js au dossier avec le contenu suivant:
npm install @okta/okta-react react-router-dom --save
C'est tout ce dont vous avez vraiment besoin pour la page d'accueil pour le moment. Le point le plus important est de faire du composant de page d'accueil un type de classe. Même si pour l'instant, il ne contient qu'une seule balise H1, il est censé être une «page», ce qui signifie qu'il contiendra probablement d'autres composants, il est donc important que ce soit un composant de conteneur.
Ensuite, créez un dossier Auth dans les composants. C'est là que tous les composants qui ont à voir avec l'authentification vivront. Dans ce dossier, créez un fichier loginform.js.
La première chose à noter est que vous utiliserez le composant d'ordre supérieur WithAuth du SDK React d'Okta pour envelopper l'intégralité du formulaire de connexion. Cela ajoute un accessoire au composant appelé Auth, ce qui permet d'accéder à des choses comme les fonctions isauthentifiées et redirigées sur ce composant d'ordre supérieur.
Le code du composant Loginform est le suivant:
npm i -g create-react-app express-generator
L'autre chose à noter ici est la bibliothèque OktaAuth importée. Il s'agit de la bibliothèque de base pour faire des choses comme la signature de l'utilisation de l'application OKTA que vous avez créée précédemment. Vous remarquerez un objet OktaAuth créé dans le constructeur qui obtient une propriété de BustainUl qui lui est transmise. Il s'agit de l'URL pour l'émetteur qui se trouve dans votre fichier app.config.js. Le composant Loginform est destiné à être contenu dans un autre composant, vous devrez donc créer un fichier Loginpage.js pour contenir ce composant. Vous utiliserez à nouveau le composant d'ordre supérieur WithAuth pour accéder à la fonction isAuthenticated. Le contenu de LoginPage.js sera:
mkdir MembershipSample cd MembershipSample express api create-react-app client
Bien que ce soit un peu moins que ce qui est dans le composant de la forme de connexion, il y a encore des pièces importantes à souligner ici.
Encore une fois, vous utilisez le composant d'ordre supérieur WithAuth. Ce sera un thème récurrent pour chaque composant qui doit utiliser le processus d'authentification ou d'autorisation d'Okta. Dans ce cas, il est principalement utilisé pour obtenir la fonction isauthentifiée. La méthode CheckAuthentication () est exécutée dans le constructeur et dans la méthode de cycle de vie composantdidupdate pour s'assurer que lorsque le composant est créé, il est vérifié et chaque modification ultérieure du composant vérifie à nouveau.
Lorsque IsAuthenticated Renvoie True, alors il est défini dans l'état du composant. Il est ensuite vérifié dans la méthode de rendu pour décider d'affichage du composant de connexion, ou de rediriger vers la page de profil de l'utilisateur, un composant que vous créerez ensuite.
Créez maintenant le composant ProfilePage.js dans le dossier AUTH. Le contenu du composant est:
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
Le composant WithAuth vous donne ici accès à la fonction GetUser. Ici, il a été appelé à partir de ComponentDidMount qui est un endroit courant pour tirer des données qui seront utilisées dans la méthode de rendu. La seule chose étrange que vous pourriez voir est la première ligne de la méthode de rendu qui ne rend rien jusqu'à ce qu'un utilisateur soit renvoyé de l'appel asynchrone GetUser. Une fois qu'il y a un utilisateur dans l'état, il rend alors le contenu de profil, qui dans ce cas affiche simplement le nom de l'utilisateur actuellement connecté.
Ensuite, vous ajouterez un composant d'enregistrement. Cela pourrait être fait comme le formulaire de connexion, où il existe un composant de connexion qui est contenu dans un composant de connexion. Afin de démontrer une autre façon de l'afficher, vous allez simplement créer un composant RegistrationForm qui sera le composant de conteneur principal. Créez un fichier d'enregistrement formel.js dans le dossier AUTH avec le contenu suivant:
npm i -g create-react-app express-generator
Ce composant ressemble beaucoup au composant Loginform à l'exception qu'il appelle l'API Node (que vous construirez dans un instant) qui gérera la réalisation. Une fois l'enregistrement terminé par l'API du nœud, le composant enregistre l'interrupteur nouvellement créé et la méthode de rendu (lorsqu'il voit un jeton de session dans l'état) redirige l'utilisateur vers la page d'accueil de l'application.
Vous pouvez également remarquer la propriété SessionToken sur l'état du composant. Ceci est défini par la fonction handlesubmit () dans le but de gérer la connexion si l'enregistrement est réussi. Ensuite, il est également utilisé par la méthode Render () pour effectuer la redirection une fois la connexion terminée, et un jeton a été reçu.
Tout d'abord, ajoutez un composant de navigation pour les itinéraires que vous ajouterez. Dans le dossier client / src / composants, ajoutez un dossier appelé partagé. Ce sera l'endroit où tous les composants utilisés à plusieurs endroits de l'application seront situés. Dans ce nouveau dossier, ajoutez un fichier appelé navigation.js. Le fichier contient un composant de base avec des liens vers toutes les pages de l'application.
Vous devrez envelopper le composant de navigation dans le composant d'ordre supérieur WithAuth. De cette façon, vous pouvez vérifier s'il existe un utilisateur authentifié et afficher le bouton Connexion ou déconnexion le cas échéant.
mkdir MembershipSample cd MembershipSample express api create-react-app client
Maintenant que vous disposez de composants pour gérer tous les itinéraires, créez les itinéraires pour les accompagner. Mettez à jour le fichier app.js afin que la version finale ressemble à:
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
Il y a quelques choses à noter ici. L'importation des composants SecureRoute et ImplicitCallback du SDK React d'Okta. Le composant ImplicitCallback gère le rappel du flux d'authentification pour s'assurer qu'il existe un point de terminaison dans l'application React pour attraper l'appel de retour d'OKTA. Le composant SecureRoute vous permet de sécuriser n'importe quel itinéraire et de rediriger les utilisateurs non authentifiés vers la page de connexion.
Le composant d'itinéraire du routeur React fait exactement ce à quoi vous vous attendez: il faut un chemin vers lequel l'utilisateur a navigué et définit un composant pour gérer cette voie. Le composant SecureRoute effectue un chèque supplémentaire pour s'assurer que l'utilisateur est connecté avant d'autoriser l'accès à cette voie. S'ils ne le sont pas, la fonction ononthrequired dans index.js sera appelée pour forcer l'utilisateur à la page de connexion.
La seule autre chose vraiment étrange ici est l'itinéraire pour le chemin de connexion. Au lieu de simplement définir un composant pour gérer le chemin, il exécute une méthode de rendu qui rend le composant LoginPage et définit la baseurl à partir de la configuration.
Vous vous souvenez peut-être que l'API du nœud fait l'enregistrement, vous devrez donc ajouter le point de terminaison à l'application Node pour gérer cet appel. Pour ce faire, vous devrez ajouter le SDK du nœud d'Okta. Du dossier `API` RUN:
npm i -g create-react-app express-generator
Ensuite, vous modifierez le fichier utilisateur.js en API / Routes. Le fichier ressemblera à:
mkdir MembershipSample cd MembershipSample express api create-react-app client
Les plus grandes choses à noter ici sont l'importation de la lib / oktaclient (que vous ajouterez dans un instant), l'appel à la fonction CreateUser sur Oktaclient et la forme de l'objet NewUser. La forme de l'objet NewUser est documentée dans la documentation de l'API d'Okta.
Pour que votre application de nœud passe des appels à votre application OKTA, il aura besoin d'un jeton API. Pour en créer un, accédez à votre tableau de bord du développeur Okta, survolez l'option de menu API et cliquez sur les jetons.
à partir de là, cliquez sur Créer un jeton. Donnez au jeton un nom comme «adhésion» et cliquez sur Créer un jeton.
Copiez le jeton dans un emplacement sûr pour une utilisation plus tard.
Créez un fichier appelé oktaclient.js dans un nouveau dossier appelé lib dans l'application de nœud. Le fichier configurera un objet client à partir du SDK du nœud d'Okta à l'aide du jeton API que vous venez de créer comme ceci:
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);
Dans le fichier app.js à la racine de l'application de nœud, mettez à jour le fichier pour que tous les appels sentent vers / api /
"name": "client", "proxy": "http://localhost:3001"
Si votre application de nœud est toujours en cours d'exécution, vous devrez arrêter l'application (avec CTRL C) et la réaffecter (avec le début NPM) pour que les mises à jour prennent effet.
Même si le site a encore besoin d'un amour de style sérieux, vous pourrez désormais enregistrer les utilisateurs, vous connecter avec l'utilisateur nouvellement créé et obtenir le profil de l'utilisateur connecté à l'affichage sur la page de profil!
Si vous souhaitez en savoir plus sur les technologies utilisées dans ces articles, vous pouvez consulter la documentation pour:
également, consultez d'autres articles utilisant Okta pour l'authentification:
Comme toujours, si vous avez des questions, des commentaires ou des préoccupations concernant l'article, vous pouvez m'envoyer un e-mail à lee.brandt@okta.com ou poster vos questions sur les forums du développeur. Pour plus d'articles et de tutoriels, suivez-nous sur Twitter @oktadev.
L'implémentation de l'authentification OKTA dans une application React implique plusieurs étapes. Tout d'abord, vous devez installer Okta React SDK à l'aide de NPM ou de fil. Ensuite, vous devez créer une application OKTA dans votre compte Okta Developer. Après avoir créé l'application, vous recevrez un ID client, que vous utiliserez pour configurer le SDK Okta React dans votre application. Vous devrez également configurer des itinéraires pour la connexion, la déconnexion et les pages sécurisées à l'aide des composants SDK Okta React. Enfin, vous pouvez utiliser le crochet UseOktaAuth pour accéder à l'état d'authentification et aux méthodes de vos composants.
Node.js joue Un rôle crucial dans la création d'enregistrement des utilisateurs avec Okta. Il agit comme l'environnement côté serveur où vous pouvez configurer et exécuter votre application. Vous pouvez l'utiliser pour créer un serveur, définir des itinéraires et gérer les demandes et les réponses. Dans le contexte d'Okta, vous pouvez utiliser Node.js pour interagir avec les API OKTA pour les tâches telles que la création d'utilisateurs, la vérification des informations d'identification et la gestion des séances.
sécuriser votre application React avec OKTA implique l'utilisation du SDK Okta React pour ajouter des fonctionnalités d'authentification et d'autorisation à votre application. Vous pouvez utiliser le composant de sécurité pour envelopper votre application et lui fournir le contexte d'authentification nécessaire. Vous pouvez également utiliser le composant SecureRoute pour protéger certaines itinéraires et vous assurer que seuls les utilisateurs authentifiés peuvent y accéder. De plus, vous pouvez utiliser le crochet useoktaauth pour accéder à l'état d'authentification et aux méthodes de vos composants.
Lors de la mise en œuvre de l'authentification OKTA, vous pouvez rencontrer divers Des erreurs, telles que les informations d'identification non valides, les erreurs de réseau ou les erreurs de serveur. Vous pouvez gérer ces erreurs en utilisant des blocs de capture d'essai dans votre code. Dans le bloc Catch, vous pouvez enregistrer le message d'erreur et fournir un message convivial à l'utilisateur. Vous pouvez également utiliser l'hélice ONERROR du composant de sécurité pour gérer les erreurs au niveau global.
Tester votre implémentation d'authentification Okta impliquent de vérifier si la connexion , la déconnexion et les itinéraires sécurisés fonctionnent comme prévu. Vous pouvez le faire manuellement en naviguant vers ces itinéraires et en vérifiant le comportement. Vous pouvez également rédiger des tests automatisés à l'aide de bibliothèques de tests telles que la bibliothèque de tests et de test React. Ces tests peuvent simuler les actions de l'utilisateur et vérifier si l'état d'authentification change correctement.
Vous pouvez personnaliser la page de connexion OKTA en accédant à la section "Personnalisation" dans votre tableau de bord du développeur Okta. Ici, vous pouvez modifier le logo, les couleurs et le texte de la page de connexion. Vous pouvez également utiliser le widget de connexion OKTA, une bibliothèque JavaScript qui offre une expérience de connexion entièrement personnalisable.
Okta fournit des SDK pour divers frontend Frameworks, y compris Angular et Vue. Ces SDK fonctionnent de manière similaire au SDK React et vous permettent d'ajouter des fonctionnalités d'authentification et d'autorisation à vos applications. Vous pouvez installer le SDK à l'aide de NPM ou de fil, le configurer avec vos détails d'application Okta et utiliser ses composants et crochets dans votre application.
Okta fournit des bibliothèques et des SDK pour diverses technologies backend, notamment Java, .NET et PHP. Ces bibliothèques vous permettent d'interagir avec les API OKTA à partir de votre code côté serveur. Vous pouvez les utiliser pour créer des utilisateurs, vérifier les informations d'identification, gérer les sessions, et plus encore.
Les problèmes de dépannage avec l'authentification OKTA impliquent la vérification des messages d'erreur, en regardant aux demandes et réponses du réseau, et examinant les journaux OKTA. Les messages d'erreur peuvent vous donner des indices sur ce qui n'a pas fonctionné. Les demandes et les réponses du réseau peuvent vous montrer les données envoyées et reçues d'Okta. Les journaux Okta peuvent fournir des informations détaillées sur les événements d'authentification.
Vous pouvez en savoir plus sur Okta et ses fonctionnalités en visitant le site Web du développeur Okta . Ici, vous pouvez trouver des guides, des tutoriels, des références API, etc. Vous pouvez également rejoindre les forums Okta Developer pour poser des questions et partager des connaissances avec d'autres développeurs.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
