1 00:00:02,170 --> 00:00:05,530 Ora, come ho già detto, Firebase ha l'autenticazione integrata, dobbiamo solo 2 00:00:05,530 --> 00:00:11,350 andare nell'area di autenticazione lì e quindi fare clic sul metodo di configurazione dell'accesso e scegliere qui la 3 00:00:11,350 --> 00:00:16,500 password e l'e-mail o la password e-mail. Abilita questo e fai clic su Salva e 4 00:00:16,600 --> 00:00:18,550 con quello, lo abbiamo abilitato. 5 00:00:18,550 --> 00:00:25,640 Ora possiamo inviare richieste a un'API Firebase per creare utenti o per accedervi. Ora per scoprire dove inviare le richieste, puoi 6 00:00:25,640 --> 00:00:27,140 cercare su Google 7 00:00:27,140 --> 00:00:32,630 l'API Auth REST di Firebase e troverai questi documenti ufficiali in cui imparerai come 8 00:00:32,630 --> 00:00:36,180 creare e accedere agli utenti con la loro API. 9 00:00:36,210 --> 00:00:40,820 Ora ci sono un sacco di endpoint per cose diverse, qui in questa app ci concentreremo sulla registrazione 10 00:00:40,820 --> 00:00:41,440 e l'accesso. 11 00:00:41,540 --> 00:00:45,200 Quindi, se facciamo clic su Iscriviti con e-mail e password, abbiamo imparato come funziona. 12 00:00:45,290 --> 00:00:52,250 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 13 00:00:52,280 --> 00:00:58,890 mostrerò da dove la ricevi in un secondo e allego questo corpo alla richiesta, quindi e- password di posta elettronica e quindi questo campo 14 00:00:58,910 --> 00:01:05,180 token sicuro di ritorno che dovrebbe essere praticamente sempre vero. Come risposta, restituiremo un token, questo è quel token 15 00:01:05,180 --> 00:01:10,820 che ho menzionato nella diapositiva, l'e-mail che abbiamo usato, un token di aggiornamento che è più 16 00:01:10,940 --> 00:01:13,790 avanzato, questo token qui scadrà effettivamente dopo questa 17 00:01:13,790 --> 00:01:19,430 quantità di secondi che torniamo anche . Con un token di aggiornamento, potremmo ricrearlo, riconvalidarlo 18 00:01:19,430 --> 00:01:22,350 senza che l'utente abbia effettuato nuovamente l'accesso, non lo 19 00:01:22,910 --> 00:01:26,460 faremo qui, avresti un endpoint separato a cui inviare il token 20 00:01:26,570 --> 00:01:31,100 di aggiornamento per ottenere un nuovo token ID, noi " Lo terremo semplice qui 21 00:01:31,100 --> 00:01:37,310 e userò quel token e riconnetterò l'utente dopo quel tempo di scadenza perché quel tempo di scadenza è anche 22 00:01:37,310 --> 00:01:39,080 qualcosa che otteniamo in modo 23 00:01:39,080 --> 00:01:43,880 da sapere quando questo token diventerà non valido e non potrà più essere utilizzato perché 24 00:01:43,880 --> 00:01:49,850 a quel punto dobbiamo ripulirlo nella nostra app, in modo che non proviamo a collegare questo token non valido 25 00:01:49,850 --> 00:01:56,600 a richieste future al nostro database e localId, questo è l'ID utente dell'utente che Firebase ha creato sui suoi server perché 26 00:01:56,600 --> 00:02:02,050 non dobbiamo farlo qualsiasi gestione di tale utente, Firebase lo farà, non è necessario scrivere alcun codice 27 00:02:02,060 --> 00:02:03,380 sul lato server. 28 00:02:03,440 --> 00:02:07,610 Quindi quello che dobbiamo fare è inviare una richiesta HTTP e 29 00:02:07,610 --> 00:02:13,340 poiché gestirò anche tutto questo con Redux, creerò un nuovo creatore di azioni per questo e 30 00:02:13,340 --> 00:02:14,500 lo chiamerò auth. 31 00:02:14,510 --> 00:02:20,720 Creerò anche un riduttore perché gestiremo anche alcune cose relative all'autenticazione, ad esempio il 32 00:02:20,720 --> 00:02:22,790 token e l'ID utente. 33 00:02:23,090 --> 00:02:25,980 Iniziamo con l'azione e quindi esportiamo 34 00:02:26,510 --> 00:02:31,810 qui un creatore di azioni che potrebbe essere chiamato iscriviti, ha senso iniziare 35 00:02:31,940 --> 00:02:37,070 con quello perché l'accesso degli utenti sarà possibile solo dopo aver creato 36 00:02:37,070 --> 00:02:40,130 almeno un utente. Quindi qui in iscrizione, 37 00:02:40,130 --> 00:02:44,590 voglio essere in grado di creare un nuovo utente e per questo, avremo bisogno 38 00:02:44,600 --> 00:02:50,420 di una e-mail e una password in modo che debbano essere passati al creatore dell'azione di iscrizione dall'esterno. 39 00:02:50,690 --> 00:02:56,750 Ora quindi, questo invierà una richiesta HTTP e per essere in grado di farlo, useremo di 40 00:02:56,750 --> 00:03:01,180 nuovo il pacchetto Redux Thunk e quindi restituiremo l'invio asincrono 41 00:03:01,460 --> 00:03:07,970 qui, quindi restituiamo una funzione che può usare l'attesa asincrona che ottiene quell'invio funzione come argomento trasmesso dal 42 00:03:08,000 --> 00:03:14,150 middleware Redux Thunk che abbiamo iniziato a utilizzare nell'ultimo modulo HTTP di questo corso e questo 43 00:03:14,150 --> 00:03:20,480 ci consente di eseguire il codice asincrono prima di inviare un'azione che raggiunge effettivamente il nostro negozio. 44 00:03:20,620 --> 00:03:25,940 Ora, per questo, avremo anche bisogno di un identificatore di azione per quell'azione che in seguito 45 00:03:25,940 --> 00:03:31,590 vorremmo gestire nel nostro negozio e lì userò solo l'iscrizione, che ha anche l'iscrizione come identificatore di stringa. 46 00:03:31,850 --> 00:03:39,290 Quindi qui alla fine, spediremo questo oggetto azione in cui il tipo è registrato e dove probabilmente 47 00:03:39,290 --> 00:03:45,940 aggiungeremo anche alcuni dati extra, ma prima di farlo, dobbiamo inviare una richiesta HTTP. 48 00:03:46,020 --> 00:03:51,170 Ora questo può essere fatto con l'API di recupero come hai appreso nell'ultimo modulo e quindi sicuramente 49 00:03:51,170 --> 00:03:52,360 passa prima attraverso 50 00:03:52,370 --> 00:04:01,130 quel modulo e questo è l'URL a cui dobbiamo inviare la richiesta, quindi possiamo copiarlo. Aggiungilo qui e ora abbiamo quella 51 00:04:01,130 --> 00:04:03,700 cosa chiave API. 52 00:04:04,220 --> 00:04:07,240 Questo è qualcosa che possiamo ottenere da Firebase facendo clic sull'icona a forma di 53 00:04:07,250 --> 00:04:09,700 ingranaggio qui, impostazioni del progetto. Lì troverai 54 00:04:09,760 --> 00:04:13,450 la chiave API Web ed è esattamente quello che 55 00:04:13,460 --> 00:04:19,680 ti serve, copialo e sostituisci la chiave API includendo le parentesi quadre con quella chiave. 56 00:04:19,700 --> 00:04:25,970 Questo è l'URL a cui dovremo inviare una richiesta. Ora, come ci dicono i documenti ufficiali, 57 00:04:25,970 --> 00:04:26,870 dobbiamo inviare 58 00:04:26,990 --> 00:04:30,950 una richiesta post, quindi come hai appreso, dobbiamo aggiungere questo secondo 59 00:04:30,950 --> 00:04:36,680 argomento qui per recuperare quale è un oggetto che ci consente di configurare quella richiesta 60 00:04:37,280 --> 00:04:44,180 e lì, possiamo impostare il metodo per pubblicare e aggiungere anche alcune intestazioni perché dovremo aggiungere l'intestazione JSON dell'applicazione, 61 00:04:44,180 --> 00:04:52,130 quindi l'intestazione del tipo di contenuto che dovrebbe avere un valore dell'applicazione JSON e dovremo aggiungere un corpo e quel corpo deve 62 00:04:52,130 --> 00:04:58,700 essere in formato JSON che possiamo ottenere con JSON. stringify e i dati che voglio stringify devono essere 63 00:04:58,700 --> 00:05:07,660 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 64 00:05:07,660 --> 00:05:14,890 argomento qui, lo stesso per la password che si riferisce all'argomento password che stiamo ricevendo e quindi 65 00:05:14,890 --> 00:05:22,060 è questo terzo e lo copierò per non sbagliare, restituisce qui l'argomento token sicuro o la coppia 66 00:05:22,060 --> 00:05:29,770 chiave-valore in cui il valore deve essere vero. Questa richiesta dovrebbe creare un 67 00:05:29,770 --> 00:05:31,770 nuovo utente. 68 00:05:31,900 --> 00:05:38,530 Ora possiamo attendere la sua risposta con la parola chiave wait e quindi, come hai appreso in precedenza, 69 00:05:38,620 --> 00:05:46,660 possiamo verificare se la risposta non è corretta, in tal caso, voglio lanciare un nuovo errore in cui dico che qualcosa è 70 00:05:46,930 --> 00:05:55,340 andato storto e noi dai un'occhiata alla gestione degli errori più dettagliata in seguito, per ora è così e se va bene comunque, 71 00:05:55,380 --> 00:06:02,970 voglio ottenere i miei dati di risposta in attesa di risposta JSON che decomprimerà il corpo della risposta e lo trasformerà 72 00:06:02,970 --> 00:06:09,780 automaticamente dal formato JSON in Javascript, quindi su un oggetto o array Javascript e ora saremo in grado di 73 00:06:10,500 --> 00:06:16,200 lavorare con quello e per il momento, registrerò semplicemente questi dati di risposta qui. 74 00:06:17,910 --> 00:06:23,590 Ora non abbiamo aggiunto il resto del nostro negozio Redux relativo all'autorizzazione, lo faremo più tardi, ma abbiamo qualcosa che 75 00:06:23,590 --> 00:06:28,840 dovrebbe funzionare, dovremmo essere in grado di spedire questo e quindi inviare una tale richiesta di iscrizione. 76 00:06:28,840 --> 00:06:36,460 Quindi ora possiamo tornare alla schermata di autenticazione e lì alla fine quando facciamo clic su questo pulsante di accesso che è 77 00:06:36,460 --> 00:06:41,770 erroneamente etichettato login nel momento in cui effettivamente registriamo ma lasciamo così per il momento, quindi 78 00:06:41,770 --> 00:06:42,420 quando 79 00:06:42,460 --> 00:06:50,330 facciamo clic su questo pulsante Desidero inviare questa richiesta di iscrizione. Quindi, per questo, dobbiamo, come prima, importare utilizzare 80 00:06:50,390 --> 00:06:55,810 l'invio da React Redux in modo da poter inviare azioni e, naturalmente, 81 00:06:56,150 --> 00:07:05,810 importare tutto come azioni di autenticazione dai dati della cartella del negozio, dalla cartella delle azioni e lì dal file 82 00:07:05,810 --> 00:07:09,590 di autenticazione e con aggiunto ciò, possiamo aggiungere 83 00:07:09,840 --> 00:07:13,170 una funzione qui, o una funzione inline 84 00:07:13,190 --> 00:07:17,880 o come questa, una funzione con nome memorizzata in una 85 00:07:18,410 --> 00:07:20,850 costante che nominerò gestore di 86 00:07:20,990 --> 00:07:23,240 iscrizione, lì non 87 00:07:23,250 --> 00:07:27,780 mi aspetto argomenti e lì voglio spedire, quindi abbiamo 88 00:07:27,780 --> 00:07:33,590 bisogno per ottenere l'accesso a quella funzione di invio eseguendo usa invio 89 00:07:33,650 --> 00:07:36,090 e quindi qui possiamo inviare 90 00:07:36,210 --> 00:07:41,410 questo evento di autenticazione azioni di registrazione o azione di registrazione. 91 00:07:41,430 --> 00:07:44,430 Ora il problema è che questo richiede l'e-mail e la password e in 92 00:07:44,430 --> 00:07:46,020 questo momento non lo sto memorizzando. 93 00:07:46,020 --> 00:07:51,500 Ricevo questo nel mio input ma qui al cambio di input, non sto memorizzando quei dati che ovviamente dovrei. 94 00:07:51,570 --> 00:07:56,320 Ora possiamo dare un'occhiata all'altra nostra forma qui per vedere come l'abbiamo fatto. 95 00:07:56,370 --> 00:08:06,760 Quindi, nella schermata di modifica del prodotto, abbiamo ovviamente qui il nostro riduttore di forma che gestisce la validità e i valori 96 00:08:06,910 --> 00:08:08,670 relativi all'intero modulo. 97 00:08:08,800 --> 00:08:15,790 Quindi alla fine, possiamo copiarlo e aggiungerlo alla schermata di autenticazione al di fuori del componente della schermata 98 00:08:16,990 --> 00:08:24,140 di autenticazione in questo modo e tornare alla schermata di modifica del prodotto per poi prendere anche la parte 99 00:08:24,140 --> 00:08:25,400 laggiù dove 100 00:08:25,430 --> 00:08:28,970 inizializziamo quella con riduttore di utilizzo, quindi copia tutto 101 00:08:28,970 --> 00:08:38,730 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 102 00:08:38,730 --> 00:08:40,350 con quello importato, ora 103 00:08:40,480 --> 00:08:46,140 dobbiamo solo modificarlo un po ' po. Questo riduttore di forma va bene e dal modo in 104 00:08:46,150 --> 00:08:51,160 cui potresti esternalizzarlo in un file separato perché stiamo usando lo stesso tipo di riduttore sia nella 105 00:08:51,400 --> 00:08:53,860 schermata di autenticazione che nella schermata di modifica 106 00:08:53,860 --> 00:08:57,160 del prodotto, potresti persino creare un hook personalizzato se sai come 107 00:08:57,160 --> 00:08:59,180 funziona, per ora lo lascerò così. 108 00:08:59,230 --> 00:09:01,560 Una cosa di cui ho bisogno è l'aggiornamento del 109 00:09:01,570 --> 00:09:04,620 modulo di input, permettetemi di prenderlo anche dalla schermata di modifica 110 00:09:04,630 --> 00:09:05,810 del prodotto, questa 111 00:09:05,830 --> 00:09:08,020 costante qui, spostiamola anche nella schermata di autenticazione. 112 00:09:08,980 --> 00:09:09,670 Quindi ora 113 00:09:09,670 --> 00:09:15,190 con quello, va tutto bene, ma laggiù dove chiamo riduttore di utilizzo e inizializzo tutto questo, ovviamente 114 00:09:15,190 --> 00:09:16,470 ha un aspetto diverso. 115 00:09:16,630 --> 00:09:22,120 Dovremmo avere un'e-mail che inizialmente è vuota e una password che inizialmente è vuota e per 116 00:09:22,120 --> 00:09:23,720 la validità, è la 117 00:09:23,800 --> 00:09:28,690 stessa, abbiamo solo un'e-mail che inizialmente non è valida e abbiamo una password che inizialmente 118 00:09:28,690 --> 00:09:33,310 non è valida e quindi il modulo complessivo anche inizialmente non è valido. 119 00:09:34,570 --> 00:09:40,240 Ora lo stato del modulo di spedizione dovrebbe essere attivato ogni volta che il nostro input cambia 120 00:09:43,290 --> 00:09:49,830 qui, quindi qui in cambio di input, ovviamente lo sai e puoi vederlo nella schermata di modifica del prodotto, 121 00:09:49,830 --> 00:09:55,230 otteniamo tre valori: otteniamo l'identificatore di input, il valore di input e la validità dell'input. 122 00:09:56,100 --> 00:10:03,630 Quindi alla fine possiamo semplicemente copiarlo qui dalla schermata di modifica del prodotto e spostarlo nella schermata di 123 00:10:03,630 --> 00:10:10,630 autenticazione e sostituire questa funzione anonima con essa o memorizzarla in una nuova variabile qui, gestore del 124 00:10:10,770 --> 00:10:18,620 cambiamento di input che ora detiene questa funzione. Ora, proprio come nella schermata di modifica del prodotto, 125 00:10:18,620 --> 00:10:24,620 dovresti prenderlo con l'uso del callback per assicurarti che questo non ritorni quando non dovrebbe. 126 00:10:24,620 --> 00:10:31,190 Quindi, in realtà, dovremmo prenderlo qui includendo la callback di uso e le dipendenze del 127 00:10:31,250 --> 00:10:38,360 callback di uso, quindi questo è effettivamente ciò che dovrebbe essere usato laggiù sul gestore di modifica dell'input. 128 00:10:38,460 --> 00:10:45,690 Ora questo gestore di modifica dell'input può essere associato o può essere impostato qui ai puntelli di modifica dell'input in modo 129 00:10:45,720 --> 00:10:48,340 che questi oggetti puntino a questa funzione 130 00:10:48,840 --> 00:10:55,740 e ora, con ciò, memorizziamo i nostri valori del modulo o i nostri valori di input nel nostro stato del 131 00:10:55,740 --> 00:10:59,370 modulo con cui abbiamo gestito utilizzare il riduttore e così via. 132 00:10:59,380 --> 00:11:04,630 Quindi ora è questo stato del modulo che mi interessa qui nel mio gestore di iscrizione perché lì per registrarmi, 133 00:11:04,630 --> 00:11:11,830 devo passare dai valori di input dello stato. e-mail e valori di input dello stato del modulo. password, quindi questi due valori che 134 00:11:11,840 --> 00:11:18,850 sono stati raccolti e ora il gestore di registrazione qui, questa funzione può essere associata a questo pulsante 135 00:11:18,850 --> 00:11:24,320 laggiù, al pulsante di accesso qui in onPress perché questa è la funzione a 136 00:11:24,560 --> 00:11:28,160 cui voglio puntare per eseguirla quando premere questo pulsante. 137 00:11:28,410 --> 00:11:34,810 Vediamo se funziona come dovrebbe. Se comincio a inserire valori qui, visualizzo i miei 138 00:11:38,160 --> 00:11:42,750 errori di convalida ma in qualche modo non vengono visualizzati, questo è il 139 00:11:44,040 --> 00:11:50,950 caso perché non è un messaggio di errore qui ma un testo di errore sugli input nella schermata di autenticazione. 140 00:11:51,060 --> 00:11:54,920 Quindi se cambiamo quel messaggio di errore in testo di errore, ora se lo testiamo, 141 00:11:55,020 --> 00:11:58,460 quindi se faccio clic qui, tocco fuori da lì, ricevo i miei avvertimenti. 142 00:11:58,500 --> 00:12:00,960 Ora, se inserisco un indirizzo e-mail valido, 143 00:12:00,960 --> 00:12:08,350 questo è sparito, se inserisco una password che è abbastanza lunga, è andata, se ora faccio clic su Accedi qui, vediamo se 144 00:12:08,350 --> 00:12:08,740 funziona. 145 00:12:08,740 --> 00:12:14,880 Andiamo su Firebase, all'autenticazione e lì, ora dovresti vedere un nuovo utente, questo è l'utente 146 00:12:14,950 --> 00:12:17,360 che è stato appena creato. 147 00:12:17,530 --> 00:12:19,810 Quindi la registrazione funziona, ora assicuriamoci 148 00:12:19,810 --> 00:12:24,060 di poter anche passare alla modalità di accesso e farlo funzionare anche. 149 00:12:25,100 --> 00:12:28,970 A proposito, nota anche che questi sono i dati che abbiamo recuperato, quindi 150 00:12:29,030 --> 00:12:30,150 questa è la 151 00:12:30,150 --> 00:12:31,810 risposta, questo oggetto con e-mail, 152 00:12:31,880 --> 00:12:32,300 per 153 00:12:32,300 --> 00:12:34,440 quanto tempo il token è valido in 154 00:12:34,550 --> 00:12:40,220 secondi, quindi il token stesso che è questa lunga stringa criptica, quindi anche l'ID dell'utente che è stato creato 155 00:12:40,220 --> 00:12:41,960 e quel token di aggiornamento.