Ora, come ho già detto, Firebase ha l'autenticazione integrata, dobbiamo solo
andare nell'area di autenticazione lì e quindi fare clic sul metodo di configurazione dell'accesso e scegliere qui la
password e l'e-mail o la password e-mail. Abilita questo e fai clic su Salva e
con quello, lo abbiamo abilitato.
Ora possiamo inviare richieste a un'API Firebase per creare utenti o per accedervi. Ora per scoprire dove inviare le richieste, puoi
cercare su Google
l'API Auth REST di Firebase e troverai questi documenti ufficiali in cui imparerai come
creare e accedere agli utenti con la loro API.
Ora ci sono un sacco di endpoint per cose diverse, qui in questa app ci concentreremo sulla registrazione
e l'accesso.
Quindi, se facciamo clic su Iscriviti con e-mail e password, abbiamo imparato come funziona.
Dobbiamo inviare una richiesta HTTP, una richiesta di post con questo tipo di contenuto a questo URL, inserire qui la nostra chiave API che ti
mostrerò da dove la ricevi in un secondo e allego questo corpo alla richiesta, quindi e- password di posta elettronica e quindi questo campo
token sicuro di ritorno che dovrebbe essere praticamente sempre vero. Come risposta, restituiremo un token, questo è quel token
che ho menzionato nella diapositiva, l'e-mail che abbiamo usato, un token di aggiornamento che è più
avanzato, questo token qui scadrà effettivamente dopo questa
quantità di secondi che torniamo anche . Con un token di aggiornamento, potremmo ricrearlo, riconvalidarlo
senza che l'utente abbia effettuato nuovamente l'accesso, non lo
faremo qui, avresti un endpoint separato a cui inviare il token
di aggiornamento per ottenere un nuovo token ID, noi " Lo terremo semplice qui
e userò quel token e riconnetterò l'utente dopo quel tempo di scadenza perché quel tempo di scadenza è anche
qualcosa che otteniamo in modo
da sapere quando questo token diventerà non valido e non potrà più essere utilizzato perché
a quel punto dobbiamo ripulirlo nella nostra app, in modo che non proviamo a collegare questo token non valido
a richieste future al nostro database e localId, questo è l'ID utente dell'utente che Firebase ha creato sui suoi server perché
non dobbiamo farlo qualsiasi gestione di tale utente, Firebase lo farà, non è necessario scrivere alcun codice
sul lato server.
Quindi quello che dobbiamo fare è inviare una richiesta HTTP e
poiché gestirò anche tutto questo con Redux, creerò un nuovo creatore di azioni per questo e
lo chiamerò auth.
Creerò anche un riduttore perché gestiremo anche alcune cose relative all'autenticazione, ad esempio il
token e l'ID utente.
Iniziamo con l'azione e quindi esportiamo
qui un creatore di azioni che potrebbe essere chiamato iscriviti, ha senso iniziare
con quello perché l'accesso degli utenti sarà possibile solo dopo aver creato
almeno un utente. Quindi qui in iscrizione,
voglio essere in grado di creare un nuovo utente e per questo, avremo bisogno
di una e-mail e una password in modo che debbano essere passati al creatore dell'azione di iscrizione dall'esterno.
Ora quindi, questo invierà una richiesta HTTP e per essere in grado di farlo, useremo di
nuovo il pacchetto Redux Thunk e quindi restituiremo l'invio asincrono
qui, quindi restituiamo una funzione che può usare l'attesa asincrona che ottiene quell'invio funzione come argomento trasmesso dal
middleware Redux Thunk che abbiamo iniziato a utilizzare nell'ultimo modulo HTTP di questo corso e questo
ci consente di eseguire il codice asincrono prima di inviare un'azione che raggiunge effettivamente il nostro negozio.
Ora, per questo, avremo anche bisogno di un identificatore di azione per quell'azione che in seguito
vorremmo gestire nel nostro negozio e lì userò solo l'iscrizione, che ha anche l'iscrizione come identificatore di stringa.
Quindi qui alla fine, spediremo questo oggetto azione in cui il tipo è registrato e dove probabilmente
aggiungeremo anche alcuni dati extra, ma prima di farlo, dobbiamo inviare una richiesta HTTP.
Ora questo può essere fatto con l'API di recupero come hai appreso nell'ultimo modulo e quindi sicuramente
passa prima attraverso
quel modulo e questo è l'URL a cui dobbiamo inviare la richiesta, quindi possiamo copiarlo. Aggiungilo qui e ora abbiamo quella
cosa chiave API.
Questo è qualcosa che possiamo ottenere da Firebase facendo clic sull'icona a forma di
ingranaggio qui, impostazioni del progetto. Lì troverai
la chiave API Web ed è esattamente quello che
ti serve, copialo e sostituisci la chiave API includendo le parentesi quadre con quella chiave.
Questo è l'URL a cui dovremo inviare una richiesta. Ora, come ci dicono i documenti ufficiali,
dobbiamo inviare
una richiesta post, quindi come hai appreso, dobbiamo aggiungere questo secondo
argomento qui per recuperare quale è un oggetto che ci consente di configurare quella richiesta
e lì, possiamo impostare il metodo per pubblicare e aggiungere anche alcune intestazioni perché dovremo aggiungere l'intestazione JSON dell'applicazione,
quindi l'intestazione del tipo di contenuto che dovrebbe avere un valore dell'applicazione JSON e dovremo aggiungere un corpo e quel corpo deve
essere in formato JSON che possiamo ottenere con JSON. stringify e i dati che voglio stringify devono essere
un oggetto con queste tre chiavi: e-mail, password e token sicuro di ritorno. Quindi, ovviamente, qui l'email si riferisce all'email che stiamo ricevendo come
argomento qui, lo stesso per la password che si riferisce all'argomento password che stiamo ricevendo e quindi
è questo terzo e lo copierò per non sbagliare, restituisce qui l'argomento token sicuro o la coppia
chiave-valore in cui il valore deve essere vero. Questa richiesta dovrebbe creare un
nuovo utente.
Ora possiamo attendere la sua risposta con la parola chiave wait e quindi, come hai appreso in precedenza,
possiamo verificare se la risposta non è corretta, in tal caso, voglio lanciare un nuovo errore in cui dico che qualcosa è
andato storto e noi dai un'occhiata alla gestione degli errori più dettagliata in seguito, per ora è così e se va bene comunque,
voglio ottenere i miei dati di risposta in attesa di risposta JSON che decomprimerà il corpo della risposta e lo trasformerà
automaticamente dal formato JSON in Javascript, quindi su un oggetto o array Javascript e ora saremo in grado di
lavorare con quello e per il momento, registrerò semplicemente questi dati di risposta qui.
Ora non abbiamo aggiunto il resto del nostro negozio Redux relativo all'autorizzazione, lo faremo più tardi, ma abbiamo qualcosa che
dovrebbe funzionare, dovremmo essere in grado di spedire questo e quindi inviare una tale richiesta di iscrizione.
Quindi ora possiamo tornare alla schermata di autenticazione e lì alla fine quando facciamo clic su questo pulsante di accesso che è
erroneamente etichettato login nel momento in cui effettivamente registriamo ma lasciamo così per il momento, quindi
quando
facciamo clic su questo pulsante Desidero inviare questa richiesta di iscrizione. Quindi, per questo, dobbiamo, come prima, importare utilizzare
l'invio da React Redux in modo da poter inviare azioni e, naturalmente,
importare tutto come azioni di autenticazione dai dati della cartella del negozio, dalla cartella delle azioni e lì dal file
di autenticazione e con aggiunto ciò, possiamo aggiungere
una funzione qui, o una funzione inline
o come questa, una funzione con nome memorizzata in una
costante che nominerò gestore di
iscrizione, lì non
mi aspetto argomenti e lì voglio spedire, quindi abbiamo
bisogno per ottenere l'accesso a quella funzione di invio eseguendo usa invio
e quindi qui possiamo inviare
questo evento di autenticazione azioni di registrazione o azione di registrazione.
Ora il problema è che questo richiede l'e-mail e la password e in
questo momento non lo sto memorizzando.
Ricevo questo nel mio input ma qui al cambio di input, non sto memorizzando quei dati che ovviamente dovrei.
Ora possiamo dare un'occhiata all'altra nostra forma qui per vedere come l'abbiamo fatto.
Quindi, nella schermata di modifica del prodotto, abbiamo ovviamente qui il nostro riduttore di forma che gestisce la validità e i valori
relativi all'intero modulo.
Quindi alla fine, possiamo copiarlo e aggiungerlo alla schermata di autenticazione al di fuori del componente della schermata
di autenticazione in questo modo e tornare alla schermata di modifica del prodotto per poi prendere anche la parte
laggiù dove
inizializziamo quella con riduttore di utilizzo, quindi copia tutto
questo e aggiungilo anche alla schermata di autenticazione, ora all'interno del componente, forse qui e per farlo funzionare, dobbiamo anche importare un riduttore da React e
con quello importato, ora
dobbiamo solo modificarlo un po ' po. Questo riduttore di forma va bene e dal modo in
cui potresti esternalizzarlo in un file separato perché stiamo usando lo stesso tipo di riduttore sia nella
schermata di autenticazione che nella schermata di modifica
del prodotto, potresti persino creare un hook personalizzato se sai come
funziona, per ora lo lascerò così.
Una cosa di cui ho bisogno è l'aggiornamento del
modulo di input, permettetemi di prenderlo anche dalla schermata di modifica
del prodotto, questa
costante qui, spostiamola anche nella schermata di autenticazione.
Quindi ora
con quello, va tutto bene, ma laggiù dove chiamo riduttore di utilizzo e inizializzo tutto questo, ovviamente
ha un aspetto diverso.
Dovremmo avere un'e-mail che inizialmente è vuota e una password che inizialmente è vuota e per
la validità, è la
stessa, abbiamo solo un'e-mail che inizialmente non è valida e abbiamo una password che inizialmente
non è valida e quindi il modulo complessivo anche inizialmente non è valido.
Ora lo stato del modulo di spedizione dovrebbe essere attivato ogni volta che il nostro input cambia
qui, quindi qui in cambio di input, ovviamente lo sai e puoi vederlo nella schermata di modifica del prodotto,
otteniamo tre valori: otteniamo l'identificatore di input, il valore di input e la validità dell'input.
Quindi alla fine possiamo semplicemente copiarlo qui dalla schermata di modifica del prodotto e spostarlo nella schermata di
autenticazione e sostituire questa funzione anonima con essa o memorizzarla in una nuova variabile qui, gestore del
cambiamento di input che ora detiene questa funzione. Ora, proprio come nella schermata di modifica del prodotto,
dovresti prenderlo con l'uso del callback per assicurarti che questo non ritorni quando non dovrebbe.
Quindi, in realtà, dovremmo prenderlo qui includendo la callback di uso e le dipendenze del
callback di uso, quindi questo è effettivamente ciò che dovrebbe essere usato laggiù sul gestore di modifica dell'input.
Ora questo gestore di modifica dell'input può essere associato o può essere impostato qui ai puntelli di modifica dell'input in modo
che questi oggetti puntino a questa funzione
e ora, con ciò, memorizziamo i nostri valori del modulo o i nostri valori di input nel nostro stato del
modulo con cui abbiamo gestito utilizzare il riduttore e così via.
Quindi ora è questo stato del modulo che mi interessa qui nel mio gestore di iscrizione perché lì per registrarmi,
devo passare dai valori di input dello stato. e-mail e valori di input dello stato del modulo. password, quindi questi due valori che
sono stati raccolti e ora il gestore di registrazione qui, questa funzione può essere associata a questo pulsante
laggiù, al pulsante di accesso qui in onPress perché questa è la funzione a
cui voglio puntare per eseguirla quando premere questo pulsante.
Vediamo se funziona come dovrebbe. Se comincio a inserire valori qui, visualizzo i miei
errori di convalida ma in qualche modo non vengono visualizzati, questo è il
caso perché non è un messaggio di errore qui ma un testo di errore sugli input nella schermata di autenticazione.
Quindi se cambiamo quel messaggio di errore in testo di errore, ora se lo testiamo,
quindi se faccio clic qui, tocco fuori da lì, ricevo i miei avvertimenti.
Ora, se inserisco un indirizzo e-mail valido,
questo è sparito, se inserisco una password che è abbastanza lunga, è andata, se ora faccio clic su Accedi qui, vediamo se
funziona.
Andiamo su Firebase, all'autenticazione e lì, ora dovresti vedere un nuovo utente, questo è l'utente
che è stato appena creato.
Quindi la registrazione funziona, ora assicuriamoci
di poter anche passare alla modalità di accesso e farlo funzionare anche.
A proposito, nota anche che questi sono i dati che abbiamo recuperato, quindi
questa è la
risposta, questo oggetto con e-mail,
per
quanto tempo il token è valido in
secondi, quindi il token stesso che è questa lunga stringa criptica, quindi anche l'ID dell'utente che è stato creato
e quel token di aggiornamento.