1
00:00:02,140 --> 00:00:08,590
Alors, comment pouvons-nous quitter cet écran d'authentification maintenant si nous sommes connectés ou si nous nous sommes inscrits avec succès?

2
00:00:09,520 --> 00:00:11,130
Eh bien, ce n'est pas trop difficile.

3
00:00:11,380 --> 00:00:16,690
Si nous dépassons cette répartition ici sans atterrir dans le bloc catch, il est donc

4
00:00:16,720 --> 00:00:18,730
toujours ici dans le bloc

5
00:00:19,090 --> 00:00:26,560
try, nous pouvons simplement appeler des accessoires. la navigation. naviguez comme nous l'avons toujours fait et

6
00:00:26,560 --> 00:00:29,470
accédez aux différents écrans que nous avons configurés dans

7
00:00:29,470 --> 00:00:37,500
notre navigateur de commutation, donc dans ce cas à l'écran de la boutique. Alors faisons-le, allons simplement faire des emplettes et là pour l'instant dès

8
00:00:37,500 --> 00:00:42,950
que nous nous connectons avec succès, ce que je vais maintenant faire, cela se charge et

9
00:00:43,030 --> 00:00:45,300
nous sommes ici. Maintenant, je vais recevoir

10
00:00:45,330 --> 00:00:49,300
un avertissement ici concernant une mise à jour d'état qui n'a pas pu être effectuée, c'est

11
00:00:49,300 --> 00:00:55,450
que cet ensemble charge l'état qui échoue maintenant si nous naviguons. La solution est simplement que nous ne devrions pas essayer de mettre à

12
00:00:55,450 --> 00:01:01,000
jour l'état sur cet écran si nous ne sommes plus sur l'écran, nous pouvons donc simplement le déplacer dans le bloc catch car nous

13
00:01:01,000 --> 00:01:05,560
n'aurons besoin de réinitialiser le chargement qu'en cas d'erreur car c'est le seul cas où nous restons sur l'écran

14
00:01:05,560 --> 00:01:07,600
d'authentification, sinon nous n'avons pas besoin de changer

15
00:01:07,600 --> 00:01:12,190
l'état de chargement car nous quittons quand même l'écran. Donc, avec cela, nous nous débarrasserons

16
00:01:12,190 --> 00:01:13,780
de cela également, si

17
00:01:13,780 --> 00:01:17,080
je réessaye maintenant, nous y voilà et maintenant

18
00:01:17,300 --> 00:01:18,170
nous

19
00:01:18,170 --> 00:01:22,730
sommes dans notre magasin principal. Maintenant, nous n'utilisons toujours pas le jeton,

20
00:01:22,730 --> 00:01:24,620
alors assurons-nous de le

21
00:01:24,740 --> 00:01:31,550
faire également et pour cela, allons au réducteur d'authentification et ajoutez-y un état initial qui décrit essentiellement avec quel état

22
00:01:31,640 --> 00:01:35,850
nous voulons commencer et ce que notre général la forme de l'état

23
00:01:36,230 --> 00:01:41,960
est et là je veux stocker le jeton qui est initialement nul et je veux stocker

24
00:01:41,960 --> 00:01:45,980
le userId qui est initialement nul, donc état initial très basique.

25
00:01:45,980 --> 00:01:51,230
Ensuite, nous pouvons exporter la fonction de réduction qui prend cet état initial et qui reçoit

26
00:01:52,010 --> 00:01:57,430
également bien sûr une action et ici, je veux activer le type d'action comme toujours et j'ai

27
00:01:57,430 --> 00:01:59,960
deux cas qui m'intéressent en ce moment.

28
00:01:59,980 --> 00:02:08,190
L'une est l'action de connexion, vous devez donc importer cet identifiant à partir du dossier actions et du

29
00:02:08,190 --> 00:02:12,530
fichier d'authentification et l'autre cas est l'action d'inscription, vous

30
00:02:12,580 --> 00:02:14,680
devez donc également importer

31
00:02:15,820 --> 00:02:25,400
cet identifiant, dans d'autres cas, je veux juste retourner mon état. Donc, si nous nous connectons, je veux retourner un nouvel état où

32
00:02:25,400 --> 00:02:33,400
le jeton devrait être disons action. token et userId devraient être une action. userId et c'est la même mise à jour

33
00:02:33,940 --> 00:02:38,530
dont j'ai besoin pour vous inscrire afin que nous puissions simplement copier cela là-bas.

34
00:02:39,220 --> 00:02:44,530
Maintenant, bien sûr, nous devons nous assurer que notre action porte un jeton et un ID

35
00:02:44,530 --> 00:02:51,970
utilisateur, donc dans le créateur d'action à la fin de l'inscription ici lorsque j'envoie l'action d'inscription, nous devons ajouter un champ de

36
00:02:51,970 --> 00:02:55,300
jeton et nous devons ajouter un ID utilisateur champ.

37
00:02:55,470 --> 00:03:03,670
Maintenant, le jeton peut être obtenu à partir des données de réponse, il y a ce jeton ID et le même ici, resData n'est pas un jeton

38
00:03:03,670 --> 00:03:09,250
ID mais c'est localId et vous voyez qu'ici dans le journal, localId, voici l'ID utilisateur et si vous

39
00:03:09,280 --> 00:03:16,530
faites défiler vers le haut , Jeton d'identification, c'est le jeton. C'est ce que j'envoie ici et nous pouvons simplement

40
00:03:17,070 --> 00:03:21,140
le copier et l'utiliser de la même manière, presque la même chose

41
00:03:21,150 --> 00:03:28,140
pour la connexion, la seule chose qui doit changer est cet identifiant et vous pouvez même unir la connexion et

42
00:03:28,140 --> 00:03:34,800
vous inscrire à un identifiant d'authentification combiné disons car dans un réducteur, on fait la même chose de toute façon.

43
00:03:34,920 --> 00:03:40,200
Je viens donc de le diviser ici pour être clair que nous avons deux choses différentes à la fin, mais la

44
00:03:40,200 --> 00:03:44,420
mise à jour est la même, nous pourrions donc certainement combiner ces deux types d'action.

45
00:03:45,250 --> 00:03:48,970
Donc, avec cela, nous stockons maintenant le jeton et c'est bien, mais

46
00:03:49,330 --> 00:03:51,990
pourquoi avons-nous besoin de ce jeton à nouveau?

47
00:03:52,150 --> 00:03:59,700
Nous avons besoin de ce jeton que nous stockons maintenant pour accéder à notre API et pour cela, passons à Firebase et à la

48
00:03:59,700 --> 00:04:00,870
base de données.

49
00:04:00,870 --> 00:04:05,940
Gardez à l'esprit que lorsque nous avons créé cette base de données, j'ai mentionné que vous devriez commencer dans

50
00:04:05,940 --> 00:04:11,370
ce mode de test si vous vous en souvenez. Ce que cela a fait, c'est qu'il a mis en place certaines règles et

51
00:04:11,370 --> 00:04:15,810
vous pouvez les vérifier si vous cliquez sur l'onglet règles. Cela contrôle qui peut lire et écrire dans votre base

52
00:04:15,810 --> 00:04:20,730
de données et pour le moment, cela est à la fois vrai, ce qui signifie que tout le monde peut tout lire et tout

53
00:04:20,820 --> 00:04:21,930
le monde peut tout écrire.

54
00:04:22,230 --> 00:04:32,630
Ce n'est bien sûr généralement pas ce que vous voulez, au lieu de cela, ici, je définirai les deux sur auth inégale à null, ce qui pourrait sembler étrange et cela devrait être

55
00:04:32,630 --> 00:04:39,200
des guillemets en passant ici, mais c'est la syntaxe Firebase et vous pouvez en apprendre plus sur les règles ici en

56
00:04:39,200 --> 00:04:44,480
en cliquant sur en savoir plus ou simplement sur google pour les règles de sécurité de la

57
00:04:44,480 --> 00:04:46,960
base de données en temps réel Firebase.

58
00:04:47,000 --> 00:04:53,000
Ce que cela indique à Firebase, c'est que seuls les utilisateurs authentifiés, donc seuls les utilisateurs qui

59
00:04:53,000 --> 00:04:57,400
envoient la demande avec un jeton valide devraient pouvoir lire et écrire.

60
00:04:57,560 --> 00:05:00,080
Maintenant, vous pourriez même faire valoir que Redux devrait toujours

61
00:05:00,110 --> 00:05:06,710
être autorisé, nous pourrions définir cela sur true et vous pourriez même être plus précis concernant les règles afin que vous disiez que Redux des produits

62
00:05:06,710 --> 00:05:07,970
est autorisé, que Redux

63
00:05:07,970 --> 00:05:09,770
des commandes ne l'est pas, mais encore

64
00:05:09,800 --> 00:05:13,200
une fois, c'est quelque chose que vous pouvez vérifier avec les documents officiels.

65
00:05:13,370 --> 00:05:18,950
J'irai avec la configuration où Redux est toujours autorisé mais l'écriture ne l'est pas.

66
00:05:19,010 --> 00:05:22,160
Alors maintenant, pour écrire, nous avons besoin

67
00:05:22,160 --> 00:05:28,640
d'un jeton, sinon nous ferons face à un problème. Si nous nous connectons ici et que nous stockons le jeton

68
00:05:28,640 --> 00:05:30,440
mais que nous ne l'ajoutons

69
00:05:30,650 --> 00:05:33,060
pas aux demandes pour le moment, vous voyez que

70
00:05:33,320 --> 00:05:38,510
nous pouvons charger toutes les données, c'est bien mais vous remarquerez également que si j'essaie de modifier cela

71
00:05:38,510 --> 00:05:45,420
et d'en supprimer quelques-unes des points d'exclamation ici, à la fin, j'obtiens une erreur et cette erreur est levée car je ne suis pas

72
00:05:45,420 --> 00:05:49,190
autorisé à écrire et Firebase bloque donc l'accès et renvoie une réponse d'erreur.

73
00:05:49,190 --> 00:05:54,890
Alors maintenant, nous devons tirer parti du jeton qui est stocké dans un réducteur et l'ajouter réellement

74
00:05:54,890 --> 00:05:56,360
à nos demandes sortantes.

75
00:05:56,360 --> 00:06:00,940
Maintenant, pour cela, nous devons d'abord enregistrer ce réducteur

76
00:06:00,950 --> 00:06:08,300
dans notre réducteur racine, donc dans l'application. fichier js, nous devons l'importer, nous devons importer le réducteur d'authentification du magasin et

77
00:06:08,300 --> 00:06:14,780
là le dossier des réducteurs et là, le fichier d'authentification et l'ajouter aux réducteurs combinés, peut-être être ici avec la clé d'authentification mais bien sûr

78
00:06:14,780 --> 00:06:20,030
vous pouvez utiliser n'importe quelle clé que vous voulez. Cela nous permettra ensuite d'en tirer parti

79
00:06:20,240 --> 00:06:26,360
et d'accéder à ce jeton, mais nous devons maintenant le joindre aux demandes sortantes, par exemple pour les produits,

80
00:06:26,360 --> 00:06:29,450
nous devons le joindre à la demande que nous envoyons

81
00:06:29,510 --> 00:06:38,090
pour la mise à jour des produits, ce serait donc cette demande ici. Maintenant, la façon dont vous ajoutez une demande dans Firebase peut être trouvée

82
00:06:38,090 --> 00:06:44,570
dans les documents officiels de Firebase pour l'authentification des utilisateurs de la base de données en temps réel ici, à

83
00:06:44,570 --> 00:06:52,640
la fin ce que vous avez appris est que vous pouvez ajouter un jeton à votre demande sortante simplement en ajoutant cette requête d'authentification à

84
00:06:52,760 --> 00:06:55,540
la fin de l'URL de votre demande.

85
00:06:55,790 --> 00:06:59,690
Donc ici, à la fin, nous devons ajouter un point d'interrogation

86
00:07:00,080 --> 00:07:06,160
égal, puis ici, nous devons avoir notre jeton. Maintenant, comment pouvons-nous accéder au jeton ici?

87
00:07:06,180 --> 00:07:12,790
Nous sommes dans le créateur d'action, ce qui signifie que nous n'avons pas d'accès facile

88
00:07:13,070 --> 00:07:20,390
au magasin ici, au magasin Redux ou non? Redux Thunk, ce joli paquet qui nous permet d'écrire cette syntaxe avec cette

89
00:07:20,390 --> 00:07:24,720
fonction qui reçoit la fonction de répartition, qui nous donne en fait quelque chose de doux.

90
00:07:24,800 --> 00:07:30,860
Nous pouvons également modifier un peu cette fonction et non seulement obtenir la répartition mais également obtenir un deuxième

91
00:07:30,860 --> 00:07:35,250
argument qui est une autre fonction qui nous donne accès à l'état Redux,

92
00:07:35,510 --> 00:07:43,230
nous avons donc accès à l'état actuel de notre magasin Redux. Donc, si je console le résultat de l'état get ici, voyons ce

93
00:07:43,230 --> 00:07:45,300
que cela nous donne et pour

94
00:07:45,300 --> 00:07:51,860
éviter les erreurs, pour le moment, ici je vais juste ajouter une chaîne vide pour que nous puissions tester ce code.

95
00:07:51,870 --> 00:07:56,400
Bien sûr, cela ne fonctionnera pas, mais nous le corrigerons bientôt, alors voyons ce qu'il y a à l'intérieur de cet état si nous

96
00:07:56,400 --> 00:07:56,700
l'exécutons.

97
00:08:00,000 --> 00:08:00,540
Il

98
00:08:00,570 --> 00:08:03,660
est donc temps de vous reconnecter très rapidement, puis

99
00:08:04,550 --> 00:08:09,010
accédez à l'écran d'administration et essayez de modifier ce qui, bien sûr, échouera toujours, mais

100
00:08:09,970 --> 00:08:13,300
cela n'a pas d'importance parce que si je clique ici, oui,

101
00:08:13,420 --> 00:08:19,690
cela échoue, mais ce que vous verrez, c'est qu'ici dans le journal, ce que nous obtenons est une sortie complète de

102
00:08:19,780 --> 00:08:22,270
notre magasin Redux complet. C'est notre magasin

103
00:08:22,270 --> 00:08:28,570
Redux, nous obtenons un objet avec notre tranche d'état d'authentification qui a encore un autre objet avec notre jeton

104
00:08:28,570 --> 00:08:34,880
et l'ID utilisateur, notre tranche d'état de carte, notre tranche d'état de commandes et notre tranche d'état de produits.

105
00:08:34,960 --> 00:08:40,540
Cela me permet donc d'accéder à ma boutique Redux et d'accéder au jeton, afin que le

106
00:08:40,540 --> 00:08:48,060
jeton puisse être récupéré en exécutant getState. auth. jeton parce que cela nous donne accès

107
00:08:48,070 --> 00:08:53,890
à notre magasin Redux complet, cela nous donne alors accès à la tranche d'authentification et cela à la propriété

108
00:08:53,890 --> 00:08:59,810
de jeton que nous gérons dans cette tranche d'authentification. Et maintenant, dans le créateur d'action

109
00:09:00,090 --> 00:09:09,440
de produits, nous pouvons ajouter ce jeton ici à la fin. Donc, ici, nous pouvons simplement remplacer cette chaîne par la variable token qui

110
00:09:09,440 --> 00:09:11,600
contient notre jeton et maintenant

111
00:09:11,600 --> 00:09:17,330
si nous l'enregistrons, avec ce petit changement, si nous nous connectons à nouveau et plus tard, nous

112
00:09:17,390 --> 00:09:20,000
changerons également cela de telle sorte que

113
00:09:20,000 --> 00:09:27,490
nous n'avons pas constamment besoin de se reconnecter, pas de soucis. Si nous nous connectons à nouveau, nous allons à l'administrateur, cliquez sur l'ajouter ici et

114
00:09:27,710 --> 00:09:33,800
maintenant nous essayons cela, cela fonctionne à nouveau parce que maintenant le jeton est ajouté, Firebase le valide et détermine qu'il est valide

115
00:09:33,830 --> 00:09:35,890
car bien sûr nous ne l'avons pas

116
00:09:35,900 --> 00:09:39,170
mélangé avec lui , c'est un jeton valide et donc cela fonctionne.

117
00:09:39,200 --> 00:09:43,190
Maintenant, nous n'avons pas seulement besoin du jeton lorsque nous mettons à jour nos produits, nous

118
00:09:43,190 --> 00:09:48,410
en avons également besoin lorsque nous ajoutons un nouveau produit. Je vais donc copier cette logique et ajouter

119
00:09:48,410 --> 00:09:54,310
la même logique ici, lorsque nous créons un produit, j'obtiens mon jeton à l'aide de ce deuxième argument que

120
00:09:54,310 --> 00:09:56,330
nous pouvons obtenir ici si nous

121
00:09:56,440 --> 00:10:03,320
en avons besoin, la fonction get state et cela me permet de changez ces guillemets simples pour revenir aux ticks afin que je

122
00:10:03,320 --> 00:10:09,530
puisse facilement ajouter ce paramètre de requête ici à la fin avec un point d'interrogation égal et égal à mon jeton.

123
00:10:09,530 --> 00:10:15,300
Alors maintenant, nous pouvons créer un produit et mettre à jour un produit, la suppression est

124
00:10:15,410 --> 00:10:22,430
bien sûr également une demande d'écriture, donc pour supprimer le produit, je ferai de même, j'aurai accès à mon magasin

125
00:10:22,430 --> 00:10:29,130
avec la fonction get state ici, puis ajouter un point d'interrogation d'ici à la fin et ajoutez le jeton.

126
00:10:29,300 --> 00:10:30,290
Voilà donc une chose.

127
00:10:30,320 --> 00:10:36,260
Maintenant, dans les commandes, c'est une chose similaire, là pour aller chercher, nous n'en avons pas besoin mais pour ajouter nous le faisons

128
00:10:36,290 --> 00:10:38,260
parce que l'ajout est une opération d'écriture.

129
00:10:38,480 --> 00:10:45,110
Donc là, on obtient l'état si on veut, on peut en extraire le token avec la même approche qu'avant et

130
00:10:45,110 --> 00:10:52,880
on peut l'ajouter ça et là, on aura en fait aussi besoin de userId bientôt, donc on prendra soin à ce sujet dans la

131
00:10:52,880 --> 00:10:54,860
prochaine conférence, mais pour l'instant,

132
00:10:54,860 --> 00:10:57,810
assurez-vous simplement d'ajouter le jeton partout et voyons maintenant

133
00:10:57,890 --> 00:11:02,570
comment nous pouvons également nous assurer que les commandes appartiennent réellement à notre utilisateur.