Wie bereits erwähnt, ist in Firebase eine Authentifizierung integriert.
Wir müssen nur in den Authentifizierungsbereich gehen und dann auf die Anmeldemethode einrichten klicken und dort
Passwort und E-Mail- oder E-Mail-Passwort auswählen. Aktivieren Sie dies und klicken Sie auf Speichern.
Damit haben wir es aktiviert.
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,
können Sie
die Firebase REST Auth-API googeln. In diesen offiziellen Dokumenten erfahren Sie, wie
Sie Benutzer mit ihrer API erstellen und anmelden.
Jetzt gibt es eine Reihe von Endpunkten für verschiedene Dinge. Hier in dieser App konzentrieren wir uns auf die Anmeldung
und Anmeldung.
Wenn wir also auf Mit E-Mail und Passwort anmelden klicken, haben wir gelernt, wie das funktioniert.
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
in einer Sekunde zeigt, woher Sie ihn beziehen, und diesen Text an die Anfrage anhängen. Mail-Passwort und dann dieses
sichere Token-Rückgabefeld, das grundsätzlich immer wahr sein sollte. Als Antwort erhalten wir ein Token zurück, das ist das
Token, das ich auf der Folie erwähnt habe, die E-Mail, die wir verwendet haben, ein Aktualisierungstoken, das weiter
fortgeschritten ist. Dieses Token hier läuft tatsächlich nach dieser Anzahl
von Sekunden ab, die wir auch zurückerhalten . Mit einem Aktualisierungstoken könnten wir es neu erstellen, erneut
validieren, ohne dass sich der Benutzer erneut anmelden muss.
Dies wird hier nicht durchgeführt. Sie hätten einen separaten Endpunkt, an
den Sie das Aktualisierungstoken senden, um ein neues ID-Token zu erhalten. Ich werde es
hier einfach halten und einfach dieses Token verwenden und den Benutzer nach dieser Ablaufzeit erneut anmelden, da diese Ablaufzeit auch
etwas ist, das wir erhalten, damit
wir wissen, wann dieses Token ungültig wird und nicht mehr verwendet werden kann, weil wir es
tun werden Bis dahin müssen wir es in unserer App bereinigen, damit wir nicht versuchen, dieses ungültige Token an
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
hat, weil wir dies nicht tun müssen Bei jeder dieser Benutzerverwaltungen wird Firebase dies tun. Wir müssen keinen
serverseitigen Code schreiben.
Wir müssen also eine HTTP-Anfrage senden. Da ich dies auch
mit Redux verwalten werde, werde ich einen neuen Aktionsersteller dafür erstellen und ihn
auth nennen.
Ich werde auch bereits einen Reduzierer erstellen, da wir dort auch einige auth-bezogene Dinge verwalten werden, zum Beispiel
das Token und die Benutzer-ID.
Beginnen wir jedoch mit der Aktion und exportieren
wir daher hier einen Aktionsersteller, der als "Anmelden" bezeichnet werden kann. Zunächst ist dies
sinnvoll, da das Anmelden von Benutzern erst möglich ist, nachdem wir mindestens einen
Benutzer erstellt haben. Hier bei der Anmeldung
möchte ich in der Lage sein, einen neuen Benutzer zu erstellen. Dafür benötigen
wir eine E-Mail und ein Passwort, die von außen an den Ersteller der Anmeldeaktion weitergeleitet werden sollen.
Dies sendet dann eine HTTP-Anfrage. Um dies zu tun, verwenden wir das Redux Thunk-Paket erneut und
geben daher hier den asynchronen Versand zurück. Daher geben wir
eine Funktion zurück, die asynchrone Wartezeiten verwenden kann, die diesen Versand erhalten Funktioniert als Argument, das von
der Redux Thunk-Middleware übergeben wurde, die wir im letzten HTTP-Modul dieses Kurses verwendet haben. Auf diese
Weise können wir asynchronen Code ausführen, bevor wir eine Aktion auslösen, die tatsächlich unseren Store erreicht.
Dazu benötigen wir jetzt auch eine Aktionskennung für die Aktion, die wir später in
unserem Geschäft ausführen möchten. Dort verwende ich einfach die Anmeldung, die sich auch als Zeichenfolgenkennung anmeldet.
Hier werden wir also am Ende dieses Aktionsobjekt versenden, wo der Typ angemeldet ist und wo wir dann wahrscheinlich
auch einige zusätzliche Daten hinzufügen werden, aber bevor wir das tun, müssen wir eine HTTP-Anfrage senden.
Dies kann nun mit der Abruf-API geschehen, wie Sie im letzten Modul gelernt haben, und auf jeden Fall zuerst
dieses Modul durchgehen. Dies
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
haben wir diesen API-Schlüssel.
Das können wir von Firebase bekommen, indem wir hier auf
das Zahnradsymbol klicken, Projekteinstellungen. Dort finden
Sie den Web-API-Schlüssel und genau das benötigen Sie. Kopieren
Sie diesen und ersetzen Sie den API-Schlüssel einschließlich der eckigen Klammern durch diesen Schlüssel.
Dies ist die URL, an die wir eine Anfrage senden müssen. Nun, wie die offiziellen Dokumente uns sagen, müssen
wir eine
Post-Anfrage senden. Wie Sie erfahren haben, müssen wir dieses zweite Argument
hier hinzufügen, um abzurufen, welches ein Objekt ist, mit dem wir diese Anfrage konfigurieren können, und
dort können wir die Methode festlegen Zum Posten und Hinzufügen einiger Header müssen wir den JSON-Header der Anwendung hinzufügen.
Daher muss der Header des Inhaltstyps den Wert JSON der Anwendung haben, und wir müssen einen Body hinzufügen, und dieser Body muss
im JSON-Format vorliegen was wir mit JSON bekommen können. stringify und die Daten, die ich stringifizieren möchte, müssen
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
Argument erhalten, dasselbe für das Passwort, das sich auf das Passwortargument bezieht, das wir erhalten, und dann ist es das
dritte und ich kopiere es einfach, um es nicht falsch zu tippen. Geben Sie hier ein sicheres Token-Argument oder ein
Schlüssel-Wert-Paar zurück, bei dem der Wert nur wahr sein sollte. Diese Anfrage sollte einen neuen
Benutzer erstellen.
Jetzt können wir mit dem Schlüsselwort await auf die Antwort warten und dann, wie Sie zuvor erfahren
haben, überprüfen, ob die Antwort nicht in Ordnung ist. Wenn dies der Fall ist, möchte ich einen neuen Fehler auslösen, bei
dem ich sage, dass etwas schief gelaufen ist, und wir werden Schauen Sie sich später die detailliertere Fehlerbehandlung an. Im Moment ist es
soweit. Wenn dies jedoch in Ordnung ist, möchte ich meine Antwortdaten abrufen, indem ich auf die Antwort JSON warte, die
den Antworttext entpackt und ihn automatisch vom JSON-Format in Javascript umwandelt zu einem Javascript-Objekt oder -Array und jetzt
können wir damit arbeiten und im Moment werde ich diese Antwortdaten einfach hier protokollieren.
Jetzt haben wir den Rest unseres Authentx-bezogenen Redux-Stores nicht hinzugefügt. Wir werden das später tun, aber wir haben etwas, das
funktionieren sollte. Wir sollten in der Lage sein, dies zu versenden und daher eine solche Anmeldeanforderung zu senden.
Jetzt können wir zum Authentifizierungsbildschirm zurückkehren und dort am Ende auf diese Anmeldeschaltfläche klicken, die in dem Moment, in dem wir
uns tatsächlich anmelden, fälschlicherweise als Anmeldung gekennzeichnet ist. Lassen Sie es jedoch für den Moment
so,
also wenn wir darauf klicken Schaltfläche Ich möchte diese Anmeldeanforderung senden. Dazu müssen wir nach wie vor Use
Dispatch aus React Redux importieren, damit wir Aktionen versenden und natürlich
alles als Auth-Aktionen aus den Speicherordnerdaten, aus dem Aktionsordner und dort aus der Auth-Datei und mit importieren können das
hinzugefügt, wir können hier eine Funktion hinzufügen,
entweder eine Inline-Funktion oder wie diese,
eine benannte Funktion, die in einer Konstante gespeichert ist,
die ich als Anmeldehandler benenne.
Dort erwarte ich
keine Argumente und dort möchte ich dann versenden, also
brauchen wir Um Zugriff auf diese Versandfunktion durch Ausführen von use
dispatch zu erhalten, können
wir hier das Anmeldeereignis für Authentifizierungsaktionen oder die Anmeldeaktion auslösen.
Jetzt ist das Problem, dass dies die E-Mail und das Passwort erfordert und
ich dies im Moment nicht speichere.
Ich bekomme dies in meiner Eingabe, aber hier bei Eingabeänderung speichere ich nicht die Daten, die ich natürlich sollte.
Jetzt können wir uns hier unsere andere Form ansehen, um zu sehen, wie wir das gemacht haben.
Im Produktbearbeitungsbildschirm haben wir hier natürlich unseren Formularreduzierer, der unsere gesamte formularbezogene Gültigkeit und die
Werte verwaltet.
Am Ende können wir das also kopieren und dem Authentifizierungsbildschirm außerhalb der Authentifizierungsbildschirmkomponente wie folgt hinzufügen und
zum Bearbeitungsproduktbildschirm zurückkehren, um dann auch den Teil dort unten zu greifen, wo wir ihn mit dem Reduzierer
verwenden, also
kopieren All dies und fügen Sie es auch dem
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
importierten müssen wir ihn
jetzt nur noch ein wenig optimieren bisschen. Dieser Formularreduzierer ist in Ordnung. Übrigens können Sie ihn
in eine separate Datei auslagern, da wir sowohl im Authentifizierungsbildschirm als auch im Bearbeitungsproduktbildschirm denselben
Reduzierertyp verwenden. Wenn Sie wissen, wie das
funktioniert, können Sie sogar einen benutzerdefinierten Hook erstellen funktioniert, jetzt
lasse ich es einfach so.
Eine Sache, die ich jedoch brauche, ist die Aktualisierung
der Formulareingabe. Lassen Sie mich diese auch vom Bildschirm zum Bearbeiten
des Produkts abrufen.
Diese Konstante hier wird auch im Authentifizierungsbildschirm verschoben.
Nun, damit
ist alles in Ordnung, aber da unten, wo ich Use Reducer nenne und dies alles initialisiere, sieht
das natürlich anders aus.
Wir sollten eine E-Mail haben, die anfangs leer ist, und ein Passwort, das anfangs leer ist. Für
die Gültigkeit ist es
dasselbe. Wir haben nur eine E-Mail, die anfangs nicht gültig ist, und wir haben ein
Passwort, das anfangs nicht gültig ist, und daher das Gesamtformular auch anfangs ist nicht gültig.
Jetzt sollte der Status des Versandformulars immer dann ausgelöst werden, wenn sich unsere Eingabe hier
ändert. Wenn Sie also hier eine Änderung der Eingabe vornehmen, wissen Sie natürlich, dass Sie drei Werte
erhalten - wir erhalten die Eingabekennung, den Eingabewert und die Gültigkeit der Eingabe.
Am Ende können wir dies also einfach vom Bildschirm zum Bearbeiten des Produkts kopieren und in den Authentifizierungsbildschirm
verschieben und diese anonyme Funktion durch diese ersetzen oder diese tatsächlich in einer neuen Variablen hier
speichern, dem Eingabewechsel-Handler, der jetzt diese Funktion enthält. Genau wie im Bildschirm zum Bearbeiten von Produkten sollten Sie dies
mit Rückruf verwenden, um sicherzustellen, dass dies nicht erneut gerendert wird, wenn dies nicht der Fall sein sollte.
Eigentlich sollten wir es hier abrufen, einschließlich des Rückrufs für die Verwendung und
der Abhängigkeiten des Rückrufs für die Verwendung. Dies sollte also dort unten im Eingabewechsel-Handler verwendet werden.
Jetzt kann dieser Eingabewechsel-Handler an die Eingabewechsel-Requisiten gebunden oder hier gesetzt werden, sodass diese
Requisiten auf diese Funktion
abzielen. Damit speichern wir unsere Formularwerte oder Eingabewerte in unserem Formularstatus, mit dem wir
gearbeitet haben Reduzierstück verwenden und so weiter.
Jetzt ist es also dieser Formularstatus, an dem ich hier in meinem Anmeldehandler interessiert bin, da ich dort zum
Anmelden von den Eingabewerten des Status übergeben muss. Eingabewerte für E-Mail- und Formularstatus. Passwort, also diese beiden Werte, die
gesammelt wurden und jetzt der Anmeldehandler hier sind, kann diese Funktion an diese Schaltfläche dort unten gebunden werden, an
die Anmeldeschaltfläche hier in onPress, da dies die Funktion ist, auf die ich zeigen
möchte, um sie auszuführen, wenn wir drücke diesen Knopf.
Mal sehen, ob das so funktioniert, wie es sollte. Wenn ich hier anfange, Werte einzugeben, werden
meine Validierungsfehler angezeigt, aber irgendwie werden sie nicht angezeigt. Dies ist
der Fall, da hier keine Fehlermeldung, sondern ein Fehlertext auf den Eingaben im Authentifizierungsbildschirm angezeigt wird.
Wenn wir also diese Fehlermeldung in Fehlertext ändern, wenn wir dies jetzt testen. Wenn
ich also hier einklicke und dort heraus tippe, erhalte ich meine Warnungen.
Wenn ich jetzt eine gültige E-Mail-Adresse eingebe, ist
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
funktioniert.
Gehen wir zu Firebase, zur Authentifizierung und dort sollten Sie jetzt einen neuen Benutzer sehen, dies ist
der Benutzer, der gerade erstellt wurde.
Wenn die Anmeldung funktioniert, stellen wir jetzt
sicher, dass wir auch in den Anmeldemodus wechseln können und dass dies auch funktioniert.
Beachten Sie übrigens auch, dass dies hier die Daten sind, die wir zurückbekommen
haben. Das ist
also die Antwort, dieses Objekt
mit
E-Mail, wie lange das Token in Sekunden
gültig ist, dann das Token selbst, das diese lange kryptische Zeichenfolge ist, dann auch die ID des Benutzers, der
erstellt wurde, und dieses Aktualisierungstoken.