[MUSIC]
Nun, da wir über OAuth 2 verstanden haben und wie Facebook OAuth 2 unterstützt,
lassen Sie uns auf diese Übung gehen, wo wir unsere
Express-Server-Anwendung konfigurieren, um Facebook als OAuth 2-Anbieter für unseren Server zu nutzen.
Und zur gleichen Zeit für unsere Kundenanwendung.
In dieser Übung werden wir uns auf den Pass verlassen, den
wir bereits in unserer Express-Anwendung konfiguriert haben.
Wir werden eine neue Strategie für die Authentifizierung mit Facebook
mit diesem Pass Facebook Token Knoten Modul konfigurieren.
Um mit dieser Übung zu beginnen,
gehen Sie zu https//developers.facebook.com/apps.
Nun, hier werden Sie die Client-Anwendung registrieren, die im Grunde
Ihr Server ist, der zusätzliche Server, der als Client-Anwendung für Facebook fungiert.
Und dann werden wir dort eine Client-Anwendung registrieren.
Und dann erhalten Sie eine App-ID und ein App-Geheimnis von Facebook.
Nun ist es selbstverständlich, dass Sie einen Facebook-Account benötigen
, um dies konfigurieren zu können.
Wenn Sie kein Facebook-Konto haben und diese Übung nicht durchführen möchten,
dann ist es nicht schaden, diese Übung nicht durchzuführen.
Aber natürlich
benötigen Sie für diese OAuth 2-Übung ein Facebook-Konto, um Ihren OAuth-Anbieter auf Facebook zu konfigurieren. Wenn Sie
also auf diese Seite
Developers.facebook.com/apps gehen, werden Sie feststellen, dass Sie
sich anmelden müssen, um fortzufahren, wenn Sie nicht von Ihrem Browser eingeloggt sind.
Jetzt können Sie sehen, dass ich hier bereits ein paar Apps konfiguriert und
getestet habe.
Um nun eine neue App zu erstellen, klicken Sie auf „Neue App hinzufügen“.
Und dann können Sie den Namen für Ihre App angeben.
Also kann ich Confusion3 sagen, und dann können wir die Kontakt-E-Mail zur Verfügung stellen.
Folgen Sie dann dem Verfahren, um Ihre neue App hier zu erstellen.
Sobald die App erstellt wurde, werden Sie sofort feststellen,
dass eine App-ID für Ihre App erstellt wurde.
Und dann für diese spezielle App.
Wenn Sie also zum Dashboard gehen, werden Sie
zwei Informationen sehen, die Sie wirklich benötigen, um weiter fortzufahren.
Eine davon ist die App-ID. Stellen Sie also sicher, dass Sie eine Kopie der App-ID erstellen.
Und die zweite ist das App-Geheimnis.
Also, Sie können hier auf den Show-Button tippen und dann erhalten Sie die App geheim.
Geheimnis hier, so wie Sie sehen können, sind diese beiden nichts anderes als ASCII-Strings.
Machen Sie also eine Kopie davon, weil Sie Ihren Experten-Server und
auch Ihre Client-Anwendung mit diesen zwei Informationen konfigurieren müssen.
Und sobald Sie das ergriffen haben,
können wir mit dem Rest der Übung fortfahren.
Sie müssen zu Ihrem Dashboard Ihrer Anwendung gehen.
Und in den Einstellungen, wie Sie sehen können, fügen
Sie in den Grundeinstellungen hier einfach eine Website-Plattform hinzu.
Und geben Sie dann die URL als https//localhost3443 an.
Und speichern Sie die Änderungen hier in Ihrer Anwendung.
Nach dem Hinzufügen in der Website gehen Sie hier zu den erweiterten Einstellungen.
Und dann klicken Sie auf Ja, um native oder
Desktop-App hier zu sagen und sagen Sie Ja dazu und speichern Sie die Änderungen.
Geben Sie in der Grundeinstellung in den App-Domänen
https://localhost:3443 ein und speichern Sie die Änderungen.
Als nächstes gehen Sie zu den Übungsanweisungen für diese Übung.
Und Sie würden sehen, dass es eine index.html Datei gibt, die
ich in den Übungsressourcen bereitgestellt habe.
Laden Sie diese Datei index.html herunter, und verschieben Sie sie dann in Ihren Öffentlichen Ordner.
Also lassen Sie uns diese index.html Datei herunterladen.
Als nächstes
sehen Sie, wenn Sie in den Ordner ConfusionServer im Öffentlichen Ordner gehen, dass ich bereits eine Datei index.html habe.
Ich werde dies durch die heruntergeladene Datei index.html ersetzen
, die ich gerade erhalten habe.
Ich habe das auf meinem Desktop gespeichert.
Also werde ich nur diese index.html ziehen und
dann die Datei index.html im öffentlichen Ordner meines ConfusionServers ersetzen.
Als nächstes öffnen wir zum Editor die Datei index.html.
Und wenn Sie es öffnen, werden Sie sehen, dass ich
hier bereits einen JavaScript-Code konfiguriert habe.
Dieser JavaScript-Code, den ich von Facebook bekommen habe, wo sie
angeben, wie Sie eine Dev-Anwendung mit diesem konfigurieren können.
Also, ich habe das aus der Facebook-Anleitung kopiert.
Insbesondere werden Sie feststellen, dass in dieser Datei index.html
dieses AppID-Feld hier vorhanden ist.
Sie werden dieses AppID-Feld durch die
Client-ID ersetzen, die Sie erhalten haben, indem Sie Ihre App auf Facebook registrieren.
Also, hier ersetze ich die ID dieses Kunden
durch die ID meiner App, die ich hier bei Facebook registriert habe.
Und Sie müssen den gleichen Schritt mit der App machen
, die Sie auf Facebook registrieren, mit der App-ID, die Sie von Facebook erhalten.
Und speichern Sie dann die Änderungen in index.html.
Diese index.html Seite, die ich hier habe, wird
eine Login-Schaltfläche auf der index.html Seite erstellen, die
uns hilft, sich bei Facebook anzumelden und dann ein Zugriffstoken von Facebook zu erhalten.
Als nächstes werden
wir in den ConfusionServer-Ordner gehen, das Passport-Facebook-Token-Knotenmodul installieren.
Geben Sie also an der Eingabeaufforderung npm install
Passport-Facebook-Token ein und
installieren Sie dieses Knotenmodul.
Und wie Sie sehen können, benutze ich die Version 3.3.0 in diesem Kurs.
Gehen Sie zurück zum Editor, öffnen Sie config.js.
Und in config.js werde ich
eine Eigenschaft namens 'facebook' in meine config.js Datei hinzufügen.
Und hier im Inneren werde ich
meine ClientID und
das ClientSecret konfigurieren.
Jetzt ist die ClientID genau das, was Sie von Facebook erhalten.
Hier, und das Geheimnis des Kunden, wie Sie sahen, als Sie Ihre Anwendung registriert.
Sie erhalten dort eine zweite Zeichenfolge, also kopieren Sie diese Zeichenfolge und
fügen Sie sie dann in das ClientSecret ein.
Stellen Sie nun sicher, dass dies hier als String eingefügt wird.
In ähnlicher Weise fügen Sie das ClientSecret in meine Datei config.js ein.
Also, das hier zu konfigurieren, hilft mir, diese beiden dort zu verwenden, wo ich in meinem Code brauche.
Als nächstes, wie wir festgestellt haben, wann immer der Benutzer
sich anmeldet und dann das Zugriffstoken erhält und es an unseren Express-Server weitergibt.
Der Express-Server wird dieses Zugriffstoken verwenden und
die Dateiinformationen vom Facebook 0 sollte Server abrufen.
Und dann, sobald es die Profilinformationen erreicht, dann wird unser Express-Server
ein neues Benutzerkonto in unserer Anwendung erstellen.
Und verwenden Sie die Facebook-ID als Index in diesem Use-Account.
Um dies anzupassen,
werden wir in die Datei user.js gehen, wo wir unser Modell definiert haben.
Also, neben dem Vornamen und dem Nachnamen,
werde ich hier auch ein Feld namens FacebookId hinzufügen,
das vom Typ String hier ist.
Die FacebookId speichert die FacebookId
des Benutzers, der das Zugriffstoken übergeben hat.
Im nächsten Schritt werde ich Ihnen zeigen, wie Sie dies konfigurieren.
Dann konfigurieren wir unsere Facebook-Strategie mit dem Pass Facebook Token..
Wenn ein Benutzer das Zugriffstoken übergibt,
werden Sie das Profil abrufen und dann ein Konto für
diesen Benutzer in unserem lokalen Server hier in unserem Express-Server einrichten.
Wir werden den Vornamen und den Nachnamen und die FacebookID initialisieren.
Aber natürlich wird dieses spezielle Konto kein Passwort oder
eher den damit verbundenen Hash haben.
Denn wenn ein Benutzer sich mit diesem Konto anmeldet, muss er seinen
Facebook-Login-Teil verwenden, um sich bei unserer Anwendung anzumelden.
Als nächstes werden wir gehen, um dark.js Datei zu authentifizieren.
Also hier, wo wir alle unsere verschiedenen
Passauthentifizierungsstrategien eingerichtet haben.
Also hier neben der jwt-Strategie und
der lokalen Strategie, die ich hier konfiguriert habe,
lassen Sie mich hier eine FacebookTokenStrategy erstellen.
Und dann setzen Sie das erforderliche Passwort-Facebook-Token.
Und das wird uns eine neue Strategie geben, die wir
hier in unserem Passport-Modul konfigurieren können.
Also, wenn ich hier unten in den Code gehe, genau dort,
am Ende dieser Datei, werde ich
FaceBookPassport als
passsport.use () erstellen.
Und so würde ich hier neue FacebookTokenStrategy angeben.
Und dann werden wir die Details dieser
FacebookTokenStrategy angeben, direkt an dieser Stelle hier.
Also, in dieser FacebookTokenStrategy, wie nähern wir uns diesem Problem?
Lassen Sie mich einfach den Wortumbruch umwickeln, damit Sie den vollständigen Code sehen können.
Also für die FacebookTokenStrategy, werden wir beginnen, indem wir zuerst sagen.
Der erste Teil der FacebookTokenStrategy nimmt die ClientID.
Was wir haben config bei config.facebook.clientID hier,
und Client, Secret,
die auch wir in konfiguriert haben, Unsere Konfigurationsdatei hier.
Also werden wir das hier als ersten Parameter für diese Strategie liefern.
Und dann ist der zweite Parameter, wo die Trotzung
der Callback-Funktion, die an diesem Punkt kommt.
So erhält die Callback-Funktion hier drei Werte.
So wird AccessToken,
RefreshToken, Profil und
Callback aufgerufen, wie hier getan.
Dies sind also die vier Parameter, die in die Callback-Funktion kommen, die wir
an dieser Stelle konfigurieren werden.
Also lassen Sie mich diesen Code einrücken, so dass es ein bisschen klarer zu sehen ist.
Und in dieser Callback-Funktion, die ich hier konfiguriere,
werde ich zuerst User.Findone sagen.
So werden wir versuchen, zu sehen, ob dieser bestimmte Facebook-Benutzer
früher eingeloggt hat, so dass das Konto bereits
konfiguriert werden würde, Mit der FacebookID.
Wo erhalten wir nun die FaceBookID?
Beachten Sie, dass wir dieses Profil für den Benutzer erhalten,
der hier reinkommt, damit Sie sehen können, dass dieses Profil als Parameter erscheint.
Dieses Profil enthält viele Informationen von Facebook, die wir
innerhalb unserer Anwendung verwenden können.
Der AccessToken wird natürlich vom Benutzer an den Server geliefert.
Also, sobald wir versuchen, mindestens einen Benutzer mit einer Facebook-Profil-ID zu finden.
Also, wenn dieser Benutzer existiert, dann haben wir bereits festgestellt, dass der Benutzer zuvor mit dem
Facebook-Ansatz in unserem Konto eingeloggt hat.
Also, in diesem Fall können wir weitergehen, sonst werden wir einen neuen Benutzer erstellen.
Also, die Callback-Funktion hier gibt es zwei Parameter,
den Err und den Benutzer hier.
Und diese Callback-Funktion, wie wir sehen werden,
gut innen hier werden wir überprüfen, ob (err) zu sehen.
Wenn dies also einen Fehler verursacht, dann
müssen wir natürlich zurückgeben (irr, false).
Dies geschieht, wie Sie sehen können, ist die Callback-Funktion,
die hier als Parameter für diese Funktion eintritt, also
rufen wir das getan mit dem Err und false auf.
Wenn es kein Fehler ist, dann
werden wir sagen, ob (! Fehler
&& Benutzer! == null).
Also, wenn der Benutzer nicht null ist, bedeutet das, dass wir einen Benutzer im System gefunden haben
, der nicht früher mit diesem bestimmten FacebookId war, also für den Benutzer,
alles, was wir tun müssen, ist zurück getan (null,) da
es hier keinen Fehler gibt, und dann werden wir den Benutzerwert dafür hier unten zurückgeben.
Das bedeutet, dass, wenn sich der Benutzer bereits früher mit
dem Facebook-Ansatz angemeldet hat, der Benutzer bereits erstellt worden wäre.
Und so wird dieser Benutzer gefunden und dann geben wir einfach diesen Benutzer zurück.
Wenn nicht, sehen Sie, wenn nicht Teil ist der interessantere Teil dieser Übung.
Wenn der Benutzer nicht existiert, müssen wir einen neuen Benutzer erstellen.
Nun, um den neuen Benutzer zu erstellen, sagen wir Benutzer,
= neuer Benutzer, und wenn wir einen neuen Benutzer erstellen,
erinnern Sie sich, dass wir den Benutzernamen übergeben müssen.
Der Benutzername würde aus dem Profil abgerufen werden, und das
zurückgegebene Facebook-Profil hat ein Feld namens DisplayName.
Und das ist das Feld, mit dem ich hier einen neuen Benutzer erstellen werde.
Wir werden also einen neuen Benutzer mit dem Benutzernamen erstellen,
der dem DisplayName entspricht, und nachdem der Benutzer erstellt wurde,
sagen wir User.facebookId = profile.id.
So werden wir die Facebook-ID des Benutzers speichern.
Also kehren Sie in diesem Profilobjekt hier zurück und
setzen Sie dann die Facebook-ID des Benutzers auf die Profil-ID.
Damit später, wenn sich der gleiche Benutzer anmeldet,
wird diese Suche in der Lage sein, diesen Benutzer in unserer Datenbank zu finden.
Und dann werden wir
sagen user.firstname
= profile.name.givenName
Also das Profil hat dieses Name-Objekt darauf,
das einen Vornamen und einen Familiennamen damit verbunden hat.
Dies wird vom Facebook-Profil des Nutzers zurückgegeben.
Und auch der user.lastname werden wir
es auf Profile.name.familyName setzen.
Und dann, sobald wir alle diese eingerichtet haben, sagen wir user.save.
Also speichern wir die Änderungen an den Benutzer und
dann wird dies Fehler und den Benutzer zurückgeben.
Es gibt also einen Fehler zurück, wenn der Benutzer nicht erstellt werden konnte,
andernfalls wird der erstellte Benutzer hier zurückgegeben.
Also in diesem Fall werden wir sagen, wenn (err),
dann wird getan (irr,
false) zurückkehren, weil wir es nicht geschafft haben, den Benutzer zu erstellen.
Andernfalls wurde der Benutzer erfolgreich erstellt,
daher werden wir fertig (null, Benutzer) zurückgeben.
Egal, was der Fall ist,
wenn der Benutzer existiert, finden Sie diesen Benutzer und geben den Wert zurück.
Wenn der Benutzer nicht existiert, erstellen Sie einen neuen Benutzer basierend auf
dem Facebook-Profil des Nutzers, das wir erhalten haben.
Und dann fügen Sie den neuen Benutzer in unsere Server-Site, in die Datenbank.
Dies ist also die Strategie, die wir für
unseren Pass, die neue FacebookTokenStrategy, konfigurieren.
Dies ermöglicht es uns, den Benutzer zu finden.
Also, jetzt, da wir unsere Anwendung konfiguriert haben, um entweder
einen Benutzer zu erstellen oder den Benutzer basierend auf der Facebook-ID zu finden.
Der letzte Schritt besteht natürlich darin,
eine neue Route in die Datei users.js einzuführen.
In der Datei users.js werden Sie sich erinnern, dass wir die Anmelderoute hatten, die
es dem Benutzer ermöglicht, sich für ein lokales Konto mit dem Benutzernamen und dem Passwort anzumelden.
Und dann haben Sie die Anmeldung, die es dem Benutzer ermöglicht, sich mit dem Benutzernamen und
Passwort anzumelden.
Aber jetzt werden wir Facebook verwenden, um den Benutzer einzuloggen.
Also in diesem Fall werden wir sagen, router.get,
und der Endpunkt wird /facebook/token sein.
Wenn der Benutzer also eine Get-Anfrage an Benutzer/Facebook/Token
sendet, werden wir den Benutzer mit
der Facebook OAuth 2-basierten Authentifizierung authentifizieren.
Also hier werden wir sagen passport.authenticate, und
wir werden uns mit der Facebook-Token Strategie authentifizieren.
Erinnern Sie sich, dass wir dies bereits in unserer Datei authenticate.js konfiguriert hatten,
so konfigurieren wir die Pass-Authentifizierungs-Facebook-Token-Strategie und
dann die Callback-Funktion, die hier req, res bekommt.
Also lassen Sie mich, Schalten Sie den Wortumbruch hier,
damit Sie sehen können, dass dies der router.get auf diesem Endpunkt hier ist.
Und dann hier werde ich diese Anwendung konfigurieren.
Also, an diesem Punkt würden wir sagen, wenn (req.user), jetzt bemerken, dass, wenn wir
passport.authenticate mit der facebook-Token Strategie aufrufen.
Dies, wenn es erfolgreich ist,
wäre es in den Benutzer in das Anforderungsobjekt geladen worden. Wenn
wir also hier zu diesem Punkt kommen, nachdem die passport.authenticate
facebook-Token Middle Ware ausgeführt wurde,
würden Sie den Benutzer bereits in das Anforderungsobjekt laden lassen.
Also, wenn das der Fall ist, dann werden wir sagen, dass wir ein Token erstellen.
Wir werden hier ein JSON-Web-Token erstellen, genau wie die Art und Weise, wie wir
das JSON-Web-Token erstellt haben, wenn sich der Benutzer hier angemeldet hat.
Also, wir werden das hier kopieren.
Authenticate.getToken, also erhalten wir das JSON-Web-Token.
Im Wesentlichen sendet der Benutzer das Zugriffstoken an den Express-Server,
der ExpressServer verwendet den AccessToken, um zu Facebook zu gehen und
dann das Profil des Benutzers abzurufen.
Und wenn der Benutzer nicht existiert, erstellen wir einen neuen Benutzer mit dieser Facebook-ID.
Und danach generiert unser Express-Server
ein JSON-Web-Token und gibt dann das JSON-Web-Token an unseren Client zurück.
Alle nachfolgenden Zugriffe von unserem Benutzer müssen dieses
JSON-Web-Token enthalten, das wir gerade mit diesem Ansatz zurückgegeben haben.
An dieser Stelle benötigen Sie das Facebook-Zugriffstoken nicht mehr.
Sie können das Facebook-Zugriffstoken an diesem Punkt verwerfen, da
das JSON-Web-Token derjenige ist, der die Benutzerauthentifizierung für die
Dauer aktiv hält, die dieses JSON-Web-Token aktiv ist.
Darüber hinaus müssen wir diese Schritte natürlich auch hier tun.
Also werde ich diesen Teil hier kopieren.
weil ich genau das Gleiche in diesem Fall auch tun werde,
also werden wir diesen Code hier einfügen.
Also sagen wir StatusCode = 200, Inhalt-Header-Typ, und
dann sagen wir res.json, dass Sie erfolgreich angemeldet sind, und das war's.
Mit diesem Ansatz, wie Sie sehen können, verwenden Sie jetzt einen Aufruf an diesen Endpunkt.
Die Benutzeranwendung, der Client in diesem Fall,
wird das Facebook-Zugriffstoken übergeben, das sie gerade von Facebook erhalten hat.
Und dann wird unser Express-Server dann das Facebook-Zugriffstoken verwenden, um
den Benutzer auf Facebook zu verifizieren.
Und dann, wenn der Benutzer von Facebook als legitimer Benutzer anerkannt wird,
dann wird unser Express-Server ein JSON-Wed-Token an unseren Kunden zurückgeben.
Und dann wird unser Client authentifiziert und
kann dann mit der Ausführung der anderen Operationen fortfahren,
indem das JSON-Wed-Token im Header aller Anforderungsnachrichten verwendet wird.
Anschließend, genau wie wir es bei der lokalen Authentifizierungsstrategie getan haben, ist das alles.
Also haben wir alle Updates unserer Anwendung abgeschlossen, lassen Sie uns die Änderungen speichern.
Gehen wir zu unserem Terminal, lassen Sie uns den Server hier starten,
also sagen wir npm start, und der Server ist betriebsbereit.
Und ich bemerkte, dass ich den P-A-S-S-S-S-S-Port eingegeben hatte,
und so verursachte dies hier einen Fehler.
Beachten Sie also, wie einfach es ist, Fehler zu machen.
Also lassen Sie mich gehen und korrigieren, und dann kommen Sie zurück und starten Sie meinen Server neu.
Also, wenn Sie auf Fehler wie diese stoßen, keine Panik.
Schauen Sie sich um, um zu sehen, wo das Problem ist, und sehr oft
wird es ein einfaches Problem wie dieses sein, das Fehler für Sie verursachen wird.
Wieder, zurück zur users.js und
Sie sehen, dass
ich in der Datei authenticate.js diesen P-A-S-S-S-S-S-Port konfiguriert habe.
Lassen Sie mich in der Datei authenticate.js das in Passsport beheben und
dann die Änderungen speichern und dann meinen Server neu starten.
Nun, starten Sie meinen Server neu, also ist mein Server jetzt betriebsbereit.
Wechseln Sie zu diesem Zeitpunkt zu einem Browser.
Geben Sie im Browser https://localhost3443 ein.
Wenn Sie diese Seite hier zwischengespeichert haben, können Sie den Cache entfernen.
Oder geben Sie einfach localhost: 3343/index.html ein, und
dann werden Sie sofort bemerken, dass
Sie in dieser index.html diese Schaltfläche mit dem Namen Login Button sehen werden.
Wir werden also auf diesen Login-Button klicken, um sich bei Facebook anzumelden.
Lassen Sie uns einloggen und dann kommen Sie mit dieser Nachricht hier.
Wenn Sie sich bereits früher bei Facebook angemeldet haben,
wird es um die Erlaubnis bitten, als Benutzer fortzufahren.
Wenn nicht, dann werden Sie aufgefordert, sich bei Facebook anzumelden und
dann den Vorgang fortzusetzen.
Da ich mich gerade ein bisschen früher bei Facebook eingeloggt hatte,
kann ich einfach auf Weiter klicken.
Öffnen Sie nun die Entwickler-JavaScript-Konsole unten hier.
Und in der JavaScript-Konsole sehen Sie eine Reihe von Nachrichten hier gedruckt.
Öffnen Sie dann insbesondere dieses Objekt, das Sie in der JavaScript-Konsole sehen werden.
Und in diesem Objekt sehen Sie diese Alt-Antwort hier.
Und da drin sehen Sie ein Access-Tool, das dort vorhanden ist.
Nun, dies ist eine Antwort, die von Facebook oder
aus zum Authentifizierungsserver von unserer Anwendung hier erhalten wird.
Und ich werde das einfach kopieren,
denn dies ist das Zugriffstoken, das Facebook uns zur Verfügung gestellt hat.
Jetzt muss ich dieses Zugriffstoken an meinen Express-Server geben
, damit er mein Profil verifizieren kann und mich dann bei dieser Anwendung anmelden kann.
Also mache ich das
hier auf geballte Weise, nur weil ich Ihnen zeigen wollte, wie das Zugriffstoken hier reinkommt.
Und wir kopieren das Zugriffstoken, dann werde ich das nehmen und
Postman verwenden, um dieses Zugriffstoken an meinen Express-Server zu senden.
Wenn Sie nun eine Web-App wie Angular,
die Ionic App oder die NativeScript-App entwerfen, müssen Sie nicht alle diese Schritte ausführen.
Nun, im Grunde, wenn das Zugriffstoken an Ihre Web-App,
die Angular-App, die Ionic App oder die NativeScript-App zurückgegeben wird,
erfassen Sie einfach dieses Zugriffstoken dort.
Und dann übergeben Sie dieses Zugriffstoken an den
Express-Server mit dem XMLHttpRequest, um die Informationen zu erhalten.
Aber da wollte ich manuell die Schritte illustrieren.
Also habe ich diese index.html mit einem einfachen
JavaScript-Code eingerichtet, den Facebook für mich bereitstellt.
Damit ich dieses Autorisierungs-Token abrufen kann, das wir von
Facebook erhalten haben.
Also lassen Sie mich dieses Autorisierungs-Token kopieren.
Jetzt werden wir zu Postman gehen und dann versuchen zu
sehen, wie wir das JSON-Web-Token von unserem Express-Server erhalten können.
Nun, gehen Sie zu Postman, von Postman,
lassen Sie mich jetzt eine GET-Anfrage an
localhost: 3443User's FacebookToken.
Und wenn ich diese Anfrage an diesen Punkt sende,
ist die andere Konfiguration, die ich hier tun muss, dass
ich dieses Zugriffstoken übergeben muss, das ich gerade erhalten habe.
Um nun ein Zugriffstoken im Header zu übergeben,
kann ich es als Autorisierungs-Header übergeben, indem ich die Autorisierung eingippe.
Beachten Sie jedoch, dass der Wert in diesem Fall als Beta mit einem Großbuchstaben B eingegeben werden sollte,
und fügen Sie dann das Zugriffstoken, das wir von Facebook erhalten haben, hier ein.
Beachten Sie hier das Großbuchstabe B, und
dann können Sie dies an unseren Server übergeben.
Und dann, wenn Sie von unserem Server antworten,
würden Sie sehen, dass Sie das JSON-Web-Token von unserer Server-Site erhalten hätten.
Dies ist eine Möglichkeit, dass Sie das JSON-Web-Token erhalten, indem Sie Ihr
Zugriffstoken von Facebook austauschen, das Sie gerade mit Ihrem Express-Server erhalten haben.
Und Ihr Express-Server wiederum wird
Ihre Profilinformationen von Facebook abrufen und
dann ein Konto speziell für Sie erstellen und Ihnen
dann das JSON-Web-Token zurückgeben, wenn alles erfolgreich ist.
Eine andere Möglichkeit, diese Informationen zu übergeben, ist in der Kopfzeile,
Sie geben access_token als Schlüssel ein.
Und in den Wert geben Sie einfach das
Zugriffstoken wie hier ein, und dann können Sie die Anfrage senden Und das Gleiche.
Es wird wieder das JSON-Web-Token für Sie zurückgeben.
Und dann würden Sie das JSON-Web-Token erfassen und dann mit dem Rest
der Zugriffe auf Ihren Express-Server fortfahren, indem Sie dieses JSON-Web-Token verwenden.
Ein dritter Ansatz besteht darin, dies in
Ihre URL selbst als Abfrageparameter aufzunehmen.
Der dritte Ansatz ist Token zu sagen? access_token= und
fügen Sie dann das JSON-Web-Token in diesen Abfrageparameter ein.
Verwenden Sie hier nicht die Anführungszeichen, sondern nur das JSON-Web-Token selbst.
Und dann senden Sie die Anfrage an Ihren Server.
Und dann gibt Ihr Server das entsprechende JSON-Web-Token zurück.
Sie sehen also drei verschiedene Möglichkeiten, wie Sie in Ihrem Facebook-Zugriffstoken auf
Ihrem Server analysieren und dann das JSON-Web-Token von Ihrem Server abrufen können.
Und danach verläuft der Rest dieser Schritte genau wie zuvor.
Nun, um Sie davon zu überzeugen, dass tatsächlich ein neues Konto mit dem
Facebook-Profil für diesen bestimmten Benutzer erstellt wurde, gehen wir zum Terminal.
Im Terminal, in einem neuen Terminal-Fenster, werde ich hier die Mongo-Welligkeit starten.
Also in der Mongo-Welligkeit, lassen Sie mich sagen, verwenden Sie ConFusion.
Und dann werde ich sagen, db.users.find () .pretty (),
und dann drucken Sie alle Benutzer aus, die in meinem System registriert sind.
Sie stellen fest, dass die drei Benutzer, die wir in den vorherigen Übungen konfiguriert hatten,
alle da sind.
Beachten Sie zusätzlich einen vierten Benutzer, der gerade in hinzugefügt wurde.
Und beachten Sie, dass wir für diesen bestimmten Benutzer den Hash noch nicht in der Quelle haben,
sondern stattdessen die FacebookId dieses Benutzers eingerichtet ist, und
der Benutzername ist so eingerichtet, dass dieser Wert ist, und der Vorname wird dort eingerichtet.
Und auch der Nachname hätte hier eingerichtet werden sollen, aber
ich denke, es gibt einen kleinen Fehler in meinem Code.
Also werde ich gehen und den Nachnamen Teil davon dort überprüfen.
Geht zu authenticate.js.
Mal sehen, ob ich hier Fehler gemacht habe.
Da gehen wir.
Ich habe den F-A-M-I-L-Y-Namen eingegeben.
Also siehst du, selbst ich bin nicht darum, Fehler zu machen.
Dies sollte also FamilyName hier sein,
user.lastname profile.name.familyName hier.
Lassen Sie mich also die Änderungen speichern, und jetzt sollte der Code korrekt funktionieren. Wenn Sie
wieder zum Terminal zurückkehren,
sehen Sie nun, dass hier ein neuer Benutzer mit dem Facebook-Profil erstellt wurde.
Jetzt
ist jedes spätere Mal, wenn ich versucht habe, mich mit Facebook zu authentifizieren, der gleiche Prozess.
Ich habe das Zugriffstoken von Facebook erhalten und
dann das Zugriffstoken auf meinen Express-Server parsen.
Mein Express-Server wird dann zu Facebook gehen, das Profil abrufen und
dann prüfen, ob der Benutzer bereits existiert.
Und bei der anschließenden Anmeldung, die ich mit Facebook mache,
würde ich feststellen, dass dieser bestimmte Benutzer bereits im System vorhanden ist.
Also, es wird einfach vorwärts gehen und der Benutzer wird authentifiziert und
dann wird der zusätzliche Server ein JSON-Web-Token an seinen
Client ausgeben und wir können von diesem Punkt an wie zuvor vorwärts fortfahren.
So sehen Sie, das Einrichten der OAuth 2-basierten Authentifizierung mit einem OAuth
2-Dienstanbieter wie Facebook ist nicht so schwierig, vorausgesetzt, wir bekommen
die entsprechende Pass-Facebook-Authentifizierungsstrategie basiertes Modul.
Wie Pass-Facebook-Token, das bereits kümmert sich um einen Großteil
der Arbeit in unserem Namen und dann ermöglicht es uns, unseren Express-Server einzurichten,
um Drittanbieter-Authentifizierung basierend auf OAuth 2 von Facebook zu behandeln.
Damit schließen wir diese Übung ab.
In dieser Übung haben wir gelernt, wie die gesamte OAuth 2-Authentifizierung
mit Facebook als OAuth 2-Authentifizierung durchgeführt wird.
Dies ist ein guter Zeitpunkt für Sie, die Änderungen zu speichern, die Sie an
Ihrem Git-Repository mit dem Nachrichten-Pass Facebook vorgenommen haben.
( MUSIK)