Agora, como mencionei, o Firebase possui autenticação incorporada. Precisamos apenas ir
para a área de autenticação e clicar no método de login da instalação e escolher a senha e o
email ou a senha de email aqui. Habilite isso e clique em Salvar e,
com isso, nós o habilitamos.
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ê
pode pesquisar no
Google pela API de autenticação REST do Firebase e encontrará esses documentos oficiais nos quais
aprenderá a criar e conectar usuários com a API.
Agora, existem vários pontos de extremidade para coisas diferentes. Aqui neste aplicativo, focaremos na inscrição e
no login.
Portanto, se clicarmos em inscrever-se com e-mail e senha, aprendemos como isso funciona.
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
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
de token seguro de retorno, que basicamente sempre deve ser verdadeiro. Como resposta, receberemos de volta um token, esse é
o que mencionei no slide, o e-mail que usamos, um token de atualização mais avançado,
esse token aqui expirará depois de alguns segundos
que também receberemos de volta . Com um token de atualização, podemos recriá-lo, revalidá-lo
sem que o usuário efetue login novamente; não faremos
isso aqui; você teria um ponto de extremidade separado para o
qual envia o token de atualização para obter um novo token de ID. Vamos
simplificar as coisas aqui, basta usar esse token e conectar o usuário novamente após esse prazo, pois esse prazo também
é algo que obtemos para
que possamos saber quando esse token se tornará inválido e não poderá mais ser usado,
pois temos que limpá-lo em nosso aplicativo até então, para não tentar anexar esse token inválido a solicitações futuras
ao nosso banco de dados e localId, esse é o userId do usuário que o Firebase criou em seus servidores porque
não precisamos fazer isso em qualquer gerenciamento de usuários, o Firebase fará isso, não precisamos escrever nenhum
código no servidor.
Então, o que precisamos fazer é enviar uma solicitação HTTP e,
como também gerenciarei tudo isso com o Redux, criarei um novo criador de ação para isso e
chamarei de auth.
Também já criarei um redutor porque também gerenciaremos algumas coisas relacionadas à autenticação, por exemplo,
o token e o userId.
No entanto, vamos começar com a ação e,
portanto, exportar um criador de ação para cá, que pode ser nomeado como inscrito, faz
sentido começar, porque o login dos usuários só será possível após a criação de
pelo menos um usuário. Portanto, aqui na inscrição,
quero poder criar um novo usuário e, para isso, precisaremos de um
email e uma senha para que sejam passados para o criador da ação de inscrição de fora.
Agora, então, isso enviará uma solicitação HTTP e, para poder fazer isso, usaremos o pacote Redux
Thunk novamente e, portanto, retornaremos o envio assíncrono aqui; portanto,
retornamos uma função que pode usar o async wait que recebe esse despacho funciona como um argumento
transmitido pelo middleware Redux Thunk que começamos a usar no último módulo HTTP deste curso e
isso nos permite executar código assíncrono antes de despacharmos uma ação que realmente chega à nossa loja.
Agora, também precisaremos de um identificador de ação para a ação que mais tarde queremos manipular
em nossa loja e lá apenas utilizarei a inscrição, que também tem a inscrição como identificador de string.
Portanto, aqui no final, enviaremos esse objeto de ação para onde o tipo está registrado e onde
provavelmente adicionaremos alguns dados extras, mas antes de fazer isso, precisamos enviar uma solicitação HTTP.
Agora isso pode ser feito com a API de busca, como você aprendeu no último módulo, e definitivamente passa por
esse módulo primeiro e,
portanto, este é o URL para o qual precisamos enviar a solicitação, para que possamos copiá-lo. Adicione aqui e agora temos a
chave da API.
Agora isso é algo que podemos obter do Firebase clicando no ícone de
engrenagem aqui, configurações do projeto. Lá você
encontrará a chave da API da web e é exatamente
isso que você precisa, copie e substitua a chave da API, incluindo os colchetes com essa chave.
Este é o URL para o qual precisamos enviar uma solicitação. Agora, como os documentos oficiais nos dizem, precisamos enviar
uma solicitação
de postagem. Assim, como você aprendeu, precisamos adicionar este segundo argumento
aqui para buscar qual é um objeto que nos permite configurar essa solicitação e, aí, podemos
definir o método para postar e também adicionar alguns cabeçalhos porque precisaremos adicionar o cabeçalho JSON do aplicativo, portanto, o
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
estar no formato JSON que podemos obter com JSON. O stringify e os dados que eu quero stringify precisam
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
como argumento aqui, o mesmo para a senha, que se refere ao argumento da senha que estamos recebendo e, então,
é o terceiro e eu vou copiá-lo para não digitar errado, retorne o argumento do token seguro aqui ou o
par de valores-chave em que o valor deve ser verdadeiro. Essa solicitação deve criar um
novo usuário.
Agora podemos aguardar sua resposta com a palavra-chave wait e, como você aprendeu anteriormente, podemos verificar se
a resposta não está boa; se esse for o caso, quero lançar um novo erro em que digo que algo deu
errado e vamos dê uma olhada no tratamento de erros mais detalhado posteriormente, por enquanto é isso e se estiver tudo bem,
no entanto, quero obter meus dados de resposta aguardando a resposta JSON, que descompactará o corpo da resposta e os
transformará automaticamente do formato JSON para Javascript, portanto para um objeto ou matriz Javascript e agora poderemos
trabalhar com isso e, por enquanto, simplesmente registrarei esses dados de resposta aqui.
Agora não adicionamos o restante de nossa loja Redux relacionada à autenticação, faremos isso mais tarde, mas
temos algo que deve funcionar, poderemos despachar isso e, portanto, enviar uma solicitação de inscrição.
Portanto, agora podemos voltar à tela de autenticação e, no final, quando clicarmos neste botão de login, que está
rotulado incorretamente no momento em que realmente fazemos a inscrição, mas vamos deixar
assim
por enquanto. botão Desejo enviar esta solicitação de inscrição. Portanto, para isso, precisamos, como antes, importar o
despacho de uso do React Redux para poder despachar ações e, é
claro, importar tudo como ações de autenticação dos dados da pasta de armazenamento, da pasta de ações e do arquivo de
autenticação e com adicionado, podemos adicionar uma função
aqui, uma função embutida ou algo como
isto, uma função nomeada armazenada em uma constante que eu
vou chamar de manipulador de
inscrição, aí eu
não espero argumentos e aí eu quero despachar, então precisamos
para obter acesso a essa função de despacho executando use dispatch e, em
seguida, aqui podemos despachar esse
evento de inscrição de ações de autenticação ou ação de inscrição.
Agora, o problema é que isso requer o email e a senha e,
no momento, não estou armazenando isso.
Eu recebo isso na minha entrada, mas aqui na alteração de entrada, não estou armazenando esses dados que, é claro, devo.
Agora podemos dar uma olhada em nossa outra forma aqui para ver como fizemos isso.
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
valores relacionados ao formulário.
Então, no final, podemos copiar isso e adicioná-lo à tela de autenticação fora do componente de tela de
autenticação como este e voltar à tela de edição do produto para também pegar a parte lá em baixo
onde inicializamos
com o uso de redutor, então copie tudo isso
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
e com o importado,
agora precisamos apenas ajustá-lo um pouco mordeu. Esse redutor de formulário é bom e, como você pode
terceirizar isso em um arquivo separado, porque estamos usando o mesmo tipo de redutor na tela de
autenticação e na tela de edição do produto,
você pode até criar um gancho personalizado, se souber como funciona,
por enquanto eu vou deixar assim.
Uma coisa que eu preciso é a atualização de
entrada de formulário, deixe-me pegar isso na tela de edição do produto
também, esta constante aqui,
vamos mover isso na tela de autenticação também.
Então agora,
com isso, está tudo bem, mas lá embaixo, onde eu chamo de uso redutor e inicializo tudo isso, é
claro que parece diferente.
Deveríamos ter um email inicialmente vazio e uma senha inicialmente vazia e para
a validade, é
a mesma coisa, apenas um email inicialmente inválido e uma senha inicialmente
inválida e, portanto, o formulário geral também inicialmente não é válido.
Agora, o estado do formulário de despacho deve ser acionado sempre que nossa entrada for alterada aqui; portanto,
aqui na alteração de entrada, é claro que você sabe e pode vê-lo na tela de edição do produto, obtemos três
valores - obtemos o identificador de entrada, o valor de entrada e a validade da entrada.
Portanto, no final, podemos simplesmente copiar isso aqui da tela de edição do produto e movê-lo para a tela de
autenticação e substituir esta função anônima por ela ou, na verdade, armazená-la em uma nova variável aqui, manipulador
de alterações de entrada que agora mantém essa função. Agora, assim como na tela de edição de produto, você deve
usar isso com retorno de chamada para garantir que isso não seja renderizado novamente quando não deveria.
Então, na verdade, devemos buscá-lo aqui, incluindo a chamada de retorno de chamada de uso e as dependências
do retorno de chamada de uso; portanto, é isso que deve ser usado lá no manipulador de alterações de entrada.
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,
para que esses objetos tenham como objetivo
essa função e agora, com isso, estamos armazenando nossos valores de formulário ou valores de entrada em nosso estado de formulário
com os quais lidamos com use redutor e assim por diante.
Portanto, agora é neste estado de formulário em que estou interessado aqui no meu manipulador de inscrição, porque para me
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
foram reunidos e agora o manipulador de inscrição aqui, esta função pode ser vinculada a este botão lá em
baixo, ao botão de login aqui no onPress, porque esta é a função que
eu quero apontar para executá-lo quando Pressione este botão.
Vamos ver se isso funciona como deveria. Se eu começar a inserir valores aqui, eu recebo
meus erros de validação, mas de alguma forma eles não estão aparecendo, é
o caso porque não é uma mensagem de erro aqui, mas um texto de erro nas entradas na tela de autenticação.
Portanto, se alterarmos essa mensagem de erro para texto de erro, agora, se testarmos
isso, por isso, se eu clicar aqui, sair daqui, recebo meus avisos.
Agora, se eu inserir um endereço de e-mail válido,
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
funciona.
Vamos para o Firebase, para autenticação e, agora, você deve ver um novo usuário, este é o
usuário que acabou de ser criado.
Portanto, a inscrição funciona, agora vamos ter certeza
de que também podemos mudar para o modo de login e fazer com que funcione também.
A propósito, observe também que aqui estão os dados que recebemos, então
essa é a
resposta, esse objeto com email,
quanto
tempo o token é válido em segundos,
o próprio token que é essa longa cadeia criptográfica e também o ID do usuário que foi criado
e que atualiza o token.