Erstellen Sie eine Gesundheitsverfolgungs -App mit React, GraphQL und Benutzerauthentifizierung

Erstellen Sie eine sichere Reaktionsanwendung: Kombinieren Sie GraphQL, Typorm, Node.js und Okta

In diesem Artikel wird Sie mithilfe des Vesper -Frameworks, TypeMors, MySQL und Node.js eine sichere GraphQL -API erstellen und einen Client erstellen, der mit React, ReactStrap und Apollo -Client mit ihm interagiert. Wir konzentrieren uns auf sichere Benutzerauthentifizierung und vereinfachen die Identitätsmanagement mit Okta.

Dieser Artikel wurde ursprünglich im Okta Developer Blog veröffentlicht. Vielen Dank an die Partner, die SitePoint als möglich unterstützen.

Wir erstellen eine Gesundheitsverfolgungsanwendung für die Aufzeichnung der täglichen Gesundheitsdaten.

Warum Okta wählen?

okta ist ein Cloud -Dienst, der das Identitätsmanagement vereinfacht und es sicherer und einfacher zu skalieren macht. Es ermöglicht Ihnen:

• zertifizierte und autorisierte Benutzer
• Speichern von Benutzerdaten
• Kennwortbasierte und soziale Login
ausführen
Schutz Ihrer Anwendung mit Multi-Factor-Authentifizierung
Weitere Funktionen! Bitte überprüfen Sie unsere Produktdokumentation.

Registrieren Sie ein dauerhaft kostenloses Entwicklerkonto von Okta und erfahren Sie weiter, wie Sie eine sichere Reaktionsanwendung erstellen!

Warum die Gesundheitsverfolgungs -App wählen?

Ich hatte von September bis Mitte Oktober 2014 eine 21-tägige zuckerfreie Entgiftungsfrist, und hörte auf, Zucker zu essen, regelmäßig Sport zu trinken und hörte auf zu trinken. Ich hatte mehr als ein Jahrzehnt hoher Blutdruck und nahm zu dieser Zeit blutdrucksensive Medikamente ein. In der ersten Woche der Entgiftung habe ich mein Blutdruckmedizin verwendet. Da das neue Rezept einen Arztbesuch erfordert, beschloss ich, zu warten, bis die Entgiftung vorbei ist, bevor ich den Arzt aufzusuchen. Drei Wochen später habe ich nicht nur 15 Pfund verloren, sondern mein Blutdruck kehrte wieder normal!

Ich habe ein 21-Punkte-System erstellt, um meine Gesundheit zu verfolgen. Die Regeln sind einfach:

Erhalten Sie einen Punkt für eine gesunde Ernährung. Andernfalls werden keine Punkte vergeben.
Erhalten Sie einen Punkt für die Bewegung.
einen Punkt ohne Trinken bekommen.

Ich habe 21-Punkte-Gesundheit gebaut, um meine Gesundheit zu verfolgen. Jetzt werden wir eine vereinfachte Version erstellen, die nur tägliche Punkte verfolgt.

API mit Typorm, GraphQL und Vesper

bauen

npm i -g typeorm@0.2.7

Typorm ist ein flexibles Orm -Framework, das auf den meisten JavaScript -Plattformen ausgeführt wird. Globale Installation von Typorm:

mkdir health-tracker
cd health-tracker

Erstellen Sie ein Verzeichnis, um den React -Client- und GraphQL -API zu speichern:

typeorm init --name graphql-api --database mysql

Erstellen Sie ein neues MySQL -Projekt mit dem folgenden Befehl:

graphql-api/ormconfig.json

bearbeiten

appstellen Sie Benutzername, Kennwort und Datenbank an.

mySQL installieren (wenn nicht bereits installiert). graphql-api

Navigieren Sie zu Ihrem

cd graphql-api
npm i
npm start

-Projekt, installieren Sie die Abhängigkeiten des Projekts und starten Sie es dann, um sicherzustellen, dass Sie eine Verbindung zu MySQL herstellen können.

npm i vesper@0.1.9

Vesper installieren, um TypeOrM und GraphQl

zu integrieren

Erstellen Sie GraphQL -Modelle und -Controller.

Entität erstellen src/entity/User.ts src/entity/Points.ts Ändern Sie

und

, damit die Punkte dem Benutzer zugeordnet werden können.

Erstellen Sie einen Controller

erstellen src/controller/PointsController.ts, um GraphQL -Abfragen und -mutationen zu verarbeiten.

modifizieren Sie src/index.ts, um Vespers bootstrap() zu verwenden, um alles zu konfigurieren.

Starten Sie die API- und Testabfragen und Mutationen mithilfe von GraphQL -Spielplatz.

Reparaturdatum

Installieren Sie graphql-iso-date und konfigurieren Sie einen benutzerdefinierten Parser, um Daten zu verarbeiten.

Beginnen Sie mit React

React -Client erstellen mithilfe von React -App erstellen und installieren Sie die erforderlichen Abhängigkeiten:

npm i -g typeorm@0.2.7

apollo client

konfigurieren

Konfigurieren Sie den Apollo -Client, um eine Verbindung zu Ihrer GraphQL -API herzustellen.

Verwenden von Apolloprovider und Abfragekomponenten

modifizieren Sie react-client/src/App.js, um den Apolloprovider- und Abfragekomponenten zu verwenden.

OpenID -Anschluss -Authentifizierung für React

hinzufügen

Erstellen Sie eine OIDC-Anwendung in OKTA und installieren Sie Oktas React SDK und React-Router-Dom:

mkdir health-tracker
cd health-tracker

Routing und Authentifizierung konfigurieren

modifizieren Sie react-client/src/App.js, um die OKTA -Authentifizierung einzurichten.

Komponente erstellen

erstellen Home.js, Login.js und Points.js Komponenten.

ReactStrap und Bootstrap

installieren

ReactStrap und Bootstrap installieren und die CSS -Datei von Bootstrap hinzufügen.

Verwenden Sie OKTA-Anmelde-Widget

OKTA-Anmelde-Widget installieren:

typeorm init --name graphql-api --database mysql

OktaSignInWidget.js erstellen

Komponente.

Points.js erstellen

Komponente

Erhalten Sie Benutzerinformationen von JWT

Installieren Sie den JWT -Verifier von Oktten:

cd graphql-api
npm i
npm start

graphql-api/src/CurrentUser.ts erstellen

.

Konfigurieren Sie JWT Verifier

graphql-api/src/index.ts modifizieren Sie

, um den JWT -Validator zu konfigurieren.

Ändern Sie den Controller

graphql-api/src/controller/PointsController.ts Ändern Sie

, um den aktuellen Ersatz zu injizieren und die Benutzer -ID zu filtern.

starten Sie die API neu und testen Sie die Anwendung.

Schlussfolgerung

Dieser Artikel zeigt, wie eine sichere React -Anwendung mit GraphQL, TypeM und Node.js. erstellt wird. Bitte lesen Sie andere Ressourcen von Okta, um mehr über React, Knoten und Benutzerauthentifizierung zu erfahren.

Denken Sie daran, die Platzhalter {yourOktaDomain} und {clientId} für Ihren tatsächlichen Okta -Domain -Namen und Ihre Client -ID zu ersetzen. Weitere Informationen finden Sie im Originaltext für den Quellcode -Link.

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