Nachdem wir nun die
Implementierung des REST-API-Servers mit Express und MongoDB in diesem Kurs abgeschlossen haben,
ist der nächste sofortige Gedanke, der in Ihrem Kopf auftreten könnte,
da wir bereits die Client-Anwendungen entwickelt haben,
egal ob es sich um die Angular-Anwendung, die Ionic Anwendung
oder die Native Script-Anwendung in den vorherigen Kursen,
wie integrieren wir die beiden zusammen, so dass unsere Client-Anwendung in der Lage ist,
mit dem vollwertigen REST-API-Server zu interagieren, den wir in diesem Kurs entwickelt haben? Das
werden wir also in dieser Lektion,
in diesem Vortrag und den beiden Übungen, die dieser Vorlesung folgen, untersuchen.
Am Ende dieser Lektion
haben Sie also einen Angular-Client, den wir
mit dem Server kommunizieren können, den Sie gerade in
diesem Kurs entwickelt haben, und in der Lage sein,
die vollwertige Client-Seitenansicht unserer gesamten Anwendung zu unterstützen.
Auf diese Weise werden wir sehen, dass wir
die komplette End-to-End-Anwendung von der Client-Seite bis zur Serverseite entwickelt haben.
Ein ähnlicher Ansatz kann auch mit
Ihrem Ionic Client oder mit Ihrem Native Skript-Client verwendet werden,
da sowohl Ionic als auch Native Skript
mit der Angular-Engine hinter den Kulissen entwickelt wurden. Die
Durchführung ähnlicher Schritte sollte also in der Lage sein, Ihren Ionic Client und auch
Ihren Native Skript-Client mit dem Express
plus MongoDB Rest API-Server zu kommunizieren, den wir in diesem Kurs entwickelt haben.
Um den Client und den Server zu integrieren,
ist unser Server bereits implementiert, um die vollwertige REST-API zu unterstützen.
Von unserer Client-Seite,
unabhängig davon, ob es sich um den Winkel-Client,
den ionischen Client oder den nativen Skriptclient handelt,
interagieren sie alle mit dem Server über die REST-API-Endpunkte.
Wenn der Client die Anforderung an den Server am REST-API-Endpunkt sendet,
antwortet der Server mit den entsprechenden JSON-Daten zurück an den Client,
und der Client kann dann die JSON-Daten verwenden, um die Ansichten für den Benutzer zu rendern.
Angesichts dieses Verständnisses der Kommunikation zwischen dem Client und dem Server
sollte die Integration ziemlich einfach sein.
Aber jetzt,
als wir unseren Angular oder den Ionic oder den NativeScript-Client entwickelten,
haben wir den vollwertigen Benutzerauthentifizierungsteil nicht gemacht,
da wir diesen nicht in unserem JSON-Server hatten.
Jetzt, da wir die Benutzerauthentifizierung in unsere Serverseite integriert haben,
müssen wir unsere Client-Anwendungen nachrüsten,
damit sie die Benutzerauthentifizierung auf der Serverseite durchführen können,
indem wir die Anmeldeinformationen auf dem Server veröffentlichen und dann
das Authentifizierungstoken von der Serverseite erhalten,
und danach die Kommunikation mit dem Server einschließlich des
Authentifizierungstoken in der Kopfzeile der Anforderungsnachrichten.
All dies bedeutet also, dass wir
kleinere Anpassungen sowohl am Client als auch am Server vornehmen müssen,
damit die beiden miteinander kommunizieren können.
Ein Aspekt, den ich in der Übung zuvor nicht behandelt habe,
ist, wie der Server die Abfrageparameter handhabt, die von der Clientseite stammen.
Also, wie wir erkannt haben,
wenn die Client-Seite eine Anfrage für ein
vorgestelltes Gericht oder einen vorgestellten Führer oder eine Feature-Promotion sendet,
sahen wir, dass die URL Geschirr enthält,
Fragezeichen-Funktion ist gleich wahr in
der Anforderungs-URL, die von der Client-Seite kommt.
Jetzt
haben wir in den Daten auf der Serverseite bereits gesehen, dass das Gericht, die
Förderung oder der Führer, das
Feature-Flag bereits in den JSON-Daten enthält.
Wenn diese Anforderung auf die Serverseite kommt,
sollte der Server in der Lage sein, diesen Abfrageparameter aus der eingehenden Anfrage zu extrahieren,
und dann die Abfrage der
MongoDB entsprechend durchzuführen und dann nur die Ergebnisse zu erhalten, bei denen dieses Feature-Flag auf true gesetzt ist.
Also, um das zu tun, wie wir gesehen haben,
ist die URL, die verwendet wird, um die Anfrage an den Server zu senden, /dish? feature=true.
Also, so werden wir die Abfrageparameter auf unserer Serverseite liefern.
Nun, zusätzlich, wenn diese Informationen auf der Serverseite empfangen werden,
haben wir gesehen, dass früher, als wir die get-Anfrage auf der Serverseite gemacht haben,
wir einfach gesagt, Gerichte finden und dann würden wir alle Gerichte finden und dann zurückgeben,
wenn die get-Anfrage an die DishRouterRoute/ gesendet wird.
Die gleiche Logik gilt sowohl für den Promo-Router als auch für den Leader Router.
Wenn Sie nun einen Abfrageparameter wie diesen in die URL einfügen,
wie wird unsere Serverseite in der Lage sein, diesen Abfrageparameter zu extrahieren?
Wenn die eingehende Anforderung
diesen Abfrageparameter an die eingehende URL angehängt hat,
verarbeitet der Express-Server diesen automatisch und wandelt ihn in
ein JSON-Objekt um, das in eine Anforderungsnachricht geladen wird, die auf der Serverseite eingeht.
Nun ist dies serverseitig in Form von req.query verfügbar.
Also, unabhängig von Abfrageparametern, die Sie in die URL einfügen,
werden in entsprechende JSON-Objekte mit den Informationen umgewandelt, die hier festgelegt sind,
und dann auf das Anforderungsobjekt auf der Serverseite geladen.
Also, durch die Verwendung von req.query auf der Serverseite,
werden wir in der Lage sein, diese Abfrageparameter zu erhalten.
Also, wenn Sie eine get-Anfrage auf der Serverseite ausführen,
sagen Sie dishes.find und dann fügen Sie die req.query in die Suche dort ein.
Wenn also die MongoDB abgefragt wird,
werden nur die Datensätze oder nur die Dokumente, für die das Featured auf true gesetzt ist,
aus der MongoDB extrahiert und uns innerhalb dieser get-Methode hier zurückgegeben
und können dann an die Client-Seite zurückgegeben werden.
Dies ist also so einfach wie bei der Verarbeitung der Abfrageparameter auf unserer Serverseite.
Also, dieses Update werden wir sowohl mit dem Dish Router,
dem Promo-Router als auch dem Leader Router auf unserer Serverseite tun.
Der nächste Teil ist natürlich die Benutzerauthentifizierung.
Wie wir auf der Serverseite festgestellt haben,
haben wir bereits diese REST-API-Endpunkte,
die für die Benutzerauthentifizierung nützlich sind.
Insbesondere, wenn Sie einen Beitrag zu /users/login
mit dem Benutzernamen und Passwort machen,
dann können Sie den Benutzer auf der Serverseite authentifizieren.
Wenn der Benutzer nun auf der Serverseite erfolgreich authentifiziert wurde,
enthält die Antwortnachricht, die von der Serverseite kommt,
das JSON-Web-Token in den Antworttext der eingehenden Antwortnachricht von der Serverseite.
Also, auf der Client-Seite
sollten wir in der Lage sein, dieses Token zu extrahieren und dann dieses Token später zu verwenden.
Wenn also der Client die Antwortnachricht von
der Serverseite empfängt und der Benutzer erfolgreich auf der Serverseite authentifiziert wurde,
enthält die Antwortnachricht das JSON-Web-Token,
das extrahiert werden muss, und danach
sollte der Client dieses JSON-Web-Token in
die Autorisierungs-Header für jede ausgehende Anforderung von der Client-Seite.
Also, wie gehen wir mit diesem ganzen Satz von Operationen um?
Nun, hier werden wir
einen anderen Dienst implementieren, der auf unserer Client-Seite verwendet wird,
in unserem Angular-Client,
genannt Authentifizierungsdienst,
und dort werden wir die gesamte Login- und Abmeldeoperationen behandeln.
Nun ist der Abmeldevorgang ziemlich einfach, aber
wenn wir das JSON-Web-Token zerstören, das wir auf der Clientseite
haben, kann der Client nicht mehr auf den Server zugreifen.
Es ist also so einfach wie das Löschen
des JSON-Web-Token auf der Clientseite zum Abmelden dieses Clients.
Angesichts dieses Verständnisses
sehen wir uns also die Schritte an, die bei
der Benutzerauthentifizierung und der Handhabung der Benutzerauthentifizierung auf der Clientseite beteiligt sind.
Um die Benutzerauthentifizierung auf der Clientseite zu bearbeiten,
sendet der Client eine Post-Anfrage an den /users/login Endpunkt,
und der Text der Post-Anfrage enthält den Benutzernamen und das Passwort.
Wir verwenden in diesem Fall die Login-Authentifizierung.
Nun, für die Facebook-Authentifizierung wieder,
das ist ein anderes Setup, das ich jetzt nicht diskutieren werde.
Der Anforderungstext, wie Sie für die lokale Authentifizierung
sehen, enthält jedoch den Benutzernamen und das Kennwort.
Wenn der Benutzer also erfolgreich auf der Serverseite authentifiziert wurde,
antwortet der Server dann an den
Client zurück, indem er das JSON-Web-Token in die Antwortnachricht einschließt.
Wenn der Client die Antwortnachricht von der Serverseite empfängt,
muss der Client dieses JSON-Web-Token erfassen
und dann das JSON-Web-Token im lokalen Speicher auf der Clientseite speichern.
Danach sollte der Client dieses Token in jede ausgehende Anforderung aufnehmen.
Also, wie wird das auf der Client-Seite erreicht?
In erster Linie
müssen Sie natürlich das eingehende JSON-Web-Token im lokalen Speicher speichern,
und das geschieht im Authentifizierungsdienst, den wir auf der Clientseite implementieren.
Jetzt
wird der Client für jede ausgehende Anforderung dieses Token in den Header aufnehmen,
den Autorisierungs-Header der ausgehenden Anforderung.
Nun, wie wird das erreicht?
Also, hier werden wir die Hilfe eines HTTP-Abfangs nehmen
, den der HttpClient in Angular unterstützt.
Mit dem
HTTP-Interceptor können wir also
jede ausgehende Anforderungsnachricht abfangen oder sogar
jede eingehende Antwortnachricht abfangen, wenn Sie dies wünschen.
Aber in der Angular-Anwendung
werden wir den Anforderungsinterceptor implementieren
, den ich später in der Übung veranschaulichen werde.
Wenn im HTTP-Anforderungsinterceptor die Anforderungsnachricht abgefangen wird, wird
jede ausgehende Anforderungsnachricht abgefangen und dann wird das JSON-Web-Token
in den Autorisierungs-Header der Anforderungsnachricht eingefügt.
Danach würde die Anforderungsnachricht an die Serverseite weitergegeben werden.
Daher trägt jede ausgehende Anforderung, nachdem der Benutzer auf der Serverseite authentifiziert wurde,
jede ausgehende Anfrage von der Clientseite
das JSON-Web-Token im Autorisierungsheader der ausgehenden Anforderung.
Sobald sich der Client abmeldet,
wird das JSON-Web-Token auf der Clientseite zerstört.
Danach enthalten ausgehende Anforderungen das JSON-Web-Token nicht mehr,
da das JSON-Web-Token auf der Clientseite nicht existiert.
Dadurch verliert der Benutzer die Authentifizierung.
So werden wir den Anmelde- und Abmeldeprozess auf der Clientseite behandeln,
indem wir mit dem Server kommunizieren
und dann das JSON-Web-Token erhalten
und dann das JSON-Web-Token in jede ausgehende Anforderung einschließen.
Nun, mit diesem Verständnis, wie der Client und der Server interagieren,
gehen wir jetzt mit den nächsten zwei Übungen über.
Zunächst werden wir die Serverseite mit ein paar Ergänzungen aktualisieren,
so dass es gut in unsere Client-Website integriert werden kann.
Danach werden wir die Client-Seite aktualisieren oder vielmehr werde ich Ihnen
eine vollwertige Client-Anwendung geben, die ich
aus dem früheren Angular-Kurs genommen habe, und dann werde ich sie aktualisiert,
was uns auch die Möglichkeit bietet,
HTTP-Interceptoren sowohl für die ausgehenden Anfragen als auch für die eingehende Antwortnachrichten.
Also, wir werden beide in den nächsten zwei Übungen behandeln,
und am Ende werden Sie verstehen, wie Sie
Ihren Client und die Serverseite integrieren können.