Maintenant, comme je l'ai mentionné, Firebase a une authentification intégrée, nous avons
juste besoin d'aller dans la zone d'authentification, puis de cliquer sur la méthode de connexion et de choisir le mot de passe
et l'e-mail ou le mot de passe e-mail ici. Activez ceci et cliquez sur enregistrer et
avec cela, nous l'avons activé.
Nous pouvons maintenant envoyer des demandes à une API Firebase pour créer des utilisateurs ou pour les connecter. Maintenant, pour savoir où envoyer les demandes, vous
pouvez google pour
Firebase REST Auth API et vous trouverez ces documents officiels où vous apprendrez à
créer et à connecter des utilisateurs avec leur API.
Maintenant, il y a un tas de points de terminaison pour différentes choses, ici dans cette application, nous nous concentrerons sur l'inscription et
la connexion.
Donc, si nous cliquons sur l'inscription par e-mail et mot de passe, nous avons appris comment cela fonctionne.
Nous devons envoyer une demande HTTP, une demande de publication avec ce type de contenu à cette URL, entrez ici notre propre clé API que je vais
vous montrer d'où vous l'obtenez dans une seconde et attacher ce corps à la demande, alors e- mot de passe de messagerie, puis ce champ
de jeton sécurisé de retour qui devrait fondamentalement toujours être vrai. En réponse, nous récupérerons un jeton, c'est ce jeton
que j'ai mentionné sur la diapositive, l'e-mail que nous avons utilisé, un jeton d'actualisation qui est plus
avancé, ce jeton expirera ici après ce nombre
de secondes que nous récupérons également . Avec un jeton d'actualisation, nous pourrions le recréer, le
revalider sans que l'utilisateur ne se reconnecte, nous ne le
ferons pas ici, vous auriez un point de terminaison distinct auquel vous
enverriez le jeton d'actualisation pour obtenir un nouveau jeton d'ID, nous ' Je vais rester simple
ici et utiliser simplement ce jeton et reconnecter l'utilisateur à nouveau après cette heure d'expiration, car cette heure d'expiration est également quelque
chose que nous obtenons afin que
nous sachions quand ce jeton deviendra invalide et ne pourra plus être utilisé parce que nous
devez le nettoyer dans notre application d'ici là, afin que nous n'essayions pas de joindre ce jeton non valide aux demandes
futures à notre base de données et localId, c'est l'ID utilisateur de l'utilisateur que Firebase a créé sur ses serveurs parce que nous n'avons
pas à le faire tout ce que la gestion des utilisateurs, Firebase fera, nous n'avons pas besoin d'écrire de
code côté serveur.
Donc, ce que nous devons faire, c'est envoyer une demande HTTP et comme je
vais également gérer tout cela avec Redux, je vais créer un nouveau créateur d'action pour cela et je vais
le nommer auth.
Je vais également déjà créer un réducteur car nous y gérerons également des éléments liés à l'authentification, par
exemple le jeton et l'ID utilisateur.
Commençons par l'action et exportons donc ici
un créateur d'action qui pourrait être nommé inscription, il est logique de commencer par
cela, car la connexion des utilisateurs ne sera possible qu'après avoir créé au
moins un utilisateur. Donc ici, lors de
l'inscription, je veux pouvoir créer un nouvel utilisateur et pour cela, nous aurons besoin
d'un e-mail et d'un mot de passe qui devraient être transmis au créateur de l'action d'inscription de l'extérieur.
Maintenant, cela enverra une requête HTTP et afin de pouvoir le faire, nous utiliserons à nouveau le
package Redux Thunk et retournerons donc la répartition asynchrone ici, donc
nous renvoyons une fonction qui peut utiliser async wait qui obtient cette répartition fonctionner comme un argument transmis par
le middleware Redux Thunk que nous avons commencé à utiliser dans le dernier module HTTP de ce
cours, ce qui nous permet d'exécuter du code asynchrone avant d'envoyer une action qui atteint réellement notre magasin.
Maintenant, pour cela, nous aurons également besoin d'un identifiant d'action pour cette action que nous voulons gérer
plus tard dans notre magasin et là, je vais simplement utiliser l'inscription, qui a également l'inscription comme identifiant de chaîne.
Donc, à la fin, nous enverrons ensuite cet objet d'action où le type est inscrit et où nous ajouterons
probablement également des données supplémentaires, mais avant de le faire, nous devons envoyer une demande HTTP.
Maintenant, cela peut être fait avec l'API fetch comme vous l'avez appris dans le dernier module et passez donc
d'abord par ce module
et c'est l'URL à laquelle nous devons envoyer la demande, afin que nous puissions le copier. Ajoutez-le ici et maintenant nous avons
cette clé API.
Maintenant, c'est quelque chose que nous pouvons obtenir de Firebase en cliquant sur l'icône d'engrenage
ici, les paramètres du projet. Vous y
trouverez la clé d'API Web et c'est exactement ce dont
vous avez besoin, copiez-la et remplacez la clé d'API, y compris les crochets, par cette clé.
Il s'agit de l'URL à laquelle nous devrons envoyer une demande. Maintenant, comme les documents officiels nous le disent, nous
devons envoyer
une demande de publication, donc comme vous l'avez appris, nous devons ajouter
ce deuxième argument ici pour récupérer quel est un objet qui nous permet de configurer cette demande
et là, nous pouvons définir la méthode de publier et d'ajouter également des en-têtes, car nous devrons ajouter l'en-tête JSON de
l'application, donc l'en-tête du type de contenu qui devrait avoir une valeur d'application JSON et nous devrons ajouter un corps et ce corps doit
être au format JSON que nous pouvons obtenir avec JSON. stringify et les données que je veux stringify doivent être
un objet avec ces trois clés - email, mot de passe et token sécurisé de retour. Donc ici, bien sûr, e-mail fait référence à l'e-mail que nous recevons comme
argument ici, de même pour le mot de passe qui fait référence à l'argument de mot de passe que nous obtenons, puis
c'est le troisième et je vais le copier pour ne pas le mal saisir, renvoyer ici un argument de jeton sécurisé
ou une paire clé-valeur où la valeur doit être juste vraie. Cette demande doit créer un
nouvel utilisateur.
Maintenant, nous pouvons attendre sa réponse avec le mot-clé attendent, puis comme vous l'avez appris plus tôt, nous pouvons
vérifier si la réponse n'est pas correcte, si c'est le cas, je veux lancer une nouvelle erreur où je dis que quelque chose s'est
mal passé et nous allons jetez un oeil à la gestion des erreurs plus détaillée plus tard, pour l'instant c'est tout et si ça va
cependant, je veux obtenir mes données de réponse en attendant la réponse JSON qui déballera le corps de la réponse et le
transformera automatiquement du format JSON en Javascript, donc à un objet ou un tableau Javascript et maintenant nous allons pouvoir
travailler avec cela et pour le moment, je vais simplement enregistrer ces données de réponse ici.
Maintenant, nous n'avons pas ajouté le reste de notre boutique Redux liée à l'authentification, nous le ferons plus tard, mais nous
avons quelque chose qui devrait fonctionner, nous devrions pouvoir envoyer cela et donc envoyer une telle demande d'inscription.
Alors maintenant, nous pouvons revenir à l'écran d'authentification et à la fin lorsque nous cliquons sur ce bouton de connexion qui est incorrectement
étiqueté connexion au moment où nous nous inscrivons, mais laissons-le comme ça pour le moment, donc
quand
nous cliquons sur ce bouton Je souhaite envoyer cette demande d'inscription. Donc, pour cela, nous devons, comme auparavant, importer l'utilisation
de la répartition à partir de React Redux afin que nous puissions répartir
les actions et bien sûr, tout importer en tant qu'actions d'authentification à partir des données du dossier de stockage, à partir du dossier
d'actions et à partir du fichier d'authentification et
avec cela ajouté, nous pouvons ajouter une fonction
ici, soit une fonction en ligne ou comme ça, une fonction
nommée stockée dans une constante
que je nommerai gestionnaire
d'inscription, là je n'attends aucun argument et là je veux
ensuite envoyer, donc nous avons besoin pour accéder à cette fonction de répartition en
exécutant use dispatch, puis ici,
nous pouvons répartir cet événement d'authentification sur l'événement d'inscription ou l'action d'inscription.
Maintenant, le problème est que cela nécessite l'e-mail et le mot de passe et
pour l'instant je ne stocke pas cela.
J'obtiens ceci dans mon entrée mais ici sur le changement d'entrée, je ne stocke pas ces données que je devrais bien sûr.
Maintenant, nous pouvons regarder notre autre formulaire ici pour voir comment nous avons fait cela.
Donc, dans l'écran d'édition du produit, nous avons bien sûr ici notre réducteur de formulaire qui gère toute la validité liée au formulaire
et les valeurs.
Donc, à la fin, nous pouvons copier cela et l'ajouter à l'écran d'authentification en dehors du composant d'écran d'authentification
comme celui-ci et revenir à l'écran d'édition du produit pour ensuite également saisir la partie là-bas où nous l'initialisons
avec le réducteur,
alors copiez tout cela et l'ajouter également à l'écran
d'authentification, maintenant à l'intérieur du composant, peut-être ici et pour que cela fonctionne, nous devons également importer le réducteur d'utilisation de React et avec celui importé,
maintenant nous avons juste
besoin de le modifier un peu bit. Ce réducteur de formulaire est très bien et d'ailleurs vous pouvez
l'externaliser dans un fichier séparé car nous utilisons le même type de réducteur à la fois dans l'écran d'authentification
et dans l'écran d'édition du produit, vous pouvez même
créer un crochet personnalisé si vous savez comment cela fonctionne, pour l'instant
je vais le laisser comme ça.
Une chose dont j'ai besoin cependant est la mise à
jour de la saisie du formulaire, permettez-moi de saisir cela à partir de l'écran
de modification du produit
également, cette constante ici, déplaçons cela dans l'écran d'authentification également.
Alors
maintenant avec ça, ça va, mais là-bas où j'appelle use reducer et initialise tout ça, ça a
bien sûr l'air différent.
Nous devons avoir un e-mail qui est initialement vide et un mot de passe qui est initialement vide et pour
la validité, c'est la même
chose, nous avons juste un e-mail qui initialement n'est pas valide et nous avons un mot de
passe qui initialement n'est pas valide et le formulaire global donc également initialement n'est pas valide.
Maintenant, l'état du formulaire d'expédition doit être déclenché chaque fois que notre entrée change ici, donc ici,
lors du changement d'entrée, bien sûr, vous le savez et vous pouvez le voir dans l'écran d'édition du produit, nous
obtenons trois valeurs - nous obtenons l'identifiant d'entrée, la valeur d'entrée et la validité d'entrée.
Donc, à la fin, nous pouvons simplement le copier ici à partir de l'écran d'édition du produit et le déplacer
vers l'écran d'authentification et remplacer cette fonction anonyme par lui ou le stocker réellement dans une nouvelle variable
ici, gestionnaire de changement d'entrée qui contient maintenant cette fonction. Maintenant, tout comme dans l'écran d'édition du produit, vous devez saisir cela
avec un rappel pour vous assurer que cela ne se rend pas à nouveau quand il ne devrait pas.
Donc, en fait, nous devons le saisir ici, y compris l'appel de rappel d'utilisation et les dépendances
du rappel d'utilisation, c'est donc en fait ce qui devrait être utilisé là-bas sur le gestionnaire de changement d'entrée.
Maintenant, ce gestionnaire de changement d'entrée peut être lié ou peut être défini ici sur les accessoires de changement d'entrée afin
que ces accessoires ciblent cette fonction et
maintenant avec cela, nous stockons nos valeurs de formulaire ou nos valeurs d'entrée dans notre état de formulaire avec lequel
nous avons géré utilisez un réducteur et ainsi de suite.
Alors maintenant, c'est cet état de formulaire qui m'intéresse ici dans mon gestionnaire d'inscription car pour m'inscrire,
je dois passer des valeurs d'entrée d'état. e-mail et forme des valeurs d'entrée d'état. mot de passe, donc ces deux
valeurs qui ont été rassemblées et maintenant le gestionnaire d'inscription ici, cette fonction peut être liée à ce bouton
là-bas, au bouton de connexion ici dans onPress parce que c'est la fonction que je
veux pointer pour l'exécuter quand nous appuyez sur ce bouton.
Voyons voir si cela fonctionne comme il se doit. Si je commence à entrer des valeurs ici,
j'obtiens mes erreurs de validation, mais elles ne s'affichent pas, c'est le
cas, car ce n'est pas un message d'erreur ici, mais un texte d'erreur sur les entrées de l'écran d'authentification.
Donc, si nous changeons ce message d'erreur en texte d'erreur, maintenant si nous testons cela,
donc si je clique ici, touchez hors de là, je reçois mes avertissements.
Maintenant, si j'entre une adresse e-mail valide,
c'est parti, si j'entre un mot de passe assez long, c'est parti, si je clique maintenant sur login ici, voyons si ça
marche.
Passons à Firebase, à l'authentification et là, vous devriez maintenant voir un nouvel utilisateur, c'est
l'utilisateur qui vient d'être créé.
Donc, l'inscription fonctionne, assurons-nous que nous
pouvons également passer en mode de connexion et que cela fonctionne également.
Soit dit en passant, notez également que ce sont les données que nous
avons récupérées, c'est
donc la réponse, cet objet avec
le
courrier électronique, la durée de validité du
jeton en secondes, puis le jeton lui-même qui est cette longue chaîne cryptique, puis également l'ID de l'utilisateur qui a
été créé et ce jeton d'actualisation.