1 00:00:02,170 --> 00:00:05,530 Wie bereits erwähnt, ist in Firebase eine Authentifizierung integriert. 2 00:00:05,530 --> 00:00:11,350 Wir müssen nur in den Authentifizierungsbereich gehen und dann auf die Anmeldemethode einrichten klicken und dort 3 00:00:11,350 --> 00:00:16,500 Passwort und E-Mail- oder E-Mail-Passwort auswählen. Aktivieren Sie dies und klicken Sie auf Speichern. 4 00:00:16,600 --> 00:00:18,550 Damit haben wir es aktiviert. 5 00:00:18,550 --> 00:00:25,640 Jetzt können wir Anforderungen an eine Firebase-API senden, um Benutzer zu erstellen oder sie anzumelden. Um herauszufinden, wohin die Anforderungen gesendet werden sollen, 6 00:00:25,640 --> 00:00:27,140 können Sie 7 00:00:27,140 --> 00:00:32,630 die Firebase REST Auth-API googeln. In diesen offiziellen Dokumenten erfahren Sie, wie 8 00:00:32,630 --> 00:00:36,180 Sie Benutzer mit ihrer API erstellen und anmelden. 9 00:00:36,210 --> 00:00:40,820 Jetzt gibt es eine Reihe von Endpunkten für verschiedene Dinge. Hier in dieser App konzentrieren wir uns auf die Anmeldung 10 00:00:40,820 --> 00:00:41,440 und Anmeldung. 11 00:00:41,540 --> 00:00:45,200 Wenn wir also auf Mit E-Mail und Passwort anmelden klicken, haben wir gelernt, wie das funktioniert. 12 00:00:45,290 --> 00:00:52,250 Wir müssen eine HTTP-Anfrage, eine Post-Anfrage mit diesem Inhaltstyp, an diese URL senden, hier unseren eigenen API-Schlüssel eingeben, der Ihnen 13 00:00:52,280 --> 00:00:58,890 in einer Sekunde zeigt, woher Sie ihn beziehen, und diesen Text an die Anfrage anhängen. Mail-Passwort und dann dieses 14 00:00:58,910 --> 00:01:05,180 sichere Token-Rückgabefeld, das grundsätzlich immer wahr sein sollte. Als Antwort erhalten wir ein Token zurück, das ist das 15 00:01:05,180 --> 00:01:10,820 Token, das ich auf der Folie erwähnt habe, die E-Mail, die wir verwendet haben, ein Aktualisierungstoken, das weiter 16 00:01:10,940 --> 00:01:13,790 fortgeschritten ist. Dieses Token hier läuft tatsächlich nach dieser Anzahl 17 00:01:13,790 --> 00:01:19,430 von Sekunden ab, die wir auch zurückerhalten . Mit einem Aktualisierungstoken könnten wir es neu erstellen, erneut 18 00:01:19,430 --> 00:01:22,350 validieren, ohne dass sich der Benutzer erneut anmelden muss. 19 00:01:22,910 --> 00:01:26,460 Dies wird hier nicht durchgeführt. Sie hätten einen separaten Endpunkt, an 20 00:01:26,570 --> 00:01:31,100 den Sie das Aktualisierungstoken senden, um ein neues ID-Token zu erhalten. Ich werde es 21 00:01:31,100 --> 00:01:37,310 hier einfach halten und einfach dieses Token verwenden und den Benutzer nach dieser Ablaufzeit erneut anmelden, da diese Ablaufzeit auch 22 00:01:37,310 --> 00:01:39,080 etwas ist, das wir erhalten, damit 23 00:01:39,080 --> 00:01:43,880 wir wissen, wann dieses Token ungültig wird und nicht mehr verwendet werden kann, weil wir es 24 00:01:43,880 --> 00:01:49,850 tun werden Bis dahin müssen wir es in unserer App bereinigen, damit wir nicht versuchen, dieses ungültige Token an 25 00:01:49,850 --> 00:01:56,600 zukünftige Anforderungen an unsere Datenbank und unsere lokale ID anzuhängen. Dies ist die Benutzer-ID des Benutzers, den Firebase auf seinen Servern erstellt 26 00:01:56,600 --> 00:02:02,050 hat, weil wir dies nicht tun müssen Bei jeder dieser Benutzerverwaltungen wird Firebase dies tun. Wir müssen keinen 27 00:02:02,060 --> 00:02:03,380 serverseitigen Code schreiben. 28 00:02:03,440 --> 00:02:07,610 Wir müssen also eine HTTP-Anfrage senden. Da ich dies auch 29 00:02:07,610 --> 00:02:13,340 mit Redux verwalten werde, werde ich einen neuen Aktionsersteller dafür erstellen und ihn 30 00:02:13,340 --> 00:02:14,500 auth nennen. 31 00:02:14,510 --> 00:02:20,720 Ich werde auch bereits einen Reduzierer erstellen, da wir dort auch einige auth-bezogene Dinge verwalten werden, zum Beispiel 32 00:02:20,720 --> 00:02:22,790 das Token und die Benutzer-ID. 33 00:02:23,090 --> 00:02:25,980 Beginnen wir jedoch mit der Aktion und exportieren 34 00:02:26,510 --> 00:02:31,810 wir daher hier einen Aktionsersteller, der als "Anmelden" bezeichnet werden kann. Zunächst ist dies 35 00:02:31,940 --> 00:02:37,070 sinnvoll, da das Anmelden von Benutzern erst möglich ist, nachdem wir mindestens einen 36 00:02:37,070 --> 00:02:40,130 Benutzer erstellt haben. Hier bei der Anmeldung 37 00:02:40,130 --> 00:02:44,590 möchte ich in der Lage sein, einen neuen Benutzer zu erstellen. Dafür benötigen 38 00:02:44,600 --> 00:02:50,420 wir eine E-Mail und ein Passwort, die von außen an den Ersteller der Anmeldeaktion weitergeleitet werden sollen. 39 00:02:50,690 --> 00:02:56,750 Dies sendet dann eine HTTP-Anfrage. Um dies zu tun, verwenden wir das Redux Thunk-Paket erneut und 40 00:02:56,750 --> 00:03:01,180 geben daher hier den asynchronen Versand zurück. Daher geben wir 41 00:03:01,460 --> 00:03:07,970 eine Funktion zurück, die asynchrone Wartezeiten verwenden kann, die diesen Versand erhalten Funktioniert als Argument, das von 42 00:03:08,000 --> 00:03:14,150 der Redux Thunk-Middleware übergeben wurde, die wir im letzten HTTP-Modul dieses Kurses verwendet haben. Auf diese 43 00:03:14,150 --> 00:03:20,480 Weise können wir asynchronen Code ausführen, bevor wir eine Aktion auslösen, die tatsächlich unseren Store erreicht. 44 00:03:20,620 --> 00:03:25,940 Dazu benötigen wir jetzt auch eine Aktionskennung für die Aktion, die wir später in 45 00:03:25,940 --> 00:03:31,590 unserem Geschäft ausführen möchten. Dort verwende ich einfach die Anmeldung, die sich auch als Zeichenfolgenkennung anmeldet. 46 00:03:31,850 --> 00:03:39,290 Hier werden wir also am Ende dieses Aktionsobjekt versenden, wo der Typ angemeldet ist und wo wir dann wahrscheinlich 47 00:03:39,290 --> 00:03:45,940 auch einige zusätzliche Daten hinzufügen werden, aber bevor wir das tun, müssen wir eine HTTP-Anfrage senden. 48 00:03:46,020 --> 00:03:51,170 Dies kann nun mit der Abruf-API geschehen, wie Sie im letzten Modul gelernt haben, und auf jeden Fall zuerst 49 00:03:51,170 --> 00:03:52,360 dieses Modul durchgehen. Dies 50 00:03:52,370 --> 00:04:01,130 ist die URL, an die wir die Anforderung senden müssen, damit wir sie kopieren können. Fügen Sie es hier hinzu und jetzt 51 00:04:01,130 --> 00:04:03,700 haben wir diesen API-Schlüssel. 52 00:04:04,220 --> 00:04:07,240 Das können wir von Firebase bekommen, indem wir hier auf 53 00:04:07,250 --> 00:04:09,700 das Zahnradsymbol klicken, Projekteinstellungen. Dort finden 54 00:04:09,760 --> 00:04:13,450 Sie den Web-API-Schlüssel und genau das benötigen Sie. Kopieren 55 00:04:13,460 --> 00:04:19,680 Sie diesen und ersetzen Sie den API-Schlüssel einschließlich der eckigen Klammern durch diesen Schlüssel. 56 00:04:19,700 --> 00:04:25,970 Dies ist die URL, an die wir eine Anfrage senden müssen. Nun, wie die offiziellen Dokumente uns sagen, müssen 57 00:04:25,970 --> 00:04:26,870 wir eine 58 00:04:26,990 --> 00:04:30,950 Post-Anfrage senden. Wie Sie erfahren haben, müssen wir dieses zweite Argument 59 00:04:30,950 --> 00:04:36,680 hier hinzufügen, um abzurufen, welches ein Objekt ist, mit dem wir diese Anfrage konfigurieren können, und 60 00:04:37,280 --> 00:04:44,180 dort können wir die Methode festlegen Zum Posten und Hinzufügen einiger Header müssen wir den JSON-Header der Anwendung hinzufügen. 61 00:04:44,180 --> 00:04:52,130 Daher muss der Header des Inhaltstyps den Wert JSON der Anwendung haben, und wir müssen einen Body hinzufügen, und dieser Body muss 62 00:04:52,130 --> 00:04:58,700 im JSON-Format vorliegen was wir mit JSON bekommen können. stringify und die Daten, die ich stringifizieren möchte, müssen 63 00:04:58,700 --> 00:05:07,660 ein Objekt mit diesen drei Schlüsseln sein - E-Mail, Passwort und sicheres Token zurückgeben. Hier bezieht sich E-Mail natürlich auf die E-Mail, die wir hier als 64 00:05:07,660 --> 00:05:14,890 Argument erhalten, dasselbe für das Passwort, das sich auf das Passwortargument bezieht, das wir erhalten, und dann ist es das 65 00:05:14,890 --> 00:05:22,060 dritte und ich kopiere es einfach, um es nicht falsch zu tippen. Geben Sie hier ein sicheres Token-Argument oder ein 66 00:05:22,060 --> 00:05:29,770 Schlüssel-Wert-Paar zurück, bei dem der Wert nur wahr sein sollte. Diese Anfrage sollte einen neuen 67 00:05:29,770 --> 00:05:31,770 Benutzer erstellen. 68 00:05:31,900 --> 00:05:38,530 Jetzt können wir mit dem Schlüsselwort await auf die Antwort warten und dann, wie Sie zuvor erfahren 69 00:05:38,620 --> 00:05:46,660 haben, überprüfen, ob die Antwort nicht in Ordnung ist. Wenn dies der Fall ist, möchte ich einen neuen Fehler auslösen, bei 70 00:05:46,930 --> 00:05:55,340 dem ich sage, dass etwas schief gelaufen ist, und wir werden Schauen Sie sich später die detailliertere Fehlerbehandlung an. Im Moment ist es 71 00:05:55,380 --> 00:06:02,970 soweit. Wenn dies jedoch in Ordnung ist, möchte ich meine Antwortdaten abrufen, indem ich auf die Antwort JSON warte, die 72 00:06:02,970 --> 00:06:09,780 den Antworttext entpackt und ihn automatisch vom JSON-Format in Javascript umwandelt zu einem Javascript-Objekt oder -Array und jetzt 73 00:06:10,500 --> 00:06:16,200 können wir damit arbeiten und im Moment werde ich diese Antwortdaten einfach hier protokollieren. 74 00:06:17,910 --> 00:06:23,590 Jetzt haben wir den Rest unseres Authentx-bezogenen Redux-Stores nicht hinzugefügt. Wir werden das später tun, aber wir haben etwas, das 75 00:06:23,590 --> 00:06:28,840 funktionieren sollte. Wir sollten in der Lage sein, dies zu versenden und daher eine solche Anmeldeanforderung zu senden. 76 00:06:28,840 --> 00:06:36,460 Jetzt können wir zum Authentifizierungsbildschirm zurückkehren und dort am Ende auf diese Anmeldeschaltfläche klicken, die in dem Moment, in dem wir 77 00:06:36,460 --> 00:06:41,770 uns tatsächlich anmelden, fälschlicherweise als Anmeldung gekennzeichnet ist. Lassen Sie es jedoch für den Moment 78 00:06:41,770 --> 00:06:42,420 so, 79 00:06:42,460 --> 00:06:50,330 also wenn wir darauf klicken Schaltfläche Ich möchte diese Anmeldeanforderung senden. Dazu müssen wir nach wie vor Use 80 00:06:50,390 --> 00:06:55,810 Dispatch aus React Redux importieren, damit wir Aktionen versenden und natürlich 81 00:06:56,150 --> 00:07:05,810 alles als Auth-Aktionen aus den Speicherordnerdaten, aus dem Aktionsordner und dort aus der Auth-Datei und mit importieren können das 82 00:07:05,810 --> 00:07:09,590 hinzugefügt, wir können hier eine Funktion hinzufügen, 83 00:07:09,840 --> 00:07:13,170 entweder eine Inline-Funktion oder wie diese, 84 00:07:13,190 --> 00:07:17,880 eine benannte Funktion, die in einer Konstante gespeichert ist, 85 00:07:18,410 --> 00:07:20,850 die ich als Anmeldehandler benenne. 86 00:07:20,990 --> 00:07:23,240 Dort erwarte ich 87 00:07:23,250 --> 00:07:27,780 keine Argumente und dort möchte ich dann versenden, also 88 00:07:27,780 --> 00:07:33,590 brauchen wir Um Zugriff auf diese Versandfunktion durch Ausführen von use 89 00:07:33,650 --> 00:07:36,090 dispatch zu erhalten, können 90 00:07:36,210 --> 00:07:41,410 wir hier das Anmeldeereignis für Authentifizierungsaktionen oder die Anmeldeaktion auslösen. 91 00:07:41,430 --> 00:07:44,430 Jetzt ist das Problem, dass dies die E-Mail und das Passwort erfordert und 92 00:07:44,430 --> 00:07:46,020 ich dies im Moment nicht speichere. 93 00:07:46,020 --> 00:07:51,500 Ich bekomme dies in meiner Eingabe, aber hier bei Eingabeänderung speichere ich nicht die Daten, die ich natürlich sollte. 94 00:07:51,570 --> 00:07:56,320 Jetzt können wir uns hier unsere andere Form ansehen, um zu sehen, wie wir das gemacht haben. 95 00:07:56,370 --> 00:08:06,760 Im Produktbearbeitungsbildschirm haben wir hier natürlich unseren Formularreduzierer, der unsere gesamte formularbezogene Gültigkeit und die 96 00:08:06,910 --> 00:08:08,670 Werte verwaltet. 97 00:08:08,800 --> 00:08:15,790 Am Ende können wir das also kopieren und dem Authentifizierungsbildschirm außerhalb der Authentifizierungsbildschirmkomponente wie folgt hinzufügen und 98 00:08:16,990 --> 00:08:24,140 zum Bearbeitungsproduktbildschirm zurückkehren, um dann auch den Teil dort unten zu greifen, wo wir ihn mit dem Reduzierer 99 00:08:24,140 --> 00:08:25,400 verwenden, also 100 00:08:25,430 --> 00:08:28,970 kopieren All dies und fügen Sie es auch dem 101 00:08:28,970 --> 00:08:38,730 Authentifizierungsbildschirm hinzu, jetzt innerhalb der Komponente, vielleicht hier und damit das funktioniert, müssen wir auch den Use Reducer aus React importieren und mit dem 102 00:08:38,730 --> 00:08:40,350 importierten müssen wir ihn 103 00:08:40,480 --> 00:08:46,140 jetzt nur noch ein wenig optimieren bisschen. Dieser Formularreduzierer ist in Ordnung. Übrigens können Sie ihn 104 00:08:46,150 --> 00:08:51,160 in eine separate Datei auslagern, da wir sowohl im Authentifizierungsbildschirm als auch im Bearbeitungsproduktbildschirm denselben 105 00:08:51,400 --> 00:08:53,860 Reduzierertyp verwenden. Wenn Sie wissen, wie das 106 00:08:53,860 --> 00:08:57,160 funktioniert, können Sie sogar einen benutzerdefinierten Hook erstellen funktioniert, jetzt 107 00:08:57,160 --> 00:08:59,180 lasse ich es einfach so. 108 00:08:59,230 --> 00:09:01,560 Eine Sache, die ich jedoch brauche, ist die Aktualisierung 109 00:09:01,570 --> 00:09:04,620 der Formulareingabe. Lassen Sie mich diese auch vom Bildschirm zum Bearbeiten 110 00:09:04,630 --> 00:09:05,810 des Produkts abrufen. 111 00:09:05,830 --> 00:09:08,020 Diese Konstante hier wird auch im Authentifizierungsbildschirm verschoben. 112 00:09:08,980 --> 00:09:09,670 Nun, damit 113 00:09:09,670 --> 00:09:15,190 ist alles in Ordnung, aber da unten, wo ich Use Reducer nenne und dies alles initialisiere, sieht 114 00:09:15,190 --> 00:09:16,470 das natürlich anders aus. 115 00:09:16,630 --> 00:09:22,120 Wir sollten eine E-Mail haben, die anfangs leer ist, und ein Passwort, das anfangs leer ist. Für 116 00:09:22,120 --> 00:09:23,720 die Gültigkeit ist es 117 00:09:23,800 --> 00:09:28,690 dasselbe. Wir haben nur eine E-Mail, die anfangs nicht gültig ist, und wir haben ein 118 00:09:28,690 --> 00:09:33,310 Passwort, das anfangs nicht gültig ist, und daher das Gesamtformular auch anfangs ist nicht gültig. 119 00:09:34,570 --> 00:09:40,240 Jetzt sollte der Status des Versandformulars immer dann ausgelöst werden, wenn sich unsere Eingabe hier 120 00:09:43,290 --> 00:09:49,830 ändert. Wenn Sie also hier eine Änderung der Eingabe vornehmen, wissen Sie natürlich, dass Sie drei Werte 121 00:09:49,830 --> 00:09:55,230 erhalten - wir erhalten die Eingabekennung, den Eingabewert und die Gültigkeit der Eingabe. 122 00:09:56,100 --> 00:10:03,630 Am Ende können wir dies also einfach vom Bildschirm zum Bearbeiten des Produkts kopieren und in den Authentifizierungsbildschirm 123 00:10:03,630 --> 00:10:10,630 verschieben und diese anonyme Funktion durch diese ersetzen oder diese tatsächlich in einer neuen Variablen hier 124 00:10:10,770 --> 00:10:18,620 speichern, dem Eingabewechsel-Handler, der jetzt diese Funktion enthält. Genau wie im Bildschirm zum Bearbeiten von Produkten sollten Sie dies 125 00:10:18,620 --> 00:10:24,620 mit Rückruf verwenden, um sicherzustellen, dass dies nicht erneut gerendert wird, wenn dies nicht der Fall sein sollte. 126 00:10:24,620 --> 00:10:31,190 Eigentlich sollten wir es hier abrufen, einschließlich des Rückrufs für die Verwendung und 127 00:10:31,250 --> 00:10:38,360 der Abhängigkeiten des Rückrufs für die Verwendung. Dies sollte also dort unten im Eingabewechsel-Handler verwendet werden. 128 00:10:38,460 --> 00:10:45,690 Jetzt kann dieser Eingabewechsel-Handler an die Eingabewechsel-Requisiten gebunden oder hier gesetzt werden, sodass diese 129 00:10:45,720 --> 00:10:48,340 Requisiten auf diese Funktion 130 00:10:48,840 --> 00:10:55,740 abzielen. Damit speichern wir unsere Formularwerte oder Eingabewerte in unserem Formularstatus, mit dem wir 131 00:10:55,740 --> 00:10:59,370 gearbeitet haben Reduzierstück verwenden und so weiter. 132 00:10:59,380 --> 00:11:04,630 Jetzt ist es also dieser Formularstatus, an dem ich hier in meinem Anmeldehandler interessiert bin, da ich dort zum 133 00:11:04,630 --> 00:11:11,830 Anmelden von den Eingabewerten des Status übergeben muss. Eingabewerte für E-Mail- und Formularstatus. Passwort, also diese beiden Werte, die 134 00:11:11,840 --> 00:11:18,850 gesammelt wurden und jetzt der Anmeldehandler hier sind, kann diese Funktion an diese Schaltfläche dort unten gebunden werden, an 135 00:11:18,850 --> 00:11:24,320 die Anmeldeschaltfläche hier in onPress, da dies die Funktion ist, auf die ich zeigen 136 00:11:24,560 --> 00:11:28,160 möchte, um sie auszuführen, wenn wir drücke diesen Knopf. 137 00:11:28,410 --> 00:11:34,810 Mal sehen, ob das so funktioniert, wie es sollte. Wenn ich hier anfange, Werte einzugeben, werden 138 00:11:38,160 --> 00:11:42,750 meine Validierungsfehler angezeigt, aber irgendwie werden sie nicht angezeigt. Dies ist 139 00:11:44,040 --> 00:11:50,950 der Fall, da hier keine Fehlermeldung, sondern ein Fehlertext auf den Eingaben im Authentifizierungsbildschirm angezeigt wird. 140 00:11:51,060 --> 00:11:54,920 Wenn wir also diese Fehlermeldung in Fehlertext ändern, wenn wir dies jetzt testen. Wenn 141 00:11:55,020 --> 00:11:58,460 ich also hier einklicke und dort heraus tippe, erhalte ich meine Warnungen. 142 00:11:58,500 --> 00:12:00,960 Wenn ich jetzt eine gültige E-Mail-Adresse eingebe, ist 143 00:12:00,960 --> 00:12:08,350 diese weg. Wenn ich ein Passwort eingebe, das lang genug ist, ist das weg. Wenn ich jetzt hier auf Anmelden klicke, wollen wir sehen, ob das 144 00:12:08,350 --> 00:12:08,740 funktioniert. 145 00:12:08,740 --> 00:12:14,880 Gehen wir zu Firebase, zur Authentifizierung und dort sollten Sie jetzt einen neuen Benutzer sehen, dies ist 146 00:12:14,950 --> 00:12:17,360 der Benutzer, der gerade erstellt wurde. 147 00:12:17,530 --> 00:12:19,810 Wenn die Anmeldung funktioniert, stellen wir jetzt 148 00:12:19,810 --> 00:12:24,060 sicher, dass wir auch in den Anmeldemodus wechseln können und dass dies auch funktioniert. 149 00:12:25,100 --> 00:12:28,970 Beachten Sie übrigens auch, dass dies hier die Daten sind, die wir zurückbekommen 150 00:12:29,030 --> 00:12:30,150 haben. Das ist 151 00:12:30,150 --> 00:12:31,810 also die Antwort, dieses Objekt 152 00:12:31,880 --> 00:12:32,300 mit 153 00:12:32,300 --> 00:12:34,440 E-Mail, wie lange das Token in Sekunden 154 00:12:34,550 --> 00:12:40,220 gültig ist, dann das Token selbst, das diese lange kryptische Zeichenfolge ist, dann auch die ID des Benutzers, der 155 00:12:40,220 --> 00:12:41,960 erstellt wurde, und dieses Aktualisierungstoken.