Facebook OAuth 2.0 Zugriff für Websites

Der von Facebook verwendete OAuth 2.0-Autorisierungsprozess ist der "Authorization Code Grant". Lassen Sie uns vorstellen, wie man ihn implementiert und wie man ihn in Apidog debuggt.

Was ist OAuth 2.0?

OAuth 2.0 ist ein weit verbreitetes Autorisierungsprotokoll, das Drittanbietern den Zugriff auf geschützte Ressourcen ermöglicht, ohne dass Benutzeranmeldeinformationen erforderlich sind. Es umfasst vier Schlüsselrollen:

1. Resource Owner: Typischerweise der Benutzer, dem die geschützten Ressourcen gehören.
2. Client: Die Drittanbieteranwendung, die Zugriff auf die Daten des Resource Owners anstrebt.
3. Authorization Server: Validiert den Resource Owner und erteilt dem Client die Autorisierung.
4. Resource Server: Speichert und verwaltet die geschützten Ressourcen und stellt APIs für den Zugriff bereit.

Häufige Autorisierungsabläufe

Das OAuth 2.0-Protokoll implementiert die Autorisierung durch verschiedene Autorisierungsabläufe. Häufige Autorisierungsabläufe umfassen:

• Authorization Code Grant: Der Client leitet den Benutzer zum Authorization Server weiter. Nachdem sich der Benutzer angemeldet und die Berechtigung erteilt hat, gibt der Authorization Server einen Autorisierungscode an den Client zurück. Der Client tauscht dann den Autorisierungscode zusammen mit seinen Anmeldeinformationen gegen ein Zugriffstoken aus.
• Authorization Code Grant with PKCE (Proof Key for Code Exchange): Ähnlich dem Standard-Autorisierungscode-Ablauf, aber der Client erhöht die Sicherheit durch die Verwendung von PKCE (Proof Key for Code Exchange).
• Resource Owner Password Credentials Grant: Der Resource Owner gibt seinen Benutzernamen und sein Passwort direkt an den Client weiter. Der Client verwendet diese Anmeldeinformationen dann, um ein Zugriffstoken vom Authorization Server anzufordern.
• Client Credentials Grant: Der Client fordert direkt ein Zugriffstoken vom Authorization Server unter Verwendung seiner eigenen Anmeldeinformationen an. Dieser Ablauf eignet sich für Fälle, in denen der Client selbst Zugriff auf Ressourcen benötigt.
• Implicit Grant: Wird verwendet, um ein Zugriffstoken direkt vom Client in einer browserbasierten Anwendung zu erhalten. Dieser Ablauf wird typischerweise für Web-Frontend-Anwendungen verwendet.

Wie man Facebook OAuth 2.0 verwendet, um sich auf Websites von Drittanbietern anzumelden

Schritt 1: Erstellen Sie die App und erhalten Sie die Client-ID und das Client-Secret

Zuerst müssen Sie ein Facebook-Entwicklerkonto unter https://developers.facebook.com eröffnen. Erstellen Sie nach dem Öffnen eine Anwendung darin.

Nachdem die Anwendung erfolgreich erstellt wurde, klicken Sie auf die Option [Application Settings->Basic]. Die Anwendungsnummer hier ist die Client-ID (Client ID), und der Anwendungsschlüssel ist das Client-Secret (Client Secret). Wir werden diese beiden Attribute später benötigen. verwendet.

Schritt 2: Konfigurieren Sie die Callback-Adresse

Nachdem die Anwendung erstellt wurde, müssen Sie auch die "Callback-Adresse" im Control Panel festlegen, klicken Sie auf die Option [Control Panel -> Customize this application] und dann auf "Facebook Login Settings", um die Konfigurationsschnittstelle aufzurufen.

Geben Sie im Element "Valid OAuth Jump URI" auf der Konfigurationsschnittstelle die Callback-Adresse (Callback URL) ein, die die Weiterleitungsadresse ist. Normalerweise ist es der Domainname Ihres Servers (Facebook verlangt, dass er mit https beginnt).

Wenn Sie noch keinen haben, können Sie ihn zuerst ausfüllen, solange Sie sicherstellen, dass auf den Domainnamen zugegriffen werden kann. Speichern Sie ihn nach Abschluss der Konfiguration.

Der Zweck, warum wir die "Callback-Adresse" benötigen, ist, den Autorisierungscode (code) in der Adressleiste zu erhalten. Im Allgemeinen wird nach dem Ausfüllen des Benutzernamens und des Passworts auf der OAuth 2.0-Anmeldeseite auf die "Callback-Adresse" weitergeleitet und kann in der Adressleiste angezeigt werden.

Erhalten Sie den Autorisierungscode (code). Die folgende Adressleiste wird verwendet, um den Codewert manuell zu erhalten:

Nachdem die obigen Informationen konfiguriert wurden, betreten wir offiziell den Hauptprozess der OAuth 2.0-Autorisierung.

Schritt 3: Zugriffstoken abrufen

Wenn die ersten und zweiten Schritte oben bereit sind, können wir ein Zugriffstoken (Token) beantragen. Wir werden diesen Schritt über Apidog demonstrieren.

Apidog ist ein sehr ausgezeichnetes API-Debugging- und -Verwaltungstool, mit dem Sie das Token-Zugriffstoken direkt in Apidog abrufen können. Wenn Sie Apidog noch nicht installiert haben, laden Sie jetzt eines herunter!

1. HTTP-Anfrage erstellen Nachdem Sie in Apidog ein HTTP-Projekt erstellt haben, öffnen Sie es und erstellen Sie dann eine Anfrage in dem Projekt, wählen Sie die Option "Edit Document -> Auth -> OAuth 2.0".

2. Konfigurieren Sie Client-ID, Client-Secret und Callback-URL Der auf der OAuth 2.0-Seite in Apidog ausgewählte Standardautorisierungsmodus ist Authorization Code, da Facebook OAuth 2.0 auch Authorization Code verwendet. Sie müssen hier also nicht wechseln.

Suchen Sie als Nächstes die Client-ID und die Callback-URL am unteren Rand der Seite und geben Sie die abgerufene Client-ID, das Client-Secret und die konfigurierte Callback-URL vom Facebook OAuth 2.0-Dienst ein. Die spezifischen Parameter sind die Konfigurationen, die in "Schritt 1, Schritt 2" oben erwähnt wurden.

3. Konfigurieren Sie die URL für die Autorisierungscode-Anforderung Gemäß der offiziellen Dokumentation von Facebook lautet die URL für die Autorisierungscode-Anforderung während der OAuth 2.0-Authentifizierung: https://www.facebook.com/v19.0/dialog/oauth

Füllen Sie einfach diese URL für die Autorisierungscode-Anforderung in die Auth-URL ein. Diese URL kann als Anmeldeautorisierungsseite verstanden werden. Sie öffnet diese Seite (in Form eines Fensters auf der Clientseite), wenn Sie den Anmeldestatus zum ersten Mal überprüfen, und fordert Sie auf, Ihren Benutzernamen und Ihr Passwort einzugeben.

Normalerweise sind beim manuellen Erstellen einer Anmeldeautorisierungsseite zusätzliche Parameter in der Autorisierungs-URL erforderlich, z. B.:

https://www.facebook.com/v19.0/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &state={state-param}

Hinweis: Parameterfortsetzungen sollten normalerweise keine Zeilenumbrüche haben.

In Apidog sind jedoch in der Regel keine zusätzlichen Parameter nach der Basis-URL erforderlich. Nur der Pfad vor dem Fragezeichen "?" ist erforderlich, da andere obligatorische Parameter separat in anderen Optionen konfiguriert werden. Wenn Sie jedoch einige Abfrageparameter einbeziehen möchten, können Sie diese auch hinzufügen, indem Sie auf das Symbol neben diesem Eingabefeld klicken:

Wir können auch die Optionen "Mehr" erweitern und die Werte für die Parameter eingeben, die ausgefüllt werden müssen, z. B. "Scope" mit der erforderlichen Berechtigung "public_profile". Die Berechtigung "public_profile" in Facebook ermöglicht es der Anwendung, die standardmäßigen öffentlichen Profilfelder des Benutzerknotens zu lesen, und diese Berechtigung wird automatisch allen Anwendungen gewährt.

Geben Sie in der Option "State" "state" ein, um Cross-Site-Request-Forgery zu verhindern. Drittanbieterplattformen verlangen dies in der Regel, daher füllen wir es im Allgemeinen aus, andernfalls kann es beim Abrufen des Zugriffstokens zu Fehlern kommen.

4. Konfigurieren Sie die URL für die Zugriffstoken-Anforderung Gemäß der offiziellen Dokumentation von Facebook lautet die URL zum Abrufen eines Zugriffstokens: https://graph.facebook.com/v19.0/oauth/access_token

Geben Sie einfach diese Adresse in das Eingabefeld "Access Token URL" ein. Ebenso wurden andere Parameter separat in anderen Eingabefeldern konfiguriert, sodass sie nicht in der URL enthalten sein müssen.

5. Erhalten Sie das Zugriffstoken Sobald alle oben genannten Konfigurationselemente festgelegt sind, können Sie auf die Schaltfläche "Token abrufen" klicken, um das Zugriffstoken abzurufen.

Wenn Sie darauf klicken, wird, wenn es sich um Ihre erste Anmeldung handelt, ein Fenster angezeigt, in dem Sie nach Ihrer Autorisierung gefragt werden. Hier müssen Sie Ihren Facebook-Kontobenutzernamen und Ihr Passwort eingeben. Wenn Sie sich von einem neuen Gerät anmelden, benötigen Sie möglicherweise auch Ihre E-Mail-Adresse für eine zusätzliche Überprüfung.

Nachdem Sie Ihren Benutzernamen und Ihr Passwort eingegeben haben, werden Sie aufgefordert, die Autorisierung zu bestätigen.

Klicken Sie auf "Bestätigen", um die Autorisierung abzuschließen. Nach der Autorisierung wird das Zugriffstoken automatisch abgerufen und auf der Seite angezeigt. Gleichzeitig werden auch andere von Facebook zurückgegebene Informationen analysiert.

Schritt 4: Zugriff auf offene Ressourcen basierend auf Token Mit dem Zugriffstoken (Token) können Sie es jetzt verwenden, um auf die offenen Ressourcen von Facebook zuzugreifen. Sie können sehen, welche Art von offenen Ressourcen in der Facebook Graph API verfügbar sind.

Beispielsweise ruft die folgende API die ID und den Namen des Benutzers ab. Wenn Ihre Schnittstelle nichts zurückgibt, müssen Sie möglicherweise überprüfen, ob Sie die erforderlichen Berechtigungen haben, wie in Abschnitt 3 von "Schritt 3" erwähnt, konfigurieren Sie sie einfach im Scope. https://graph.facebook.com/v12.0/me?fields=id,name

Beim Senden einer Anfrage fügt Apidog das Token automatisch dem Authorization-Header hinzu und sendet es angehängt an "Bearer" aus.

Wenn Sie das Token in der URL mitführen möchten, können Sie auch den "Add Location" des Tokens in den Konfigurationsoptionen auf der Seite ändern und "Query Params" auswählen.

Zusammenfassung

OAuth 2.0 ist ein offenes Standard-Autorisierungsprotokoll, das es Anwendungen von Drittanbietern ermöglicht, sicher auf geschützte Ressourcen zuzugreifen. Der Autorisierungscode-Autorisierungsprozess ist eine gängige Autorisierungsmethode und wird von Facebook verwendet.

Während der Implementierung müssen Sie eine Anwendung erstellen, eine Callback-Adresse konfigurieren, ein Zugriffstoken abrufen und Apidog zum Debuggen verwenden. Nach dem Abrufen des Zugriffstokens können Sie das Token verwenden, um die offenen Ressourcen von Facebook aufzurufen.