Maintenant que nous avons
terminé l'implémentation du serveur API REST en utilisant Express et MongoDB dans ce cours,
la prochaine pensée immédiate qui pourrait se produire dans votre esprit est,
puisque nous avons déjà développé les applications clientes,
qu'il s'agisse de l'application Angular, de l'application Ionic
ou de l' Application Native Script dans les cours précédents,
comment intégrer les deux ensemble afin que notre application cliente soit en mesure d'
interagir avec le serveur API REST complet que nous avons développé dans ce cours ?
Donc, c'est ce que nous allons examiner dans cette leçon,
dans cette conférence, et les deux exercices qui suivent cette conférence.
Donc, à la fin de cette leçon,
vous aurez un client Angular que nous
pourrons communiquer avec le serveur que vous venez de développer dans
ce cours et être en mesure de prendre
en charge la vue du client à part entière de notre application.
Ainsi, nous verrons que nous avons développé
l'application complète de bout en bout du côté client jusqu'au côté serveur.
Une approche similaire peut également être utilisée avec
votre client Ionic ou avec votre client de script natif,
étant donné que les scripts ioniques et natifs ont été
développés avec le moteur Angular dans les coulisses.
Ainsi, en effectuant un ensemble similaire d'étapes devrait être en mesure de faire en sorte que votre client Ionic et
votre client de script natif communiquent avec le
serveur d'API de repos Express plus MongoDB que nous avons développé dans ce cours.
Pour intégrer le client et le serveur,
comme nous l'avons réalisé,
notre serveur est déjà implémenté pour prendre en charge l'API REST à part entière.
Du côté client,
qu'il s'agisse du client angulaire, du client
ionique ou du client de script natif,
ils interagissent tous avec le serveur en utilisant les points de terminaison de l'API REST.
Ainsi, lorsque le client envoie la demande au serveur au point de terminaison de
l'API REST, le serveur répondra avec les données JSON correspondantes au client,
et le client peut ensuite utiliser les données JSON pour rendre les vues pour l'utilisateur.
Donc, compte tenu de cette compréhension de la communication entre le client et
le serveur, l'intégration devrait être assez simple.
Mais, bien sûr,
lorsque nous avons développé notre client Angular ou Ionic ou NativeScript,
nous n'avons pas fait la partie d'authentification de l'utilisateur à part entière,
parce que nous n'avions pas cela dans notre serveur JSON.
Maintenant que nous avons l'authentification utilisateur intégrée dans notre côté serveur,
nous devons moderniser nos applications clientes pour
leur permettre d'effectuer l'authentification utilisateur côté serveur, en
publiant les informations de connexion sur le serveur, puis en
obtenant le jeton d'authentification du côté serveur,
et par la suite, en communiquant avec le serveur, y compris
le jeton d'authentification dans l'en-tête des messages de requête.
Donc, tout cela signifie que nous devons faire des
ajustements mineurs à la fois au client et au serveur,
afin que les deux puissent communiquer entre eux.
Un aspect que je n'ai pas traité dans l'exercice précédent,
est la façon dont le serveur gérera les paramètres de requête qui viennent du côté client.
Donc, comme nous l'avons réalisé,
lorsque le côté client envoie une demande pour
un plat en vedette ou un leader en vedette ou une promotion de fonctionnalité,
nous avons vu que l'URL comprend des plats, la
fonction de point d'interrogation est égale à true dans
l'URL de demande qui vient du côté client.
Maintenant, dans les données côté serveur,
nous avons déjà vu que le plat,
la promotion ou le leader,
inclut l'indicateur de fonctionnalité déjà dans les données JSON.
Donc, lorsque cette requête vient du côté serveur,
alors le serveur devrait être capable d'extraire ce paramètre de requête de la requête entrante,
puis faire correctement la requête de
la MongoDB, puis obtenir uniquement les résultats où cet indicateur est défini sur true.
Donc, pour faire cela comme nous l'avons vu,
l'URL qui est utilisée pour envoyer la requête au serveur est /plats ? feature=true.
Donc, c'est ainsi que nous allons fournir les paramètres de requête à notre côté serveur.
Maintenant, en outre, lorsque cette information est reçue du côté serveur,
maintenant, nous avons vu que plus tôt lorsque nous avons fait la demande get côté serveur,
nous avons simplement dit plats trouver et ensuite nous trouverions tous les plats, puis les retourner
lorsque la demande get est envoyée au Dish.RouterRoute/.
La même logique s'applique à la fois au routeur promo et au routeur leader.
Maintenant, lorsque vous incluez un paramètre de requête comme celui-ci dans l'URL,
comment notre côté serveur sera-t-il capable d'extraire ce paramètre de requête ?
Donc, c'est là que lorsque la requête entrante a
ce paramètre de requête attaché à l'URL entrante,
le serveur express le traitera automatiquement et le transformera en
un objet JSON chargé sur un message de requête venant du côté serveur.
Maintenant, cela est disponible côté serveur sous la forme de req.query.
Ainsi, quels que soient les paramètres de requête que vous incluez dans l'URL,
seront transformés en objets JSON correspondants avec les informations définies comme indiqué ici,
puis chargés sur l'objet requête côté serveur.
Ainsi, en utilisant req.query côté serveur,
nous serons en mesure d'obtenir ces paramètres de requête.
Donc, lorsque vous effectuez une requête get côté serveur,
vous dites dishes.find et ensuite vous incluez le req.query dans le find.
Donc, par conséquent, lorsque le MongoDB est interrogé, alors,
seuls les enregistrements ou seuls les documents pour lesquels la vedette est définie sur true seront
extraits de la MongoDB et fournis à nous dans cette méthode get ici,
puis, peuvent être retournés au côté client.
Donc, c'est aussi simple que cela dans la gestion des paramètres de requête côté serveur.
Donc, cette mise à jour, nous allons faire à la fois le routeur plat,
le routeur promo, et le routeur leader côté serveur.
La partie suivante est bien sûr, l'authentification de l'utilisateur.
Ainsi, comme nous l'avons réalisé sur le côté serveur,
nous avons déjà ces points de terminaison API REST,
qui sont utiles pour l'authentification des utilisateurs.
En particulier, lorsque vous publiez sur /users/login,
avec le nom d'utilisateur et le mot de passe,
vous serez en mesure d'authentifier l'utilisateur côté serveur.
Maintenant, lorsque l'utilisateur est authentifié du côté serveur avec succès
, le message de réponse venant du côté serveur inclura
le jeton web JSON dans le corps de la réponse du message de réponse entrant du côté serveur.
Donc, du côté client,
nous devrions être en mesure d'extraire ce jeton et ensuite utiliser ce jeton par la suite.
Ainsi, lorsque le client reçoit le message de réponse
du côté serveur et que l'utilisateur est authentifié avec succès du côté serveur,
le message de réponse contiendra le jeton web JSON,
qui doit être extrait, et par la suite,
le client doit inclure ce jeton web JSON dans
le pour chaque requête sortante du côté client.
Alors, comment pouvons-nous gérer toute cette série d'opérations ?
Maintenant, c'est là que nous allons implémenter
un autre service qui sera utilisé du côté client,
dans notre client Angular,
appelé le service d'authentification,
et c'est là que nous allons gérer l'ensemble des opérations de connexion et de déconnexion.
Maintenant, le processus de déconnexion est assez simple mais,
si nous détruisons le jeton web JSON que nous avons du côté
client, alors le client ne pourra plus accéder au serveur.
Donc, c'est aussi simple que de détruire
le jeton web JSON du côté client pour déconnecter ce client.
Donc, compte tenu de cette compréhension,
voyons les étapes qui sont impliquées dans l'
authentification de l'utilisateur et la gestion de l'authentification de l'utilisateur côté client.
Ainsi, pour gérer l'authentification de l'utilisateur côté client,
le client enverra une demande de poste au point de terminaison /users/login,
et le corps de la requête de publication contiendra le nom d'utilisateur et le mot de passe.
Nous utilisons l'authentification de connexion dans ce cas.
Maintenant, pour l'authentification Facebook à nouveau,
c'est une configuration différente que je ne vais pas discuter en ce moment.
Mais, le corps de la requête comme vous le verrez pour l'authentification locale,
contiendra le nom d'utilisateur et le mot de passe.
Ainsi, lorsque l'utilisateur est authentifié avec succès côté serveur,
le serveur répondra ensuite au
client en incluant le jeton Web JSON dans le message de réponse.
Ainsi, lorsque le client reçoit le message de réponse du côté serveur,
le client devra capturer ce jeton web JSON,
puis enregistrer le jeton web JSON dans le stockage local côté client. Par
la suite, le client doit inclure ce jeton dans chaque demande sortante.
Alors, comment cela est-il accompli du côté client ?
Tout d'abord, bien sûr,
vous devez enregistrer le jeton Web JSON entrant dans le stockage local,
et cela se fait dans le service d'authentification que nous allons implémenter du côté client.
Maintenant, pour chaque requête sortante,
le client inclura ce jeton dans l'en-tête,
l'en-tête d'autorisation de la demande sortante.
Maintenant, comment cela est-il accompli ?
Donc, c'est là que nous allons prendre l'aide d'un intercepteur HTTP,
que le HttpClient dans Angular prend en charge.
Ainsi, avec l'intercepteur HTTP,
l'intercepteur nous permet d'intercepter
chaque message de requête sortant ou même d'
intercepter chaque message de réponse entrant si vous le souhaitez.
Mais dans l'application Angular,
nous allons implémenter l'intercepteur de requête,
ce que je vais illustrer dans l'exercice plus tard.
Dans l'intercepteur de requête HTTP,
lorsque le message de requête est intercepté,
chaque message de requête sortant sera intercepté, puis le jeton Web JSON
sera inséré dans l'en-tête d'autorisation du message de requête.
Ensuite, le message de requête serait transmis sur le côté serveur.
Ainsi, chaque requête sortante après que l'utilisateur est authentifié côté serveur,
chaque requête sortante du côté client portera
le jeton web JSON dans l'en-tête d'autorisation de la demande sortante.
Maintenant, une fois que le client se déconnecte,
le jeton Web JSON sera détruit du côté client. Par
conséquent, par la suite, les requêtes sortantes ne contiendront plus le jeton web
JSON, car le jeton web JSON n'existe pas du côté client.
Ainsi, par conséquent, l'utilisateur perd l'authentification.
Donc, c'est ainsi que nous allons gérer le processus de connexion et de déconnexion côté client,
en communiquant avec le serveur,
puis obtenir le jeton web JSON,
puis en incluant le jeton web JSON dans chaque requête sortante.
Maintenant, avec cette compréhension de la façon dont le client et le serveur vont interagir,
passons maintenant aux deux exercices suivants. Tout d'
abord, nous allons mettre à jour le côté serveur avec quelques ajouts,
afin qu'il puisse bien s'intégrer avec notre site client. Par la
suite, nous mettrons à jour le côté client ou plutôt je vous donnerai
une application cliente à part entière que j'ai
prise du cours Angular antérieur, puis je la mettrai à jour, ce
qui nous donne également la possibilité d'utiliser des intercepteurs HTTP
sur les requêtes sortantes et les messages de réponse entrants.
Donc, nous allons traiter ces deux exercices dans les deux prochains exercices,
et à la fin de celui-ci, vous comprendrez comment
intégrer votre client et le côté serveur.