1
00:00:02,170 --> 00:00:05,530
Agora, como mencionei, o Firebase possui autenticação incorporada. Precisamos apenas ir

2
00:00:05,530 --> 00:00:11,350
para a área de autenticação e clicar no método de login da instalação e escolher a senha e o

3
00:00:11,350 --> 00:00:16,500
email ou a senha de email aqui. Habilite isso e clique em Salvar e,

4
00:00:16,600 --> 00:00:18,550
com isso, nós o habilitamos.

5
00:00:18,550 --> 00:00:25,640
Agora podemos enviar solicitações a uma API do Firebase para criar usuários ou fazer logon. Agora, para descobrir para onde enviar as solicitações, você

6
00:00:25,640 --> 00:00:27,140
pode pesquisar no

7
00:00:27,140 --> 00:00:32,630
Google pela API de autenticação REST do Firebase e encontrará esses documentos oficiais nos quais

8
00:00:32,630 --> 00:00:36,180
aprenderá a criar e conectar usuários com a API.

9
00:00:36,210 --> 00:00:40,820
Agora, existem vários pontos de extremidade para coisas diferentes. Aqui neste aplicativo, focaremos na inscrição e

10
00:00:40,820 --> 00:00:41,440
no login.

11
00:00:41,540 --> 00:00:45,200
Portanto, se clicarmos em inscrever-se com e-mail e senha, aprendemos como isso funciona.

12
00:00:45,290 --> 00:00:52,250
Precisamos enviar uma solicitação HTTP, uma solicitação de postagem com esse tipo de conteúdo para este URL, inserir nossa própria chave de API aqui, que mostrarei

13
00:00:52,280 --> 00:00:58,890
a partir de onde você a obtém em um segundo e anexar esse corpo à solicitação. senha de email e, em seguida, esse campo

14
00:00:58,910 --> 00:01:05,180
de token seguro de retorno, que basicamente sempre deve ser verdadeiro. Como resposta, receberemos de volta um token, esse é

15
00:01:05,180 --> 00:01:10,820
o que mencionei no slide, o e-mail que usamos, um token de atualização mais avançado,

16
00:01:10,940 --> 00:01:13,790
esse token aqui expirará depois de alguns segundos

17
00:01:13,790 --> 00:01:19,430
que também receberemos de volta . Com um token de atualização, podemos recriá-lo, revalidá-lo

18
00:01:19,430 --> 00:01:22,350
sem que o usuário efetue login novamente; não faremos

19
00:01:22,910 --> 00:01:26,460
isso aqui; você teria um ponto de extremidade separado para o

20
00:01:26,570 --> 00:01:31,100
qual envia o token de atualização para obter um novo token de ID. Vamos

21
00:01:31,100 --> 00:01:37,310
simplificar as coisas aqui, basta usar esse token e conectar o usuário novamente após esse prazo, pois esse prazo também

22
00:01:37,310 --> 00:01:39,080
é algo que obtemos para

23
00:01:39,080 --> 00:01:43,880
que possamos saber quando esse token se tornará inválido e não poderá mais ser usado,

24
00:01:43,880 --> 00:01:49,850
pois temos que limpá-lo em nosso aplicativo até então, para não tentar anexar esse token inválido a solicitações futuras

25
00:01:49,850 --> 00:01:56,600
ao nosso banco de dados e localId, esse é o userId do usuário que o Firebase criou em seus servidores porque

26
00:01:56,600 --> 00:02:02,050
não precisamos fazer isso em qualquer gerenciamento de usuários, o Firebase fará isso, não precisamos escrever nenhum

27
00:02:02,060 --> 00:02:03,380
código no servidor.

28
00:02:03,440 --> 00:02:07,610
Então, o que precisamos fazer é enviar uma solicitação HTTP e,

29
00:02:07,610 --> 00:02:13,340
como também gerenciarei tudo isso com o Redux, criarei um novo criador de ação para isso e

30
00:02:13,340 --> 00:02:14,500
chamarei de auth.

31
00:02:14,510 --> 00:02:20,720
Também já criarei um redutor porque também gerenciaremos algumas coisas relacionadas à autenticação, por exemplo,

32
00:02:20,720 --> 00:02:22,790
o token e o userId.

33
00:02:23,090 --> 00:02:25,980
No entanto, vamos começar com a ação e,

34
00:02:26,510 --> 00:02:31,810
portanto, exportar um criador de ação para cá, que pode ser nomeado como inscrito, faz

35
00:02:31,940 --> 00:02:37,070
sentido começar, porque o login dos usuários só será possível após a criação de

36
00:02:37,070 --> 00:02:40,130
pelo menos um usuário. Portanto, aqui na inscrição,

37
00:02:40,130 --> 00:02:44,590
quero poder criar um novo usuário e, para isso, precisaremos de um

38
00:02:44,600 --> 00:02:50,420
email e uma senha para que sejam passados para o criador da ação de inscrição de fora.

39
00:02:50,690 --> 00:02:56,750
Agora, então, isso enviará uma solicitação HTTP e, para poder fazer isso, usaremos o pacote Redux

40
00:02:56,750 --> 00:03:01,180
Thunk novamente e, portanto, retornaremos o envio assíncrono aqui; portanto,

41
00:03:01,460 --> 00:03:07,970
retornamos uma função que pode usar o async wait que recebe esse despacho funciona como um argumento

42
00:03:08,000 --> 00:03:14,150
transmitido pelo middleware Redux Thunk que começamos a usar no último módulo HTTP deste curso e

43
00:03:14,150 --> 00:03:20,480
isso nos permite executar código assíncrono antes de despacharmos uma ação que realmente chega à nossa loja.

44
00:03:20,620 --> 00:03:25,940
Agora, também precisaremos de um identificador de ação para a ação que mais tarde queremos manipular

45
00:03:25,940 --> 00:03:31,590
em nossa loja e lá apenas utilizarei a inscrição, que também tem a inscrição como identificador de string.

46
00:03:31,850 --> 00:03:39,290
Portanto, aqui no final, enviaremos esse objeto de ação para onde o tipo está registrado e onde

47
00:03:39,290 --> 00:03:45,940
provavelmente adicionaremos alguns dados extras, mas antes de fazer isso, precisamos enviar uma solicitação HTTP.

48
00:03:46,020 --> 00:03:51,170
Agora isso pode ser feito com a API de busca, como você aprendeu no último módulo, e definitivamente passa por

49
00:03:51,170 --> 00:03:52,360
esse módulo primeiro e,

50
00:03:52,370 --> 00:04:01,130
portanto, este é o URL para o qual precisamos enviar a solicitação, para que possamos copiá-lo. Adicione aqui e agora temos a

51
00:04:01,130 --> 00:04:03,700
chave da API.

52
00:04:04,220 --> 00:04:07,240
Agora isso é algo que podemos obter do Firebase clicando no ícone de

53
00:04:07,250 --> 00:04:09,700
engrenagem aqui, configurações do projeto. Lá você

54
00:04:09,760 --> 00:04:13,450
encontrará a chave da API da web e é exatamente

55
00:04:13,460 --> 00:04:19,680
isso que você precisa, copie e substitua a chave da API, incluindo os colchetes com essa chave.

56
00:04:19,700 --> 00:04:25,970
Este é o URL para o qual precisamos enviar uma solicitação. Agora, como os documentos oficiais nos dizem, precisamos enviar

57
00:04:25,970 --> 00:04:26,870
uma solicitação

58
00:04:26,990 --> 00:04:30,950
de postagem. Assim, como você aprendeu, precisamos adicionar este segundo argumento

59
00:04:30,950 --> 00:04:36,680
aqui para buscar qual é um objeto que nos permite configurar essa solicitação e, aí, podemos

60
00:04:37,280 --> 00:04:44,180
definir o método para postar e também adicionar alguns cabeçalhos porque precisaremos adicionar o cabeçalho JSON do aplicativo, portanto, o

61
00:04:44,180 --> 00:04:52,130
cabeçalho do tipo de conteúdo que deve ter um valor de JSON do aplicativo e precisaremos adicionar um corpo e esse corpo precisa

62
00:04:52,130 --> 00:04:58,700
estar no formato JSON que podemos obter com JSON. O stringify e os dados que eu quero stringify precisam

63
00:04:58,700 --> 00:05:07,660
ser um objeto com essas três chaves - email, senha e retorno de token seguro. Portanto, aqui, é claro, o email refere-se ao email que estamos recebendo

64
00:05:07,660 --> 00:05:14,890
como argumento aqui, o mesmo para a senha, que se refere ao argumento da senha que estamos recebendo e, então,

65
00:05:14,890 --> 00:05:22,060
é o terceiro e eu vou copiá-lo para não digitar errado, retorne o argumento do token seguro aqui ou o

66
00:05:22,060 --> 00:05:29,770
par de valores-chave em que o valor deve ser verdadeiro. Essa solicitação deve criar um

67
00:05:29,770 --> 00:05:31,770
novo usuário.

68
00:05:31,900 --> 00:05:38,530
Agora podemos aguardar sua resposta com a palavra-chave wait e, como você aprendeu anteriormente, podemos verificar se

69
00:05:38,620 --> 00:05:46,660
a resposta não está boa; se esse for o caso, quero lançar um novo erro em que digo que algo deu

70
00:05:46,930 --> 00:05:55,340
errado e vamos dê uma olhada no tratamento de erros mais detalhado posteriormente, por enquanto é isso e se estiver tudo bem,

71
00:05:55,380 --> 00:06:02,970
no entanto, quero obter meus dados de resposta aguardando a resposta JSON, que descompactará o corpo da resposta e os

72
00:06:02,970 --> 00:06:09,780
transformará automaticamente do formato JSON para Javascript, portanto para um objeto ou matriz Javascript e agora poderemos

73
00:06:10,500 --> 00:06:16,200
trabalhar com isso e, por enquanto, simplesmente registrarei esses dados de resposta aqui.

74
00:06:17,910 --> 00:06:23,590
Agora não adicionamos o restante de nossa loja Redux relacionada à autenticação, faremos isso mais tarde, mas

75
00:06:23,590 --> 00:06:28,840
temos algo que deve funcionar, poderemos despachar isso e, portanto, enviar uma solicitação de inscrição.

76
00:06:28,840 --> 00:06:36,460
Portanto, agora podemos voltar à tela de autenticação e, no final, quando clicarmos neste botão de login, que está

77
00:06:36,460 --> 00:06:41,770
rotulado incorretamente no momento em que realmente fazemos a inscrição, mas vamos deixar

78
00:06:41,770 --> 00:06:42,420
assim

79
00:06:42,460 --> 00:06:50,330
por enquanto. botão Desejo enviar esta solicitação de inscrição. Portanto, para isso, precisamos, como antes, importar o

80
00:06:50,390 --> 00:06:55,810
despacho de uso do React Redux para poder despachar ações e, é

81
00:06:56,150 --> 00:07:05,810
claro, importar tudo como ações de autenticação dos dados da pasta de armazenamento, da pasta de ações e do arquivo de

82
00:07:05,810 --> 00:07:09,590
autenticação e com adicionado, podemos adicionar uma função

83
00:07:09,840 --> 00:07:13,170
aqui, uma função embutida ou algo como

84
00:07:13,190 --> 00:07:17,880
isto, uma função nomeada armazenada em uma constante que eu

85
00:07:18,410 --> 00:07:20,850
vou chamar de manipulador de

86
00:07:20,990 --> 00:07:23,240
inscrição, aí eu

87
00:07:23,250 --> 00:07:27,780
não espero argumentos e aí eu quero despachar, então precisamos

88
00:07:27,780 --> 00:07:33,590
para obter acesso a essa função de despacho executando use dispatch e, em

89
00:07:33,650 --> 00:07:36,090
seguida, aqui podemos despachar esse

90
00:07:36,210 --> 00:07:41,410
evento de inscrição de ações de autenticação ou ação de inscrição.

91
00:07:41,430 --> 00:07:44,430
Agora, o problema é que isso requer o email e a senha e,

92
00:07:44,430 --> 00:07:46,020
no momento, não estou armazenando isso.

93
00:07:46,020 --> 00:07:51,500
Eu recebo isso na minha entrada, mas aqui na alteração de entrada, não estou armazenando esses dados que, é claro, devo.

94
00:07:51,570 --> 00:07:56,320
Agora podemos dar uma olhada em nossa outra forma aqui para ver como fizemos isso.

95
00:07:56,370 --> 00:08:06,760
Portanto, na tela de edição do produto, é claro que temos aqui o nosso redutor de formulários, que gerencia toda a validade e os

96
00:08:06,910 --> 00:08:08,670
valores relacionados ao formulário.

97
00:08:08,800 --> 00:08:15,790
Então, no final, podemos copiar isso e adicioná-lo à tela de autenticação fora do componente de tela de

98
00:08:16,990 --> 00:08:24,140
autenticação como este e voltar à tela de edição do produto para também pegar a parte lá em baixo

99
00:08:24,140 --> 00:08:25,400
onde inicializamos

100
00:08:25,430 --> 00:08:28,970
com o uso de redutor, então copie tudo isso

101
00:08:28,970 --> 00:08:38,730
e adicione-o também à tela de autenticação, agora dentro do componente, talvez aqui e para que funcione, também precisamos importar o redutor de uso do React

102
00:08:38,730 --> 00:08:40,350
e com o importado,

103
00:08:40,480 --> 00:08:46,140
agora precisamos apenas ajustá-lo um pouco mordeu. Esse redutor de formulário é bom e, como você pode

104
00:08:46,150 --> 00:08:51,160
terceirizar isso em um arquivo separado, porque estamos usando o mesmo tipo de redutor na tela de

105
00:08:51,400 --> 00:08:53,860
autenticação e na tela de edição do produto,

106
00:08:53,860 --> 00:08:57,160
você pode até criar um gancho personalizado, se souber como funciona,

107
00:08:57,160 --> 00:08:59,180
por enquanto eu vou deixar assim.

108
00:08:59,230 --> 00:09:01,560
Uma coisa que eu preciso é a atualização de

109
00:09:01,570 --> 00:09:04,620
entrada de formulário, deixe-me pegar isso na tela de edição do produto

110
00:09:04,630 --> 00:09:05,810
também, esta constante aqui,

111
00:09:05,830 --> 00:09:08,020
vamos mover isso na tela de autenticação também.

112
00:09:08,980 --> 00:09:09,670
Então agora,

113
00:09:09,670 --> 00:09:15,190
com isso, está tudo bem, mas lá embaixo, onde eu chamo de uso redutor e inicializo tudo isso, é

114
00:09:15,190 --> 00:09:16,470
claro que parece diferente.

115
00:09:16,630 --> 00:09:22,120
Deveríamos ter um email inicialmente vazio e uma senha inicialmente vazia e para

116
00:09:22,120 --> 00:09:23,720
a validade, é

117
00:09:23,800 --> 00:09:28,690
a mesma coisa, apenas um email inicialmente inválido e uma senha inicialmente

118
00:09:28,690 --> 00:09:33,310
inválida e, portanto, o formulário geral também inicialmente não é válido.

119
00:09:34,570 --> 00:09:40,240
Agora, o estado do formulário de despacho deve ser acionado sempre que nossa entrada for alterada aqui; portanto,

120
00:09:43,290 --> 00:09:49,830
aqui na alteração de entrada, é claro que você sabe e pode vê-lo na tela de edição do produto, obtemos três

121
00:09:49,830 --> 00:09:55,230
valores - obtemos o identificador de entrada, o valor de entrada e a validade da entrada.

122
00:09:56,100 --> 00:10:03,630
Portanto, no final, podemos simplesmente copiar isso aqui da tela de edição do produto e movê-lo para a tela de

123
00:10:03,630 --> 00:10:10,630
autenticação e substituir esta função anônima por ela ou, na verdade, armazená-la em uma nova variável aqui, manipulador

124
00:10:10,770 --> 00:10:18,620
de alterações de entrada que agora mantém essa função. Agora, assim como na tela de edição de produto, você deve

125
00:10:18,620 --> 00:10:24,620
usar isso com retorno de chamada para garantir que isso não seja renderizado novamente quando não deveria.

126
00:10:24,620 --> 00:10:31,190
Então, na verdade, devemos buscá-lo aqui, incluindo a chamada de retorno de chamada de uso e as dependências

127
00:10:31,250 --> 00:10:38,360
do retorno de chamada de uso; portanto, é isso que deve ser usado lá no manipulador de alterações de entrada.

128
00:10:38,460 --> 00:10:45,690
Agora, esse manipulador de alterações de entrada pode ser vinculado ou pode ser definido aqui para os adereços de alteração de entrada,

129
00:10:45,720 --> 00:10:48,340
para que esses objetos tenham como objetivo

130
00:10:48,840 --> 00:10:55,740
essa função e agora, com isso, estamos armazenando nossos valores de formulário ou valores de entrada em nosso estado de formulário

131
00:10:55,740 --> 00:10:59,370
com os quais lidamos com use redutor e assim por diante.

132
00:10:59,380 --> 00:11:04,630
Portanto, agora é neste estado de formulário em que estou interessado aqui no meu manipulador de inscrição, porque para me

133
00:11:04,630 --> 00:11:11,830
inscrever, preciso passar dos valores de entrada do estado. valores de entrada de email e estado do formulário. senha, então esses dois valores que

134
00:11:11,840 --> 00:11:18,850
foram reunidos e agora o manipulador de inscrição aqui, esta função pode ser vinculada a este botão lá em

135
00:11:18,850 --> 00:11:24,320
baixo, ao botão de login aqui no onPress, porque esta é a função que

136
00:11:24,560 --> 00:11:28,160
eu quero apontar para executá-lo quando Pressione este botão.

137
00:11:28,410 --> 00:11:34,810
Vamos ver se isso funciona como deveria. Se eu começar a inserir valores aqui, eu recebo

138
00:11:38,160 --> 00:11:42,750
meus erros de validação, mas de alguma forma eles não estão aparecendo, é

139
00:11:44,040 --> 00:11:50,950
o caso porque não é uma mensagem de erro aqui, mas um texto de erro nas entradas na tela de autenticação.

140
00:11:51,060 --> 00:11:54,920
Portanto, se alterarmos essa mensagem de erro para texto de erro, agora, se testarmos

141
00:11:55,020 --> 00:11:58,460
isso, por isso, se eu clicar aqui, sair daqui, recebo meus avisos.

142
00:11:58,500 --> 00:12:00,960
Agora, se eu inserir um endereço de e-mail válido,

143
00:12:00,960 --> 00:12:08,350
ele se foi, se eu digitar uma senha que seja longa o suficiente, se for, se eu clicar agora no login aqui, vamos ver se isso

144
00:12:08,350 --> 00:12:08,740
funciona.

145
00:12:08,740 --> 00:12:14,880
Vamos para o Firebase, para autenticação e, agora, você deve ver um novo usuário, este é o

146
00:12:14,950 --> 00:12:17,360
usuário que acabou de ser criado.

147
00:12:17,530 --> 00:12:19,810
Portanto, a inscrição funciona, agora vamos ter certeza

148
00:12:19,810 --> 00:12:24,060
de que também podemos mudar para o modo de login e fazer com que funcione também.

149
00:12:25,100 --> 00:12:28,970
A propósito, observe também que aqui estão os dados que recebemos, então

150
00:12:29,030 --> 00:12:30,150
essa é a

151
00:12:30,150 --> 00:12:31,810
resposta, esse objeto com email,

152
00:12:31,880 --> 00:12:32,300
quanto

153
00:12:32,300 --> 00:12:34,440
tempo o token é válido em segundos,

154
00:12:34,550 --> 00:12:40,220
o próprio token que é essa longa cadeia criptográfica e também o ID do usuário que foi criado

155
00:12:40,220 --> 00:12:41,960
e que atualiza o token.