Erstellen Sie die Benutzerregistrierung mit Node, React und Okta

Dieser Artikel wurde ursprünglich im Okta Developer Blog veröffentlicht. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Die heutigen Internetnutzer erwarten eine personalisierte Erfahrung. Entwickler müssen lernen, Websites zu entwickeln, die diese personalisierte Erfahrung bieten und gleichzeitig die Informationen ihres Benutzers privat halten. Moderne Webanwendungen haben auch tendenziell über eine serverseitige API und eine clientseitige Benutzeroberfläche. Es kann schwierig sein, beide Ziele auf den derzeit angemeldeten Benutzer aufmerksam zu machen. In diesem Tutorial werde ich Sie durch die Einrichtung einer Knoten -API führen, die eine React -Benutzeroberfläche füttert, und eine Benutzerregistrierung erstellt, die die Informationen des Benutzers privat und persönlich hält.

In diesem Tutorial verwende ich keine staatlichen Verwaltungsbibliotheken wie Redux oder ReduxHunk. In einer robusteren Anwendung möchten Sie dies wahrscheinlich tun, aber es ist einfach, Redux und ReduxHunk zu verkaufen und dann die hier verwendeten Fetch -Anweisungen als Ihre Thunks hinzuzufügen. Um der Einfachheit und um diesen Artikel auf das Hinzufügen von Benutzerverwaltung zu halten, füge ich Fetch -Anweisungen in KomponentDidmount -Funktionen hinzu.

Key Takeaways

• vereinfachtes Setup: Einrichten der Benutzerregistrierung mit Knoten, React und Okta erfordert keine staatlichen Verwaltungsbibliotheken wie Redux, Vereinfachung des anfänglichen Entwicklungsprozesses.
• Praktische Integration: Das Tutorial bietet einen praktischen Ansatz zur Integration von Okta zur Authentifizierung in einer React-Anwendung, wobei die Verwendung von Oktas React SDK- und React-Router verwendet wird.
• Codeorganisation: Die Struktur der Anwendung trennt die Bedenken angemessen mit unterschiedlichen Ordnern für API- und Kundenseiten, was die Wartbarkeit verbessert.
• sichere Benutzerauthentifizierung: OKTA wird verwendet, um die Benutzerauthentifizierung sicher zu verarbeiten, um sicherzustellen, dass Benutzeranmeldeinformationen sicher und effizient verwaltet werden.
• Komponentenbasierte Struktur: Die komponentenbasierte Architektur von React wird genutzt, um die Benutzeroberfläche mit separaten Komponenten für Anmeldung, Registrierung und Benutzerprofile zu organisieren.
• umfassendes Tutorial: Die Anleitung deckt von der grundlegenden Setup zum erweiterten Benutzerhandling ab und bietet ein gründliches Verständnis für das Erstellen eines vollwertigen Benutzerregistrierungssystems mit Knoten, React und Okta.

Installieren Sie den Knoten und reagieren Sie die Voraussetzungen

Um die Basisanwendung einzurichten, stellen Sie sicher, dass diese grundlegenden Tools installiert sind:

• Knoten (8)
• npm (5)
• create-react-App (NPM-Paket)
• Express-Generator (NPM-Paket)

Sie benötigen auch ein Okta -Entwicklerkonto.

Um Knoten und NPM zu installieren, können Sie die Anweisungen für Ihr Betriebssystem unter https://nodejs.org/en/.

installieren Sie einfach die zwei NPM -Pakete mit der Befehlszeile NPM:

npm i -g create-react-app express-generator

Jetzt können Sie die grundlegende Anwendungsstruktur einrichten.

Gerüste die Basisanwendung

Gehen Sie in den Ordner, in dem Ihre Anwendung lebt und einen neuen Ordner dafür erstellen soll:

npm i -g create-react-app express-generator

Erstellt zwei Ordner im Ordner "API" und "Client" mit einem NodeJS und Express -Anwendung im API -Ordner und einer Basisreakt -Anwendung im Client -Ordner. Ihre Ordnerstruktur sieht also aus wie:

• Mitgliedschaftsprobe
  • api
  • client

Um diesen nächsten Teil einfacher zu machen, öffnen Sie zwei Klemmen oder Terminal -Registerkarten. eine zur API der Express -App -Ordner und die andere zum React App Ordner Client.

standardmäßig werden die React -App und die Knoten -App in der Entwicklung von Port 3000 ausgeführt, sodass Sie die API auf einem anderen Port ausführen und sie dann in der Client -App proxy ausführen müssen.

Öffnen Sie im API -Ordner die Datei /bin /www und ändern Sie den Port Die API wird auf 3001 ausgeführt.

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

Richten Sie dann den Proxy für die API in der Client -Anwendung ein, damit Sie weiterhin/api/{Ressource} aufrufen und von Port 3000 zu Port 3001 proxiert werden können. Fügen Sie in der Datei client/package.json den Proxy hinzu Einstellung unten Name:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Vergessen Sie zuletzt nicht, die NPM -Installation oder Garn -Installation für jeden Unterordner (API und Client) auszuführen, um sicherzustellen, dass die Abhängigkeiten installiert sind.

Sie können jetzt beide Anwendungen ausführen, indem Sie NPM -Start oder Garnstart in den entsprechenden Ordnern für die API und die Client -Anwendung ausführen.

Fügen Sie eine Okta -Anwendung

Wenn Sie dies noch nicht getan haben, erstellen Sie ein kostenloses Forever -Entwicklerkonto unter https://developer.okta.com/signup/.

Sobald Sie sich registriert haben, klicken Sie im oberen Menü auf Anwendungen. Klicken Sie dann auf die Schaltfläche Anwendung hinzufügen.

Sie werden dann zum Assistenten der Anwendungserstellung gebracht. Wählen Sie die einseitige App-App-Schaltfläche und klicken Sie unten auf Weiter.

Im nächsten Bildschirm sehen Sie die Standardeinstellungen, die von der einseitigen Anwendungsvorlage bereitgestellt werden. Ändern Sie den Namen der Anwendung in etwas Beschreibenderes wie „Mitgliedsanwendung“. Ändern Sie auch die Basis -URIs und die Einstellungen für Anmeldungsumleitungen zur Verwendung von Port 3000, da Ihre Anwendung dort ausgeführt wird. Der Rest der Standardeinstellungen ist in Ordnung.

dann klicken Sie unten auf die Schaltfläche Fertig.

Sobald die Anwendung erstellt wurde, wählen Sie sie aus der Anwendungsliste aus und klicken Sie auf die Registerkarte Allgemein, um die allgemeinen Einstellungen für Ihre Anwendung anzuzeigen.

unten sehen Sie eine Client -ID -Einstellung (Ihre wird offensichtlich nicht verschwommen). Kopieren Sie dies, um sie in Ihrer React -Anwendung zu verwenden. Sie benötigen auch Ihre Okta -Organisations -URL, die Sie oben links auf der Dashboard -Seite finden. Es wird wahrscheinlich so aussehen wie "https://dev-xxxxxx.oktapreview.com".

Authentifizierung zur ReactJS -Anwendung

Nachdem die Anwendung erstellt wird, fügen Sie die Authentifizierung mit OKTA hinzu, indem Sie einige NPM -Abhängigkeiten hinzufügen. Aus dem Client -Ordner Ausführen:

npm i -g create-react-app express-generator

oder, wenn Sie den Garn -Paket -Manager verwenden:

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

Fügen Sie dem Client/SRC -Ordner app.config.js eine Datei hinzu. Der Inhalt der Datei ist:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Richten Sie dann die Index.js -Datei ein, um den React -Router und den React SDK von Okta zu verwenden. Wenn die Datei index.js abgeschlossen ist, sieht sie wie folgt aus:

"name": "client",
"proxy": "http://localhost:3001"

Sobald Sie fertig sind, haben Sie die BrowSerritter -Komponente (alias als „Router“) aus dem React -Router und die Sicherheitskomponente aus dem React SDK von Okta hinzugefügt. Auch dass die Datei app.config.js als „Konfiguration“ importiert wird, damit Sie die Konfigurationswerte in den von der Sicherheitskomponente erforderlichen Eigenschaften verwenden können.

Sie haben auch die App -Komponente mit den Router- und Sicherheitskomponenten umgeben und die angegebenen Werte übergeben. Die OnAuthroque -Methode sagt einfach mit Reactas React SDK, dass, wenn jemand versucht, auf eine sichere Route zuzugreifen und nicht angemeldet ist, sie auf die Anmeldeseite umleiten.

Alles andere wird aus dem Befehl create-React-App stammen, den Sie zuvor ausgeführt haben.

Seiten der ReactJS -App

Erstellen Sie vor dem Hinzufügen von Routen zur React -App einige Komponenten, um die Routen zu verarbeiten, die Sie hinzufügen möchten.

Fügen Sie dem Client/SRC -Ordner einen Komponentenordner hinzu. Hier leben alle Ihre Komponenten und der einfachste Weg, sie zu organisieren. Erstellen Sie dann einen Home -Ordner für Ihre Startseitenkomponenten. Im Moment wird es nur einen geben, aber es gibt möglicherweise mehr Komponenten, die später nur für die Startseite verwendet werden. Fügen Sie dem Ordner eine Homepage.js -Datei mit den folgenden Inhalten hinzu:

npm install @okta/okta-react react-router-dom --save

Dies ist alles, was Sie im Moment wirklich für die Startseite brauchen. Der wichtigste Punkt ist, die Homepage -Komponente zu einem Klassentyp zu machen. Obwohl es im Moment nur ein einzelnes H1 -Tag enthält, soll es eine „Seite“ sein, was bedeutet, dass es wahrscheinlich andere Komponenten enthält. Daher ist es wichtig, dass es sich um eine Containerkomponente handelt.

Erstellen Sie als nächstes einen Autor -Ordner in Komponenten. Hier leben alle Komponenten, die mit Authentifizierung zu tun haben. Erstellen Sie in diesem Ordner eine loginForm.js -Datei.

Das erste, was zu beachten ist, ist, dass Sie die Komponente mit Aauth-ATAuth aus Oktas React SDK verwenden, um das gesamte Anmeldeformular zu wickeln. Dies fügt der Komponente, die als Auth bezeichnet wurde

npm i -g create-react-app express-generator

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

Wenn Isauthenticated true zurückgibt, wird es in den Zustand der Komponente eingestellt. Es wird dann in der Render -Methode überprüft, um zu entscheiden, ob die Anmeldungskomponente angezeigt werden soll, oder um auf der Profilseite des Benutzers umzuleiten, eine Komponente, die Sie als nächstes erstellen.

Erstellen Sie nun die ProfilePage.js -Komponente im Auth -Ordner. Der Inhalt der Komponente ist:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

npm i -g create-react-app express-generator

Diese Komponente ähnelt der Anmeldungskomponente mit der Ausnahme, dass sie die Knoten -API (die Sie in einem Moment erstellen), mit der die Registrierung durchgeführt wird. Sobald die Registrierung durch die Knoten -API abgeschlossen ist, protokolliert die Komponenten den neu erstellten Benutzer in und die Render -Methode (wenn sie im Status ein Sitzungs -Token sieht) leitet den Benutzer auf die Startseite der Anwendung um.

Sie können auch die SessionToken -Eigenschaft im Zustand der Komponente bemerken. Dies wird durch die Funktion "HandlesUbmit ()) festgelegt, um die Anmeldung zu behandeln, wenn die Registrierung erfolgreich ist. Dann wird es auch von der Render () -Methode verwendet, um die Umleitung durchzuführen, sobald das Login abgeschlossen ist, und ein Token empfangen wurde.

Routen zur React App

Fügen Sie zuerst eine Navigationskomponente für die Routen hinzu, die Sie hinzufügen. Fügen Sie im Client/SRC/Komponenten -Ordner einen Ordner mit dem Namen Shared hinzu. Dies ist der Ort, an dem alle Komponenten, die an mehreren Stellen in der Anwendung verwendet werden, gefunden werden. Fügen Sie in diesem neuen Ordner eine Datei namens navigation.js hinzu. Die Datei enthält eine grundlegende Komponente mit Links zu allen Seiten in der App.

Sie müssen die Navigationskomponente in die Komponente mit der Auth höherer Ordnung einwickeln. Auf diese Weise können Sie prüfen, ob ein authentifizierter Benutzer vorliegt und die Schaltfläche Anmeldung oder Abmelde nach Bedarf anzeigen.

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

Jetzt, da Sie Komponenten zur Verfügung haben, um alle Routen zu verarbeiten, erstellen Sie die Routen für sie. Aktualisieren Sie die Datei app.js, damit die endgültige Version wie:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

Es gibt hier ein paar Dinge. Der Import der Secureroute- und ImplicitCallback -Komponenten aus dem React SDK von Okta. Die ImplicitCallback -Komponente verwaltet den Rückruf aus dem Authentifizierungsfluss, um sicherzustellen, dass ein Endpunkt innerhalb der React -Anwendung vorhanden ist, um den Rückruf von OKTA von Okta zu erfassen. Mit der Secureroute -Komponente können Sie jede Route sichern und nicht authentifizierte Benutzer auf die Anmeldeseite umleiten.

Die Routenkomponente von React Router macht genau das, was Sie erwarten würden: Sie benötigt einen Pfad, an den der Benutzer navigiert hat, und legt eine Komponente für diese Route fest. Die Secureroute -Komponente führt eine zusätzliche Überprüfung durch, um sicherzustellen, dass der Benutzer angemeldet ist, bevor der Zugriff auf diese Route ermöglicht wird. Wenn dies nicht der Fall ist, wird die Funktion in idex.js aufgerufen, um den Benutzer zur Anmeldeseite zu zwingen.

Die einzige andere wirklich seltsam aussehende Sache hier ist die Route für den Anmeldungsweg. Anstatt einfach eine Komponente einzustellen, um den Pfad zu verarbeiten, wird eine Render -Methode ausgeführt, die die Loginpage -Komponente rendert, und stellt die BaseURL aus der Konfiguration.

API -Endpunkte zur Knoten -App

Sie können sich daran erinnern, dass die Knoten -API die Registrierung durchführt, sodass Sie den Endpunkt zur Knoten -App hinzufügen müssen, um diesen Anruf zu verarbeiten. Dazu müssen Sie den Knoten SDK von Oktten hinzufügen. Aus dem Ordner `api` run:

npm i -g create-react-app express-generator

Dann ändern Sie die Datei user.js in API/Routen. Die Datei sieht aus wie:

mkdir MembershipSample
cd MembershipSample
express api
create-react-app client

Die größten Dinge, die hier zu beachten sind, sind das Importieren des lib/oktaklient (die Sie in einem Moment hinzufügen), den Aufruf an die Erstellung von OktaClient und die Form des Newuser -Objekts. Die Form des Newuser -Objekts ist in der API -Dokumentation von OKTA dokumentiert.

Für Ihre Knotenanwendung, um Anrufe in Ihre Okta -Anwendung zu tätigen, benötigt sie ein API -Token. Um eine zu erstellen, gehen Sie in Ihr Okta Developer Dashboard, schweben Sie über die Option API -Menü und klicken Sie auf Token.

Klicken Sie auf Token erstellen. Geben Sie dem Token einen Namen wie „Mitgliedschaft“ und klicken Sie auf Token erstellen.

Kopieren Sie das Token an einen sicheren Ort, um sie später zu verwenden.

Erstellen Sie eine Datei namens oktaclient.js in einem neuen Ordner namens LIB in der Knotenanwendung. Die Datei konfiguriert ein Client -Objekt aus dem Knoten SDK von Okta mit dem API -Token, das Sie gerade erstellt haben:

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

In der Datei app.js am Root der Knoten -App aktualisieren Sie die Datei, um alle Anrufe zu /api / zu erhalten. Sie sehen einen Abschnitt unter dem Block von App.use -Anweisungen. Ändern Sie die Einrichtung der Route, damit sie so aussieht:

"name": "client",
"proxy": "http://localhost:3001"

Wenn Ihre Knoten -App noch ausgeführt wird, müssen Sie die App (mit Strg c) anhalten und sie (mit NPM -Start) ausführen, damit die Updates wirksam werden können.

Obwohl die Site noch eine ernsthafte Liebe zum Stil benötigt, können Sie jetzt Benutzer registrieren, sich mit dem neu erstellten Benutzer anmelden und das profile profile profile für die addition auf der profilseite!

Erfahren Sie mehr

Wenn Sie mehr über die in diesen Artikeln verwendeten Technologien erfahren möchten, können Sie sich die Dokumentation finden Sie:

• okttas Knoten SDK
• oktta react sdk.

Schauen Sie sich auch andere Artikel mit Okta zur Authentifizierung an:

• Randall entfaltet Artikel über Okta in einer einfachen Node -Website
Mein Artikel mit dem Okta-Anmelde-Widget in React
Matt Raibles Artikel über progressive Web -Apps

häufig gestellte Fragen (FAQs) zum Erstellen der Benutzerregistrierung mit Knoten, React und Okta

Wie kann ich die Okta -Authentifizierung in einer React -App implementieren? Zuerst müssen Sie Okta React SDK mit NPM oder Garn installieren. Anschließend müssen Sie eine Okta -Anwendung in Ihrem Okta -Entwicklerkonto erstellen. Nach dem Erstellen der Anwendung erhalten Sie eine Client -ID, mit der Sie den Okta React SDK in Ihrer Anwendung konfigurieren. Sie müssen auch Routen für die Anmeldungs-, Abmeldungs- und Sicherheitsseiten mit den Okta React SDK -Komponenten einrichten. Schließlich können Sie den UseoktaAuth -Hook verwenden, um auf den Authentifizierungszustand und die Methoden in Ihren Komponenten zuzugreifen. Eine entscheidende Rolle beim Aufbau der Benutzerregistrierung bei Okta. Es fungiert als serverseitige Umgebung, in der Sie Ihre Anwendung einrichten und ausführen können. Sie können es verwenden, um einen Server zu erstellen, Routen zu definieren und Anforderungen und Antworten zu behandeln. Im Kontext von OKTA können Sie Node.js verwenden, um mit den Okta -APIs für Aufgaben wie das Erstellen von Benutzern, die Überprüfung von Anmeldeinformationen und das Verwalten von Sitzungen zu interagieren. >

Wie kann ich die OKTA -Anmeldeseite anpassen? Hier können Sie das Logo, die Farben und den Text der Anmeldeseite ändern. Sie können auch das OKTA-Anmelde-Widget verwenden, eine JavaScript-Bibliothek, die ein vollständig anpassbares Login-Erlebnis bietet. Frameworks, einschließlich Angular und Vue. Diese SDKs funktionieren ähnlich wie das React SDK und ermöglichen es Ihnen, Ihren Apps Authentifizierungs- und Autorisierungsfunktionen hinzuzufügen. Sie können das SDK mit NPM oder Garn installieren, es mit Ihren Okta -Anwendungsdetails konfigurieren und seine Komponenten und Haken in Ihrer App verwenden.

Wie kann ich Okta mit anderen Backend -Technologien verwenden? Okta bietet Bibliotheken und SDKs für verschiedene Backend -Technologien, darunter Java, .NET und PHP. Mit diesen Bibliotheken können Sie mit den Okta-APIs von Ihrem serverseitigen Code interagieren. Sie können sie verwenden, um Benutzer zu erstellen, Anmeldeinformationen zu überprüfen, Sitzungen zu verwalten und mehr. Bei den Netzwerkanfragen und Antworten und Überprüfung der Okta -Protokolle. Mit den Fehlermeldungen können Sie Hinweise darauf geben, was schief gelaufen ist. Die Netzwerkanforderungen und Antworten können Ihnen die von Okta gesendeten und empfangenen Daten anzeigen. Die Okta -Protokolle können detaillierte Informationen zu den Authentifizierungsereignissen liefern.

Wie kann ich mehr über Okta und seine Funktionen erfahren? . Hier finden Sie Anleitungen, Tutorials, API -Referenzen und mehr. Sie können auch den Okta Developer -Foren beitreten, um Fragen zu stellen und Wissen mit anderen Entwicklern auszutauschen.

Das obige ist der detaillierte Inhalt vonErstellen Sie die Benutzerregistrierung mit Node, React und Okta. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!