1 00:00:02,170 --> 00:00:05,530 Maintenant, comme je l'ai mentionné, Firebase a une authentification intégrée, nous avons 2 00:00:05,530 --> 00:00:11,350 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 3 00:00:11,350 --> 00:00:16,500 et l'e-mail ou le mot de passe e-mail ici. Activez ceci et cliquez sur enregistrer et 4 00:00:16,600 --> 00:00:18,550 avec cela, nous l'avons activé. 5 00:00:18,550 --> 00:00:25,640 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 6 00:00:25,640 --> 00:00:27,140 pouvez google pour 7 00:00:27,140 --> 00:00:32,630 Firebase REST Auth API et vous trouverez ces documents officiels où vous apprendrez à 8 00:00:32,630 --> 00:00:36,180 créer et à connecter des utilisateurs avec leur API. 9 00:00:36,210 --> 00:00:40,820 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 10 00:00:40,820 --> 00:00:41,440 la connexion. 11 00:00:41,540 --> 00:00:45,200 Donc, si nous cliquons sur l'inscription par e-mail et mot de passe, nous avons appris comment cela fonctionne. 12 00:00:45,290 --> 00:00:52,250 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 13 00:00:52,280 --> 00:00:58,890 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 14 00:00:58,910 --> 00:01:05,180 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 15 00:01:05,180 --> 00:01:10,820 que j'ai mentionné sur la diapositive, l'e-mail que nous avons utilisé, un jeton d'actualisation qui est plus 16 00:01:10,940 --> 00:01:13,790 avancé, ce jeton expirera ici après ce nombre 17 00:01:13,790 --> 00:01:19,430 de secondes que nous récupérons également . Avec un jeton d'actualisation, nous pourrions le recréer, le 18 00:01:19,430 --> 00:01:22,350 revalider sans que l'utilisateur ne se reconnecte, nous ne le 19 00:01:22,910 --> 00:01:26,460 ferons pas ici, vous auriez un point de terminaison distinct auquel vous 20 00:01:26,570 --> 00:01:31,100 enverriez le jeton d'actualisation pour obtenir un nouveau jeton d'ID, nous ' Je vais rester simple 21 00:01:31,100 --> 00:01:37,310 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 22 00:01:37,310 --> 00:01:39,080 chose que nous obtenons afin que 23 00:01:39,080 --> 00:01:43,880 nous sachions quand ce jeton deviendra invalide et ne pourra plus être utilisé parce que nous 24 00:01:43,880 --> 00:01:49,850 devez le nettoyer dans notre application d'ici là, afin que nous n'essayions pas de joindre ce jeton non valide aux demandes 25 00:01:49,850 --> 00:01:56,600 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 26 00:01:56,600 --> 00:02:02,050 pas à le faire tout ce que la gestion des utilisateurs, Firebase fera, nous n'avons pas besoin d'écrire de 27 00:02:02,060 --> 00:02:03,380 code côté serveur. 28 00:02:03,440 --> 00:02:07,610 Donc, ce que nous devons faire, c'est envoyer une demande HTTP et comme je 29 00:02:07,610 --> 00:02:13,340 vais également gérer tout cela avec Redux, je vais créer un nouveau créateur d'action pour cela et je vais 30 00:02:13,340 --> 00:02:14,500 le nommer auth. 31 00:02:14,510 --> 00:02:20,720 Je vais également déjà créer un réducteur car nous y gérerons également des éléments liés à l'authentification, par 32 00:02:20,720 --> 00:02:22,790 exemple le jeton et l'ID utilisateur. 33 00:02:23,090 --> 00:02:25,980 Commençons par l'action et exportons donc ici 34 00:02:26,510 --> 00:02:31,810 un créateur d'action qui pourrait être nommé inscription, il est logique de commencer par 35 00:02:31,940 --> 00:02:37,070 cela, car la connexion des utilisateurs ne sera possible qu'après avoir créé au 36 00:02:37,070 --> 00:02:40,130 moins un utilisateur. Donc ici, lors de 37 00:02:40,130 --> 00:02:44,590 l'inscription, je veux pouvoir créer un nouvel utilisateur et pour cela, nous aurons besoin 38 00:02:44,600 --> 00:02:50,420 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. 39 00:02:50,690 --> 00:02:56,750 Maintenant, cela enverra une requête HTTP et afin de pouvoir le faire, nous utiliserons à nouveau le 40 00:02:56,750 --> 00:03:01,180 package Redux Thunk et retournerons donc la répartition asynchrone ici, donc 41 00:03:01,460 --> 00:03:07,970 nous renvoyons une fonction qui peut utiliser async wait qui obtient cette répartition fonctionner comme un argument transmis par 42 00:03:08,000 --> 00:03:14,150 le middleware Redux Thunk que nous avons commencé à utiliser dans le dernier module HTTP de ce 43 00:03:14,150 --> 00:03:20,480 cours, ce qui nous permet d'exécuter du code asynchrone avant d'envoyer une action qui atteint réellement notre magasin. 44 00:03:20,620 --> 00:03:25,940 Maintenant, pour cela, nous aurons également besoin d'un identifiant d'action pour cette action que nous voulons gérer 45 00:03:25,940 --> 00:03:31,590 plus tard dans notre magasin et là, je vais simplement utiliser l'inscription, qui a également l'inscription comme identifiant de chaîne. 46 00:03:31,850 --> 00:03:39,290 Donc, à la fin, nous enverrons ensuite cet objet d'action où le type est inscrit et où nous ajouterons 47 00:03:39,290 --> 00:03:45,940 probablement également des données supplémentaires, mais avant de le faire, nous devons envoyer une demande HTTP. 48 00:03:46,020 --> 00:03:51,170 Maintenant, cela peut être fait avec l'API fetch comme vous l'avez appris dans le dernier module et passez donc 49 00:03:51,170 --> 00:03:52,360 d'abord par ce module 50 00:03:52,370 --> 00:04:01,130 et c'est l'URL à laquelle nous devons envoyer la demande, afin que nous puissions le copier. Ajoutez-le ici et maintenant nous avons 51 00:04:01,130 --> 00:04:03,700 cette clé API. 52 00:04:04,220 --> 00:04:07,240 Maintenant, c'est quelque chose que nous pouvons obtenir de Firebase en cliquant sur l'icône d'engrenage 53 00:04:07,250 --> 00:04:09,700 ici, les paramètres du projet. Vous y 54 00:04:09,760 --> 00:04:13,450 trouverez la clé d'API Web et c'est exactement ce dont 55 00:04:13,460 --> 00:04:19,680 vous avez besoin, copiez-la et remplacez la clé d'API, y compris les crochets, par cette clé. 56 00:04:19,700 --> 00:04:25,970 Il s'agit de l'URL à laquelle nous devrons envoyer une demande. Maintenant, comme les documents officiels nous le disent, nous 57 00:04:25,970 --> 00:04:26,870 devons envoyer 58 00:04:26,990 --> 00:04:30,950 une demande de publication, donc comme vous l'avez appris, nous devons ajouter 59 00:04:30,950 --> 00:04:36,680 ce deuxième argument ici pour récupérer quel est un objet qui nous permet de configurer cette demande 60 00:04:37,280 --> 00:04:44,180 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 61 00:04:44,180 --> 00:04:52,130 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 62 00:04:52,130 --> 00:04:58,700 être au format JSON que nous pouvons obtenir avec JSON. stringify et les données que je veux stringify doivent être 63 00:04:58,700 --> 00:05:07,660 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 64 00:05:07,660 --> 00:05:14,890 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 65 00:05:14,890 --> 00:05:22,060 c'est le troisième et je vais le copier pour ne pas le mal saisir, renvoyer ici un argument de jeton sécurisé 66 00:05:22,060 --> 00:05:29,770 ou une paire clé-valeur où la valeur doit être juste vraie. Cette demande doit créer un 67 00:05:29,770 --> 00:05:31,770 nouvel utilisateur. 68 00:05:31,900 --> 00:05:38,530 Maintenant, nous pouvons attendre sa réponse avec le mot-clé attendent, puis comme vous l'avez appris plus tôt, nous pouvons 69 00:05:38,620 --> 00:05:46,660 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 70 00:05:46,930 --> 00:05:55,340 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 71 00:05:55,380 --> 00:06:02,970 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 72 00:06:02,970 --> 00:06:09,780 transformera automatiquement du format JSON en Javascript, donc à un objet ou un tableau Javascript et maintenant nous allons pouvoir 73 00:06:10,500 --> 00:06:16,200 travailler avec cela et pour le moment, je vais simplement enregistrer ces données de réponse ici. 74 00:06:17,910 --> 00:06:23,590 Maintenant, nous n'avons pas ajouté le reste de notre boutique Redux liée à l'authentification, nous le ferons plus tard, mais nous 75 00:06:23,590 --> 00:06:28,840 avons quelque chose qui devrait fonctionner, nous devrions pouvoir envoyer cela et donc envoyer une telle demande d'inscription. 76 00:06:28,840 --> 00:06:36,460 Alors maintenant, nous pouvons revenir à l'écran d'authentification et à la fin lorsque nous cliquons sur ce bouton de connexion qui est incorrectement 77 00:06:36,460 --> 00:06:41,770 étiqueté connexion au moment où nous nous inscrivons, mais laissons-le comme ça pour le moment, donc 78 00:06:41,770 --> 00:06:42,420 quand 79 00:06:42,460 --> 00:06:50,330 nous cliquons sur ce bouton Je souhaite envoyer cette demande d'inscription. Donc, pour cela, nous devons, comme auparavant, importer l'utilisation 80 00:06:50,390 --> 00:06:55,810 de la répartition à partir de React Redux afin que nous puissions répartir 81 00:06:56,150 --> 00:07:05,810 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 82 00:07:05,810 --> 00:07:09,590 d'actions et à partir du fichier d'authentification et 83 00:07:09,840 --> 00:07:13,170 avec cela ajouté, nous pouvons ajouter une fonction 84 00:07:13,190 --> 00:07:17,880 ici, soit une fonction en ligne ou comme ça, une fonction 85 00:07:18,410 --> 00:07:20,850 nommée stockée dans une constante 86 00:07:20,990 --> 00:07:23,240 que je nommerai gestionnaire 87 00:07:23,250 --> 00:07:27,780 d'inscription, là je n'attends aucun argument et là je veux 88 00:07:27,780 --> 00:07:33,590 ensuite envoyer, donc nous avons besoin pour accéder à cette fonction de répartition en 89 00:07:33,650 --> 00:07:36,090 exécutant use dispatch, puis ici, 90 00:07:36,210 --> 00:07:41,410 nous pouvons répartir cet événement d'authentification sur l'événement d'inscription ou l'action d'inscription. 91 00:07:41,430 --> 00:07:44,430 Maintenant, le problème est que cela nécessite l'e-mail et le mot de passe et 92 00:07:44,430 --> 00:07:46,020 pour l'instant je ne stocke pas cela. 93 00:07:46,020 --> 00:07:51,500 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. 94 00:07:51,570 --> 00:07:56,320 Maintenant, nous pouvons regarder notre autre formulaire ici pour voir comment nous avons fait cela. 95 00:07:56,370 --> 00:08:06,760 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 96 00:08:06,910 --> 00:08:08,670 et les valeurs. 97 00:08:08,800 --> 00:08:15,790 Donc, à la fin, nous pouvons copier cela et l'ajouter à l'écran d'authentification en dehors du composant d'écran d'authentification 98 00:08:16,990 --> 00:08:24,140 comme celui-ci et revenir à l'écran d'édition du produit pour ensuite également saisir la partie là-bas où nous l'initialisons 99 00:08:24,140 --> 00:08:25,400 avec le réducteur, 100 00:08:25,430 --> 00:08:28,970 alors copiez tout cela et l'ajouter également à l'écran 101 00:08:28,970 --> 00:08:38,730 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é, 102 00:08:38,730 --> 00:08:40,350 maintenant nous avons juste 103 00:08:40,480 --> 00:08:46,140 besoin de le modifier un peu bit. Ce réducteur de formulaire est très bien et d'ailleurs vous pouvez 104 00:08:46,150 --> 00:08:51,160 l'externaliser dans un fichier séparé car nous utilisons le même type de réducteur à la fois dans l'écran d'authentification 105 00:08:51,400 --> 00:08:53,860 et dans l'écran d'édition du produit, vous pouvez même 106 00:08:53,860 --> 00:08:57,160 créer un crochet personnalisé si vous savez comment cela fonctionne, pour l'instant 107 00:08:57,160 --> 00:08:59,180 je vais le laisser comme ça. 108 00:08:59,230 --> 00:09:01,560 Une chose dont j'ai besoin cependant est la mise à 109 00:09:01,570 --> 00:09:04,620 jour de la saisie du formulaire, permettez-moi de saisir cela à partir de l'écran 110 00:09:04,630 --> 00:09:05,810 de modification du produit 111 00:09:05,830 --> 00:09:08,020 également, cette constante ici, déplaçons cela dans l'écran d'authentification également. 112 00:09:08,980 --> 00:09:09,670 Alors 113 00:09:09,670 --> 00:09:15,190 maintenant avec ça, ça va, mais là-bas où j'appelle use reducer et initialise tout ça, ça a 114 00:09:15,190 --> 00:09:16,470 bien sûr l'air différent. 115 00:09:16,630 --> 00:09:22,120 Nous devons avoir un e-mail qui est initialement vide et un mot de passe qui est initialement vide et pour 116 00:09:22,120 --> 00:09:23,720 la validité, c'est la même 117 00:09:23,800 --> 00:09:28,690 chose, nous avons juste un e-mail qui initialement n'est pas valide et nous avons un mot de 118 00:09:28,690 --> 00:09:33,310 passe qui initialement n'est pas valide et le formulaire global donc également initialement n'est pas valide. 119 00:09:34,570 --> 00:09:40,240 Maintenant, l'état du formulaire d'expédition doit être déclenché chaque fois que notre entrée change ici, donc ici, 120 00:09:43,290 --> 00:09:49,830 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 121 00:09:49,830 --> 00:09:55,230 obtenons trois valeurs - nous obtenons l'identifiant d'entrée, la valeur d'entrée et la validité d'entrée. 122 00:09:56,100 --> 00:10:03,630 Donc, à la fin, nous pouvons simplement le copier ici à partir de l'écran d'édition du produit et le déplacer 123 00:10:03,630 --> 00:10:10,630 vers l'écran d'authentification et remplacer cette fonction anonyme par lui ou le stocker réellement dans une nouvelle variable 124 00:10:10,770 --> 00:10:18,620 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 125 00:10:18,620 --> 00:10:24,620 avec un rappel pour vous assurer que cela ne se rend pas à nouveau quand il ne devrait pas. 126 00:10:24,620 --> 00:10:31,190 Donc, en fait, nous devons le saisir ici, y compris l'appel de rappel d'utilisation et les dépendances 127 00:10:31,250 --> 00:10:38,360 du rappel d'utilisation, c'est donc en fait ce qui devrait être utilisé là-bas sur le gestionnaire de changement d'entrée. 128 00:10:38,460 --> 00:10:45,690 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 129 00:10:45,720 --> 00:10:48,340 que ces accessoires ciblent cette fonction et 130 00:10:48,840 --> 00:10:55,740 maintenant avec cela, nous stockons nos valeurs de formulaire ou nos valeurs d'entrée dans notre état de formulaire avec lequel 131 00:10:55,740 --> 00:10:59,370 nous avons géré utilisez un réducteur et ainsi de suite. 132 00:10:59,380 --> 00:11:04,630 Alors maintenant, c'est cet état de formulaire qui m'intéresse ici dans mon gestionnaire d'inscription car pour m'inscrire, 133 00:11:04,630 --> 00:11:11,830 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 134 00:11:11,840 --> 00:11:18,850 valeurs qui ont été rassemblées et maintenant le gestionnaire d'inscription ici, cette fonction peut être liée à ce bouton 135 00:11:18,850 --> 00:11:24,320 là-bas, au bouton de connexion ici dans onPress parce que c'est la fonction que je 136 00:11:24,560 --> 00:11:28,160 veux pointer pour l'exécuter quand nous appuyez sur ce bouton. 137 00:11:28,410 --> 00:11:34,810 Voyons voir si cela fonctionne comme il se doit. Si je commence à entrer des valeurs ici, 138 00:11:38,160 --> 00:11:42,750 j'obtiens mes erreurs de validation, mais elles ne s'affichent pas, c'est le 139 00:11:44,040 --> 00:11:50,950 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. 140 00:11:51,060 --> 00:11:54,920 Donc, si nous changeons ce message d'erreur en texte d'erreur, maintenant si nous testons cela, 141 00:11:55,020 --> 00:11:58,460 donc si je clique ici, touchez hors de là, je reçois mes avertissements. 142 00:11:58,500 --> 00:12:00,960 Maintenant, si j'entre une adresse e-mail valide, 143 00:12:00,960 --> 00:12:08,350 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 144 00:12:08,350 --> 00:12:08,740 marche. 145 00:12:08,740 --> 00:12:14,880 Passons à Firebase, à l'authentification et là, vous devriez maintenant voir un nouvel utilisateur, c'est 146 00:12:14,950 --> 00:12:17,360 l'utilisateur qui vient d'être créé. 147 00:12:17,530 --> 00:12:19,810 Donc, l'inscription fonctionne, assurons-nous que nous 148 00:12:19,810 --> 00:12:24,060 pouvons également passer en mode de connexion et que cela fonctionne également. 149 00:12:25,100 --> 00:12:28,970 Soit dit en passant, notez également que ce sont les données que nous 150 00:12:29,030 --> 00:12:30,150 avons récupérées, c'est 151 00:12:30,150 --> 00:12:31,810 donc la réponse, cet objet avec 152 00:12:31,880 --> 00:12:32,300 le 153 00:12:32,300 --> 00:12:34,440 courrier électronique, la durée de validité du 154 00:12:34,550 --> 00:12:40,220 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 155 00:12:40,220 --> 00:12:41,960 été créé et ce jeton d'actualisation.