Créez une application de suivi de la santé avec React, GraphQL et l'authentification des utilisateurs

Créez une application React sécurisée: combinant GraphQL, Typeorm, Node.js et Okta

Cet article vous guidera comment créer une API GraphQL sécurisée à l'aide du Framework Vesper, Typeorm, MySQL et Node.js, et créent un client qui interagit avec lui à l'aide du client React, Reactsstrap et Apollo. Nous nous concentrerons sur l'authentification sécurisée des utilisateurs et simplifierons la gestion de l'identité avec OKTA.

Cet article a été initialement publié sur le blog Okta Developer. Merci aux partenaires qui soutiennent SitePoint comme possible.

Nous créerons une application de suivi de la santé pour enregistrer les données quotidiennes de santé.

Pourquoi choisir Okta?

Okta est un service cloud qui simplifie la gestion de l'identité et le rend plus sûr et plus facile à évoluer. Il vous permet de:

• Utilisateurs certifiés et autorisés
• Stockage des données utilisateur
• Exécuter la connexion basée sur les mots de passe et sociale
• Protégez votre application avec l'authentification multi-facteurs
• Plus de fonctionnalités! Veuillez vérifier notre documentation produit.

Enregistrez un compte de développeur OKTA gratuitement OKTA et continuez à apprendre à créer une application React sécurisée!

Pourquoi choisir l'application de suivi de la santé?

J'ai eu une période de détoxification sans sucre de 21 jours de septembre à la mi-octobre 2014 et j'ai arrêté de manger du sucre, j'ai commencé à faire de l'exercice régulier et j'ai cessé de boire. J'ai eu une pression artérielle élevée pendant plus d'une décennie et je prenais des médicaments antihypertenseurs à l'époque. Au cours de la première semaine de détoxification, j'ai utilisé mon médicament contre la pression artérielle. Étant donné que la nouvelle ordonnance nécessite une visite du médecin, j'ai décidé d'attendre que la désintoxication soit terminée avant d'aller voir le médecin. Trois semaines plus tard, non seulement j'ai perdu 15 livres, mais ma tension artérielle est revenue à des niveaux normaux!

J'ai créé un système de 21 points pour suivre ma santé. Les règles sont simples:

1. Obtenez un point pour une alimentation saine. Sinon, aucun point ne sera attribué.
2. Obtenez un point pour l'exercice.
3. Obtenez un point sans boire.

J'ai construit 21 points de santé pour suivre ma santé. Maintenant, nous allons créer une version simplifiée qui ne suit que les points quotidiens.

Build API avec TypeOrt, GraphQL et Vesper

TYPEORT est un framework ORM flexible qui s'exécute sur la plupart des plates-formes JavaScript. Installation globale de Typeorm:

npm i -g typeorm@0.2.7

Créez un répertoire pour stocker React Client et GraphQL API:

mkdir health-tracker
cd health-tracker

Créez un nouveau projet MySQL en utilisant la commande suivante:

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

Modifier graphql-api/ormconfig.json Personnaliser le nom d'utilisateur, le mot de passe et la base de données.

Installez MySQL (sinon déjà installé).

Accédez à votre projet graphql-api, installez les dépendances du projet, puis lancez-la pour vous assurer que vous pouvez vous connecter à MySQL.

cd graphql-api
npm i
npm start

Installez Vesper pour intégrer TypeOrm et GraphQL

npm i vesper@0.1.9

Créer des modèles et contrôleurs GraphQL.

Créer une entité

Modifier src/entity/User.ts et src/entity/Points.ts pour permettre aux points d'être associés à l'utilisateur.

Créer un contrôleur

Créer src/controller/PointsController.ts pour gérer les requêtes et mutations GraphQL.

Modifiez src/index.ts pour utiliser Vesper's bootstrap() pour tout configurer.

Démarrez l'API et testez les requêtes et les mutations à l'aide de GraphQL Playground.

Date de réparation

Installez graphql-iso-date et configurez un analyseur personnalisé pour traiter les dates.

Commencez à utiliser React

Créer un client React à l'aide de Create React App et installer les dépendances nécessaires:

npm i -g typeorm@0.2.7

Configurer le client Apollo

Configurez le client Apollo pour vous connecter à votre API GraphQL.

en utilisant des composants apolloprovider et de requête

Modifiez react-client/src/App.js pour utiliser les composants Apolloprovider et de requête.

Ajouter une authentification OpenId Connect pour React

Créez une application OIDC dans OKTA et installez le SDK React d'Okta et React-Router-Dom:

mkdir health-tracker
cd health-tracker

Configurer le routage et l'authentification

Modifier react-client/src/App.js pour configurer l'authentification OKTA.

Créer des composants

Créer des composants Home.js, Login.js et Points.js.

Installez Reactsstrap et bootstrap

Installez Reactsstrap et bootstrap et ajoutez le fichier CSS de bootstrap.

en utilisant le widget de connexion OKTA

Installation du widget de connexion OKTA:

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

Créer un composant OktaSignInWidget.js.

Créer Points.js Composant

Obtenez des informations utilisateur de JWT

Installez le vérificateur JWT d'Okta:

cd graphql-api
npm i
npm start

Créer graphql-api/src/CurrentUser.ts.

Configurer JWT Verifier

Modifiez graphql-api/src/index.ts pour configurer le validateur JWT.

Modifiez le contrôleur

Modifier graphql-api/src/controller/PointsController.ts pour injecter CurrentUser et filtrer l'ID utilisateur.

Redémarrez l'API et testez l'application.

Conclusion

Cet article montre comment créer une application React sécurisée à l'aide de GraphQL, TypeOR et Node.js. Veuillez consulter d'autres ressources fournies par OKTA pour en savoir plus sur React, Node et l'authentification des utilisateurs.

N'oubliez pas de remplacer les espaces réservés {yourOktaDomain} et {clientId} pour votre nom de domaine OKTA et votre ID client. Veuillez vous référer au texte d'origine du lien de code source.

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!