Social Login für Ihr Spa: Authentifizieren Sie Ihre Benutzer über Google und Facebook

Die Anzahl der Webanwendungen mit einer einzelnen Seitenarchitektur erhöht sich. Diese Anwendungen erfordern häufig ein gewisses Maß an benutzerbeschränkter Interaktion, z. B. das Speichern von Benutzerprofildetails. Die Implementierung dieser Funktionalität in herkömmlichen HTML-basierten Anwendungen ist relativ einfach, ist jedoch in einseitigen Anwendungen, die für jede API-Anforderung eine Authentifizierung erfordern, noch schwieriger.

Dieser Artikel zeigt eine Technik, die die Passport.js-Bibliothek verwendet, um soziale Anmeldungen für mehrere Anbieter zu implementieren und somit tokenbasierte Authentifizierung nachfolgender API-Aufrufe zu implementieren.

Alle Quellcodes für diesen Artikel können von unserem Github -Repository heruntergeladen werden.

Schlüsselpunkte

• Verwenden Sie die Passport.js-Bibliothek, um die soziale Anmeldung für Google und Facebook zu implementieren und die Benutzerauthentifizierung für einseitige Anwendungen zu verbessern.
• Wählen Sie JSON Web Token (JWT) für eine sichere API-Authentifizierung von Token-basierten API, die Sitzungs- und Cookie-basierte Beschränkungen vermeiden.
• Verwenden Sie Funktionen für soziale Anmeldungen: vereinfachte Benutzeroberfläche, keine Benutzeranmeldeinformationen und das Cross-Site-Kennwort zurückgesetzt.
• Konfigurieren Sie den Pass mit bestimmten Modulen wie Passport-Google-OAUTH, Passport-Facebook und Passport-JWT, um die Authentifizierung und Token-Generation zu verwalten.
• Verwenden Sie das Passport-JWT-Modul, um die tokenbasierte Authentifizierung zu implementieren, und schützen Sie die API-Endpunkte, indem Sie das JWT im Autorisierungsheader überprüfen.
• Vereinfachen Sie die Benutzererfahrung mit dem Umleitungsmodus und den Client -Skripten.

Warum so ein soziales Login in Ihrem Spa verwenden?

Viele Probleme müssen bei der Implementierung des Anmeldemechanismus in Ihrer Webanwendung berücksichtigt werden.

• Wie sollte Ihre Benutzeroberfläche selbst mit der Authentifizierung umgehen?
• Wie sollten Sie Benutzerinformationen speichern?
• Wie sollten Sie Benutzeranmeldeinformationen am besten schützen?

Diese und weitere Fragen müssen berücksichtigt werden, bevor ein Login -Portal geschrieben wird. Aber es gibt einen besseren Weg.

Viele Websites, hauptsächlich soziale Netzwerke, ermöglichen es Ihnen, ihre Plattform zu nutzen, um Ihre eigenen Apps zu überprüfen. Dies wird durch viele verschiedene APIs implementiert - OAuth 1.0, OAuth 2.0, OpenID, OpenID Connect usw.

Es gibt viele Vorteile, Ihren Anmeldungsprozess mithilfe dieser sozialen Anmeldetechnologien zu implementieren.

• Sie sind nicht mehr dafür verantwortlich, die Benutzeroberfläche zu präsentieren, die Benutzer zur Authentifizierung verwenden.
• Sie sind nicht mehr dafür verantwortlich, sensible Benutzerdetails zu speichern und zu schützen.
• Benutzer können mit einer einzigen Anmeldung auf mehrere Websites zugreifen.
• Wenn Benutzer der Meinung sind, dass ihr Passwort durchgesickert ist, können sie ihr Passwort einmal zurücksetzen und von vielen Websites profitieren.
• In der Regel enthält Dienste, die Authentifizierungsfunktionen bieten, zusätzliche Details. Dies kann beispielsweise verwendet werden, um Benutzer automatisch zu registrieren, die Ihre Website noch nie verwendet haben, oder um Ihnen zu ermöglichen, Updates für ihre Profile in ihrem Namen zu veröffentlichen.

Warum für Ihre API eine tokenbasierte Authentifizierung verwenden?

Wenn ein Kunde auf Ihre API zugreifen muss, benötigen Sie eine Möglichkeit, zu bestimmen, wer er ist und ob er Zugriff zulässt oder nicht. Es gibt viele Möglichkeiten, dies zu erreichen, aber die Hauptoptionen sind:

• Sitzungsbasierte Authentifizierung
• Cookie-basierte Authentifizierung
• Token-basierte Authentifizierung

Sitzungsbasierte Authentifizierung erfordert, dass Ihr API-Dienst die Sitzung mit dem Kunden in Verbindung bringt. Dies ist normalerweise sehr einfach eingerichtet, aber wenn Sie Ihre API auf mehreren Servern bereitstellen, haben Sie möglicherweise Probleme. Sie sind auch durch die vom Server für die Sitzungsverwaltung und -ablauf verwendeten Mechanismen eingeschränkt, die möglicherweise nicht unter Ihrer Kontrolle stehen.

Der Cookie-basierte Ansatz ist, dass Sie einfach einige Kennungen im Cookie speichern, mit denen die API-Anforderung automatisch identifiziert wird. Dies bedeutet, dass Sie einen Mechanismus benötigen, um Cookies zuerst festzulegen, und Sie können diese in nachfolgenden Anforderungen auslaufen, da die Cookies automatisch in allen (entsprechenden) Anforderungen an denselben Host enthalten sind.

Der tokenbasierte Ansatz ist eine Variante der Cookie-basierten Authentifizierung, bietet Ihnen jedoch mehr Kontrolle. Im Wesentlichen generieren Sie das Token auf die gleiche Weise wie ein Authentifizierungssystem auf Cookie -basiertem Authentifizierungssystem, nehmen sich jedoch in die Anfrage ein - normalerweise in den Header "Autorisierung" oder direkt in der URL. Dies bedeutet, dass Sie die volle Kontrolle über den Speicher Token haben, der es und mehr enthalten.

Hinweis: Auch wenn der HTTP -Header als "Autorisierung" bezeichnet wird, verwenden wir sie tatsächlich zur Authentifizierung. Dies liegt daran, dass wir es verwenden, um festzustellen, wer der Kunde ist und nicht das, was der Kunde tun darf.

Die Strategie zur Generierung von Token ist ebenfalls wichtig. Diese Token können Referenztouren sein, was bedeutet, dass sie nichts anderes als vom Server verwendete Kennungen sind, um die tatsächlichen Details zu finden. Oder ein vollständiges Token, was bedeutet, dass das Token bereits alle erforderlichen Informationen enthält.

Überweisende Token hat einen erheblichen Sicherheitsvorteil, da Benutzeranmeldeinformationen niemals an den Client weitergegeben werden. Da Sie das Token jedoch in jeder Anfrage in tatsächliche Anmeldeinformationen analysieren müssen, gibt es eine Leistungsstrafe.

Das komplette Token ist das Gegenteil. Sie setzen Benutzeranmeldeinformationen jedem aus, der das Token versteht, aber da das Token abgeschlossen ist, gibt es bei der Suche nach der Suche keinen Leistungsverlust.

Normalerweise werden vollständige Token mit dem JSON -Web -Token -Standard implementiert, da dieser Standard eine verbesserte Sicherheit von Token ermöglicht. Insbesondere ermöglicht JWT Verschlüsselungstoken, was bedeutet, dass Sie garantieren können, dass das Token nicht manipuliert wurde. Es wird auch festgelegt, dass sie verschlüsselt werden können, was bedeutet, dass das Token ohne Verschlüsselungsschlüssel nicht einmal dekodiert werden kann.

Wenn Sie mit JWT im Knoten überprüfen möchten, lesen Sie unser Tutorial: Verwenden von JSON -Web -Token mit node.js.

Ein weiterer Nachteil der Verwendung eines vollständigen Tokens ist die Größe. Beispielsweise kann ein Referenztoken mit einem UUID implementiert werden, der 36 Zeichen lang ist. Stattdessen kann JWT leicht so lang sein wie Hunderte von Charakteren.

In diesem Artikel werden wir JWT -Token verwenden, um zu demonstrieren, wie sie funktionieren. Wenn Sie diese Funktion jedoch selbst implementieren, müssen Sie entscheiden, ob Sie einen Referenztoken oder ein volles Token verwenden möchten und welcher Mechanismus dafür verwendet wird.

Was ist der Pass?

Pass ist eine Reihe von Modulen in Node.js zur Authentifizierung in Ihrer Webanwendung. Es kann viele knotenbasierte Webserver sehr einfach einstecken und eine modulare Struktur verwenden, um den Anmeldemechanismus zu implementieren, den Sie benötigen, ohne übermäßiges Blähungen.

Pass ist eine leistungsstarke Modulsuite, die eine große Anzahl von Authentifizierungsanforderungen abdeckt. Mit diesen Modulen können wir ein steckbares Setup erstellen, das unterschiedliche Authentifizierungsanforderungen für verschiedene Endpunkte ermöglicht. Das verwendete Authentifizierungssystem kann so einfach sein wie einfach nach speziellen Werten in der URL zu überprüfen oder so komplex zu sein, wie es sich auf einen Drittanbieter stützt, um die gesamte Arbeit zu erledigen.

In diesem Artikel werden wir die Module Passport-Google-Oauth, Passport-Facebook und Passport-JWT verwenden, um die Authentifizierung für soziale Login und JWT-Token-basierte Authentifizierung für API-Endpunkte zu ermöglichen.

Passport-JWT-Modul wird verwendet, um zu verlangen, dass einige Endpunkte-die API-Endpunkte, die wir tatsächlich Authentifizierung benötigen, um zugreifen zu können-ein gültiges JWT in der Anfrage vorhanden ist. Die Passport-Google-OAUTH- und Passport-Facebook-Module werden verwendet, um Endpunkte bereitzustellen, die sich gegen Google bzw. Facebook authentifizieren, und dann JWTs generieren, die verwendet werden können, um auf andere Endpunkte in der App zugreifen zu können.

Aktivieren Sie die soziale Anmeldung für Ihre einzelne Seitenanwendung

Von hier aus gehen wir durch, um eine einfache einseitige App zu erhalten und soziale Anmeldung dafür zu implementieren. Diese Anwendung ist in Express geschrieben, eine einfache API bietet einen sicheren Endpunkt und einen unsicheren Endpunkt. Wenn Sie fortfahren möchten, können Sie den Quellcode dieser App von https://github.com/sitepoint-editors/social-loginsspa überprüfen. Diese Anwendung kann erstellt werden, indem NPM -Installation im heruntergeladenen Quellcode ausgeführt wird - alle Abhängigkeiten herunterladen - und dann durch Ausführen von Knoten SRC/INDEX.JS ausgeführt werden.

Um die App erfolgreich zu verwenden, müssen Sie soziale Anmeldeinformationen bei Google und Facebook registrieren und die Anmeldeinformationen für die App zur Verfügung stellen. Die vollständigen Anweisungen finden Sie in der Readme -Datei der Demo -Anwendung. Diese Anmeldeinformationen werden als Umgebungsvariablen zugegriffen. Daher kann die Anwendung wie folgt ausgeführt werden:

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

Das Endergebnis dieses Prozesses besteht darin, unseren sicheren Endpunkt für die Unterstützung der Token -Authentifizierung (mit JSON -Web -Token) und dann den Social Login -Support (mit Google und Facebook) hinzuzufügen, um den Rest der Nutzung der Token -Bereitstellung zu erhalten. Dies bedeutet, dass Sie sich authentifizieren müssen, wenn Sie einen sozialen Anbieter verwenden und dann das generierte JWT verwenden müssen, um alle zukünftigen API -Anrufe in der App zu tätigen.

jwt ist eine besonders gute Wahl für unsere Szenarien, da sie völlig in sich geschlossen sind, während sie immer noch sicher sind. JWT besteht aus JSON -Payload und verschlüsselter Unterschrift. Die Nutzlast enthält die Details des authentifizierten Benutzers, des Authentifizierungssystems und der Gültigkeitsdauer des Tokens. Die Signatur stellt dann sicher, dass ein böswilliger Dritter sie nicht schmieden kann - nur die Person, die den Signaturschlüssel hat, kann das Token generieren.

Beim Lesen dieses Artikels sehen Sie häufig Verweise auf das im Rahmen Ihrer Anwendung enthaltene Modul config.js. Dieses Modul wird verwendet, um die Anwendung zu konfigurieren und extern mit dem Knotenkonvict-Modul konfiguriert. Die in diesem Artikel verwendete Konfiguration lautet wie folgt:

• http.port - Der Port, an dem die Anwendung ausgeführt wird. Der Standardwert ist 3000 und wird mit der "Port" -Envölkerungsvariablen überschrieben.
• Authentifizierung.google.clientid - Google Client -ID für die Google -Authentifizierung. Dies wird der Anwendung über die Umgebungsvariable "google_clientid" zur Verfügung gestellt.
• Authentifizierung.google.clientecret - Google -Client -Schlüssel für die Google -Authentifizierung. Dies wird der Anwendung über die Umgebungsvariable "google_clientecret" zur Verfügung gestellt.
• Authentifizierung.Facebook.Clientid - Facebook -Client -ID für Facebook -Authentifizierung. Dies wird der Anwendung über die Umgebungsvariable "facebook_clientid" zur Verfügung gestellt.
• Authentifizierung.facebook.clientecret - Facebook -Client -Schlüssel für die Facebook -Authentifizierung. Dies wird der Anwendung über die Umgebungsvariable "facebook_clientecret" zur Verfügung gestellt.
• Authentifizierung.token.secret - Der Schlüssel zum JWT, der unser Authentifizierungs -Token unterzeichnet. Der Standardwert ist "MysuPersecretkey".
• Authentifizierung.token.ISSUER - Der in JWT gespeicherte Emittent. Dies zeigt an, welches Service das Token ausgibt, in dem Fall, in dem ein Authentifizierungsdienst viele Anwendungen bedient.
• Authentifizierung.token.Audience - Publikum in JWT gespeichert. Dies stellt den Zieldienst des Tokens dar, in dem der Fall, in dem ein Authentifizierungsdienst viele Anwendungen bedient.

integrierter Pass

Eine kleine Menge an Einstellungen ist erforderlich, bevor der Reisepass in Ihrer App verwendet wird. Dies ist nichts weiter als sicherzustellen, dass das Modul installiert ist und die Middleware in Ihrer Express -Anwendung initialisiert wird.

Die in diesem Stadium erforderlichen Module sind die Passmodule, und um die Middleware einzurichten, müssen wir sie nur zu unserer Express -App hinzufügen.

<code class="language-javascript">// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());</code>

Wenn Sie die Anweisungen auf der Passport -Website befolgen, dürfen Sie den Sitzungsunterstützung einrichten, indem Sie mit passport.session () anrufen. Wir verwenden keine Sitzungsunterstützung in unserer App, daher ist dies unnötig. Dies liegt daran, dass wir eine staatenlose API implementieren, sodass wir für jede Anfrage Authentifizierung bereitstellen, anstatt sie in die Sitzung zu behalten.

Implementieren Sie die JWT -Token -Authentifizierung für sichere Endpunkte

Einrichten der JWT -Token -Authentifizierung mit dem Pass ist relativ einfach. Wir werden das Passport-JWT-Modul verwenden, das das ganze schwere Heben für uns erledigt. Dieses Modul sucht nach dem "Autorisierungs" -Header mit einem Wert, der mit "JWT" ​​beginnt, und behandelt den Rest des Headers als JWT -Token zur Authentifizierung. Anschließend dekodiert es den JWT und liefert die dort gespeicherten Werte für Ihren eigenen Code für Operationen - zum Beispiel die Ausführung von Benutzer -Suchausschlägen. Wenn der JWT ungültig ist, z. B. ungültige Signatur, ist das Token abgelaufen ... Die Anfrage wird ohne zusätzliche Beteiligung Ihres eigenen Code nicht authentifiziert.

Dann ist die Methode zur Konfiguration der JWT -Token -Authentifizierung wie folgt:

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

oben haben wir einige interne Module verwendet:

• config.js - Enthält Konfigurationseigenschaften für unsere gesamte Anwendung. Es kann angenommen werden, dass diese Eigenschaften konfiguriert wurden und dass die Werte jederzeit verwendet werden können.
• users.js - Dies ist der Benutzerspeicher der Anwendung. Auf diese Weise können Benutzer geladen und erstellt werden - hier laden wir Benutzer nur nach ihrer internen ID.

Hier konfigurieren wir den JWT -Decoder mit bekannten Schlüssel, Verlegern und Publikum und informieren die Richtlinien, dass er den JWT aus dem Autorisierungsheader erhalten soll. Wenn einer des Verlags oder des Publikums nicht zu dem übereinstimmt, was in der JWT gespeichert ist, wird die Authentifizierung fehlschlagen. Dies gibt uns eine weitere Schicht des Antikounterfitching-Schutzes, obwohl es sich um einen sehr einfachen Schutz handelt.

Token-Dekodierung wird vollständig vom Passport-JWT-Modul verarbeitet. Da JWT ein Standard ist, funktioniert jedes Modul, das diesem Standard folgt, perfekt.

Nach erfolgreicher Dekodierung des Token wird es als Nutzlast an unseren Rückruf weitergegeben. Hier versuchen wir nur, Benutzer zu finden, die vom "Thema" im Token identifiziert wurden. Tatsächlich können Sie zusätzliche Schecks durchführen, z. B. sicherzustellen, dass das Token nicht widerrufen wird.

Wenn der Benutzer gefunden wird, stellen wir ihn für den Pass und Pass an den Rest der Anfrageverarbeitung als Req.User zur Verfügung. Wenn der Benutzer nicht gefunden wird, stellen wir keinen Benutzer für den Pass und der Reisepass, dann wird die Authentifizierung fehlgeschlagen.

Dies kann jetzt eine Verbindung zum Anforderungshandler herstellen, damit die Anforderung eine Authentifizierung erfordert, um erfolgreich zu sein:

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

Die obige Zeile 3 ist die Magie, um Passport die Anfrage zu bearbeiten. Dies führt dazu, dass der Passport die "JWT" ​​-Richtlinie ausführt, die wir gerade auf der Anfrage konfiguriert haben, in der wir übergeben wurden, und es sofort fortsetzen oder sofort fehlschlagen.

Wir können sehen, wie es funktioniert, indem wir die Anwendung ausführen - indem wir den Knoten src/index.js ausführen - und versuchen, auf diese Ressource zuzugreifen:

<code class="language-javascript">// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());</code>

Wir haben keine Autorisierungsheader vorgelegt, sondern erlaubt uns nicht, weiterzumachen. Wenn Sie jedoch einen gültigen Autorisierungs -Header bereitstellen, erhalten Sie eine erfolgreiche Antwort:

<code class="language-javascript">// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 从 "Authorization" 标头获取 JWT。
  // 默认情况下，这会查找 "JWT " 前缀
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于签署 JWT 的密钥
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存储的发行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存储的受众
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));</code>

Um diesen Test durchzuführen, habe ich ein JWT manuell generiert, indem ich https://www.jsonwebtoken.io besuchte und das Formular dort ausfüllte. "Nutzlast" ist das, was ich benutze:

<code class="language-javascript">// src/index.js
app.get('/api/secure',
  // 此请求必须使用 JWT 进行身份验证，否则我们将失败
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);</code>

"Signaturschlüssel" ist "mysupersecretkey", entnommen aus der Konfiguration.

Support Token Generation

Jetzt können wir nur mit gültigen Token auf Ressourcen zugreifen. Wir brauchen eine Möglichkeit, das Token tatsächlich zu generieren. Dies geschieht mit dem JSONWEBTOKE -Modul, das ein JWT mit den richtigen Details erstellt und mit demselben Schlüssel wie oben signiert wird.

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

Beachten Sie, dass wir bei der Generierung von JWTs genau die gleichen Zielgruppen-, Emittenten- und Schlüsselkonfigurationseinstellungen verwenden. Wir geben auch an, dass die Gültigkeitsdauer von JWT eine Stunde beträgt. Dies kann jeder Zeitraum sein, den Sie für angemessen für Ihre App für angemessen halten und sogar aus der Konfiguration extrahiert werden können, damit sie leicht geändert werden kann.

In diesem Fall wird keine JWT -ID angegeben, dies kann jedoch verwendet werden, um eine vollständig eindeutige ID für das Token zu generieren - beispielsweise unter Verwendung eines UUID. Auf diese Weise können Sie das Token widerrufen und eine Sammlung von widerruflichen IDs im Datenspeicher speichern und überprüfen, ob sich die JWT -ID bei der Bearbeitung der JWT in der Passport -Richtlinie nicht in der Liste befindet.

Social Login Provider

Jetzt, da wir die Möglichkeit haben, Token zu generieren, müssen wir den Benutzer dazu bringen, sich tatsächlich anzumelden. Hier kommen Anbieter von Social Login ins Spiel. Wir werden eine Funktion hinzufügen, mit der Benutzer soziale Anmeldebereicher weiterleiten und ein JWT -Token über den Erfolg generieren und der JavaScript -Engine des Browsers für zukünftige Anfragen zur Verfügung stellen können. Wir haben bereits fast alle diese Komponenten, wir müssen sie nur zusammenstellen.

Der Anbieter sozialer Login im Pass ist in zwei Teile unterteilt. Zunächst müssen Sie den Passport für Ihren Social Login -Anbieter mit dem entsprechenden Plugin konfigurieren. Zweitens muss die ausdrückliche Route, auf die der Benutzer angewiesen ist, zur Einleitung der Authentifizierung erforderlich, und die Route, auf die der Benutzer nach dem Erfolg der Authentifizierung umgeleitet wird.

Wir werden diese URLs in einem neuen Subbrowserfenster öffnen, das wir schließen können, wenn wir fertig sind, und die JavaScript -Methode in dem Fenster aufrufen können, in dem sie geöffnet wird. Dies bedeutet, dass der Prozess für den Benutzer relativ transparent ist - höchstens ein neues Fenster, in dem sie aufgefordert werden, Anmeldeinformationen anzugeben, aber am besten können sie nur die Tatsache sehen, dass sie jetzt angemeldet sind.

Der Aspekt dieses Browsers muss aus zwei Teilen bestehen. Ansicht des Popup-Fensters und JavaScript, das diese Ansicht im Hauptfenster verarbeitet. Dies kann leicht in jedes Framework integriert werden, aber in diesem Beispiel werden wir den Einfachheit halber Vanille -JavaScript verwenden.

Die Hauptseite JavaScript erfordert nur so etwas:

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

Dies registriert ein globales Funktionsobjekt (benannt authenticateCallback) im Fenster, das den Zugriffs -Token speichert und dann unsere Route öffnet, um die Authentifizierung zu starten.

Diese Funktion kann dann auf eine Weise ausgelöst werden, die Sie zur Authentifizierung einleiten möchten. Dies ist normalerweise ein Anmeldeverbindungslink im Titelbereich, aber die Details sind vollständig von Ihrer App abhängig.

Der zweite Teil ist die Ansicht, die nach einer erfolgreichen Authentifizierung präsentiert wird. In diesem Fall verwenden wir den Schnurrbart für den Einfachheit halber. Dies verwendet jedoch jede für Sie geeignete Betrachtungstechnik.

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

Hier haben wir nur einen einfachen JavaScript -Code, der die AuthenticateCallback -Methode oben auf dem offenen Programm (d. H. Das Hauptanwendungsfenster) aufruft, und dann schließen wir uns.

Zu diesem Zeitpunkt wird das JWT -Token im Hauptantragsfenster für jeden gewünschten Zweck verfügbar sein.

implementieren Sie die Google -Authentifizierung

Verwenden des Passport-Google-OAUTH-Moduls wird sich gegen Google authentifizieren. Dies erfordert drei Informationen:

• Client -ID
• Client -Schlüssel
• URL
umleiten

Client -ID und Schlüssel werden erhalten, indem Ihre App in der Google Developer -Konsole registriert wird. Eine Umleitungs -URL ist die URL, die der Benutzer nach Anmelden bei seinen Google -Anmeldeinformationen an Ihre App zurückgeschickt wird. Dies hängt davon ab, wie und wo die App bereitgestellt wird, aber jetzt werden wir sie harten.

unsere Google -Authentifizierungspasskonfiguration sieht dann wie folgt aus:

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

Wenn Benutzer nach einer erfolgreichen Authentifizierung zu uns zurückleiten, erhalten wir ihre ID und einige Profilinformationen im Google -System. Wir versuchen zunächst zu sehen, ob dieser Benutzer schon einmal angemeldet wurde. Wenn ja, dann erhalten wir ihre Benutzerdatensätze und wir sind fertig. Wenn nicht, werden wir ein neues Konto für sie registrieren und dieses neue Konto verwenden. Dies bietet uns einen transparenten Mechanismus, bei dem die Benutzerregistrierung beim ersten Anmeldung durchgeführt wird. Wir können dies auf unterschiedliche Weise tun, wenn wir brauchen, aber es ist jetzt nicht notwendig.

Das nächste soll den Routing -Handler einrichten, um dieses Login zu verwalten. Diese werden so aussehen:

<code class="language-javascript">// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());</code>

Bitte beachten Sie die Routen von/api/Authentifizierung/Google/Start und/api/Authentifizierung/GOGLE/Redirect. Wie oben erwähnt, ist die /Start -Variante die von uns geöffnete URL, und die /redirect -Variante ist die URL, die Google den Benutzer über den Erfolg leitet. Dadurch wird dann die oben angegebene authentifizierte Ansicht zurückgeführt, die den generierten JWT für die Verwendung bereitstellt.

Facebook -Authentifizierung implementieren

Jetzt, da wir den ersten sozialen Anmeldemittel haben, erweitern wir und fügen wir eine zweite hinzu. Diesmal wird es Facebook unter Verwendung des Passport-Facebook-Moduls sein.

Dieses Modul funktioniert fast genauso wie Google -Module und erfordert dieselbe Konfiguration und die gleichen Einstellungen. Der einzige wirkliche Unterschied besteht darin, dass es sich um ein anderes Modul und die URL -Struktur handelt, die auf sie zugreift.

Um die Facebook -Authentifizierung zu konfigurieren, benötigen Sie auch die Client -ID, den Client -Schlüssel und die Umleitungs -URL. Die Client -ID und der Client -Schlüssel (App -ID und App -Schlüssel auf Facebook) können durch das Erstellen von Facebook -Apps in der Facebook -Entwicklerkonsole erhalten werden. Sie müssen sicherstellen, dass das Facebook -Login -Produkt Ihrer App hinzugefügt wird, damit es funktioniert.

unsere Facebook -Authentifizierungspasskonfiguration ist:

<code class="language-javascript">// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 从 "Authorization" 标头获取 JWT。
  // 默认情况下，这会查找 "JWT " 前缀
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于签署 JWT 的密钥
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存储的发行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存储的受众
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));</code>

Dies entspricht fast der Konfiguration von Google, außer dass "Facebook" anstelle von "Google" verwendet wird. Das URL -Routing ist auch ähnlich:

<code class="language-javascript">// src/index.js
app.get('/api/secure',
  // 此请求必须使用 JWT 进行身份验证，否则我们将失败
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);</code>

Hier müssen wir nicht den Bereich angeben, den wir verwenden möchten, da der Standardsatz gut genug ist. Andernfalls ist die Konfiguration zwischen Google und Facebook fast gleich.

Zusammenfassung

Verwenden Sie Anbieter von Social Login, um die Benutzeranmeldung und die Registrierung Ihrer App schnell und einfach hinzuzufügen. In der Tat verwendet dies die Browser -Umleitung, um Benutzer an Social Login -Anbieter zu senden, und sendet sie dann an Ihre App zurück, wodurch es möglich ist, sie in einseitige Apps zu integrieren, auch wenn sie relativ einfach in herkömmliche Apps integriert sind.

Dieser Artikel zeigt eine Möglichkeit, diese Social -Login -Anbieter in eine einzelne Seitenanwendung zu integrieren, die verspricht, sowohl einfach zu bedienen als auch einfach zu künftigen Anbietern zu skunden, die Sie möglicherweise verwenden möchten. Passport verfügt über viele Module, die mit verschiedenen Anbietern zusammenarbeiten können, und es geht nur darum, das richtige Modul zu finden und es so zu konfigurieren, wie wir es oben mit Google und Facebook getan haben.

Dieser Artikel wurde von James Kolce von Experten überprüft. Vielen Dank an alle SitePoint -Peer -Rezensenten, die SitePoint -Inhalte in den besten

erhalten haben

FAQs über die Integration der sozialen Anmeldung (FAQs)

Was sind die Vorteile der Integration der sozialen Anmeldung in meine Webanwendung?

Die Integration der sozialen Anmeldung in Ihre Webanwendung kann mehrere Vorteile bringen. Erstens vereinfacht dies den Registrierungsprozess für Benutzer, da sie sich bei einem vorhandenen Social -Media -Konto registrieren können, ohne sich an einen anderen Benutzernamen und ein anderes Passwort zu erinnern. Zweitens kann es die Conversion -Raten verbessern, da ein vereinfachter Registrierungsprozess mehr Benutzer zur Anmeldung ermutigen kann. Schließlich erhalten Sie Zugriff auf Benutzerdaten in ihren Social -Media -Profilen, die verwendet werden können, um ihre Erfahrungen auf Ihrer Website zu personalisieren.

Wie kann ich die Sicherheit von Benutzerdaten bei der Verwendung sozialer Anmeldung sicherstellen?

Es ist wichtig, die Sicherheit von Benutzerdaten bei der Integration von sozialen Anmeldungen zu gewährleisten. Sie können dies tun, indem Sie sich mit sicheren Protokollen wie OAuth 2.0 authentifizieren, wodurch sichergestellt wird, dass das Benutzerkennwort nicht mit Ihrer App gemeinsam genutzt wird. Darüber hinaus sollten Sie nur die von der Anwendung erforderliche Mindestmenge an Benutzerdaten anfordern und sicherstellen, dass diese Daten sicher gespeichert werden.

Kann ich mehrere soziale Anmeldungen in meine Webanwendung integrieren?

Ja, Sie können mehrere soziale Anmeldungen in Ihre Webanwendung integrieren. Dies kann den Benutzern mehr Auswahlmöglichkeiten bieten und die Wahrscheinlichkeit ihrer Registrierung erhöhen. Es ist jedoch wichtig sicherzustellen, dass die Benutzererfahrung unabhängig davon, welches soziale Login der Benutzer verwendet, nahtlos bleibt.

Wie kann man mit Benutzern mit mehreren Social -Media -Konten umgehen?

Benutzer mit mehreren Social -Media -Konten verarbeiten können eine Herausforderung sein. Eine Lösung besteht darin, dass Benutzer mehrere Social -Media -Konten mit einem einzigen Konto in Ihrer App verknüpfen können. Auf diese Weise haben sie die Möglichkeit, sich mit einem verknüpften Konto anzumelden.

Was passiert, wenn ein Benutzer sein Social -Media -Konto deaktiviert?

Wenn Benutzer ihr Social -Media -Konto deaktivieren, können sie das Konto nicht mehr verwenden, um sich bei Ihrer App anzumelden. Um dies zu verarbeiten, können Sie den Benutzern die Möglichkeit geben, ihrem Konto eine E -Mail -Adresse oder Telefonnummer hinzuzufügen. Wenn sie ihr Social -Media -Konto deaktivieren, können Sie sich mit diesen Informationen anmelden.

Wie kann man das Erscheinungsbild sozialer Login -Schaltflächen anpassen?

CSS kann verwendet werden, um das Erscheinungsbild der sozialen Login -Taste anzupassen. Befolgen Sie jedoch unbedingt die von Social Media -Plattformen bereitgestellten Markenrichtlinien. Zum Beispiel sollte das "F" -Logo von Facebook immer in seiner ursprünglichen Form verwendet werden und in keiner Weise geändert werden.

Kann ich soziales Login für mobile Apps verwenden?

Ja, soziale Anmeldung kann für Web- und Mobilanwendungen verwendet werden. Der Prozess der Integration der sozialen Anmeldung in eine mobile App ähnelt dem einer Web -App. Möglicherweise müssen Sie möglicherweise eine bestimmte SDK verwenden, die von der Social -Media -Plattform bereitgestellt wird.

Wie testet ich die soziale Loginfunktion?

Sie können die Funktion für soziale Anmeldungen testen, indem Sie Testkonten auf Social -Media -Plattformen erstellen und diese Konten verwenden, um sich in Ihre App anzumelden. Dies kann Ihnen helfen, Probleme oder Fehler zu identifizieren, bevor die App beginnt.

Was soll ich tun, wenn der Benutzer vergisst, sich mit welchem ​​Social -Media -Konto zu registrieren?

Wenn Benutzer vergessen, mit welchem ​​Social -Media -Konto Sie sich anmelden sollen, können Sie eine Wiederherstellungsoption bereitstellen, mit der sie ihre E -Mail -Adresse oder Telefonnummer eingeben können, um eine Liste von Social -Media -Konten zu erhalten, die mit ihrem Konto verknüpft sind.

Kann ich das soziale Login ohne Codierung integrieren?

Während einige Tools und Plugins zur Integration der sozialen Anmeldung ohne Codierung verwendet werden können, kann es vorteilhaft sein, einige Codierungskenntnisse zu kennen. Dies bietet Ihnen mehr Flexibilität und Kontrolle über den Integrationsprozess und kann Ihnen auch dabei helfen, Probleme zu lösen, die möglicherweise auftreten.

Das obige ist der detaillierte Inhalt vonSocial Login für Ihr Spa: Authentifizieren Sie Ihre Benutzer über Google und Facebook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!