Zum Hauptinhalt springen

Soziale Anmeldung mit Facebook einrichten (Set up social login with Facebook)

Integriere das Facebook OAuth 2.0-Authentifizierungssystem, um „Mit Facebook anmelden“, Kontoverknüpfung und sicheren Zugriff auf Facebook APIs zu ermöglichen.

tipp:

Diese Anleitung setzt voraus, dass du ein grundlegendes Verständnis von Logto Connectors hast. Für diejenigen, die damit nicht vertraut sind, verweisen wir auf die Connectors Anleitung, um loszulegen.

Erste Schritte (Get started)​

Der Facebook Connector ermöglicht die OAuth 2.0-Integration, damit deine Anwendung:

  • Die Authentifizierung „Mit Facebook anmelden“ hinzufügen kann
  • Benutzerkonten mit Facebook-Identitäten verknüpfen kann
  • Benutzerprofilinformationen von Facebook synchronisieren kann
  • Zugriff auf Facebook APIs durch sichere Token-Speicherung im Logto Secret Vault für Automatisierungsaufgaben (z. B. auf Threads antworten; Inhalte und Videos in deiner App veröffentlichen) erhält

Um diese Authentifizierungsfunktionen einzurichten, erstelle zuerst einen Facebook Connector in Logto:

  1. Gehe zu Logto > Connector > Social connector.
  2. Klicke auf Sozialen Connector hinzufügen, wähle Facebook, klicke auf Weiter und folge dem Schritt-für-Schritt-Tutorial, um die Integration abzuschließen.

Schritt 1: Eine App im Facebook App Dashboard einrichten​

Bevor du Facebook als Authentifizierungsanbieter verwenden kannst, musst du eine App auf der Facebook-Entwicklerplattform einrichten, um OAuth 2.0-Zugangsdaten zu erhalten.

  1. Registriere dich als Facebook-Entwickler, falls du noch kein Konto hast.
  2. Besuche die Apps-Seite.
  3. Klicke auf deine bestehende App oder erstelle eine neue, falls nötig.
tipp:

Ein Anwendungsfall ist die primäre Art und Weise, wie deine App mit Meta interagiert, und bestimmt, welche APIs, Funktionen, Berechtigungen und Produkte deiner App zur Verfügung stehen. Wenn du nur soziale Authentifizierung benötigst (um E-Mail & public_profile zu erhalten), wähle „Authentifizierung und Anfragedaten von Benutzern mit Facebook Login“. Wenn du auf Facebook-APIs zugreifen möchtest, wähle deine bevorzugten Anwendungsfälle – die meisten unterstützen nach der App-Erstellung auch die Integration von „Facebook Login for business“.

  1. Nach der App-Erstellung navigiere im App-Dashboard zu Use cases > Facebook Login > Settings oder Facebook Login for business > Settings.
  2. Trage bei Valid OAuth Redirect URIs die Logto Callback URI ein (kopiere diese aus deinem Logto Facebook Connector). Nachdem sich Benutzer mit Facebook angemeldet haben, werden sie hierher mit einem Autorisierungscode weitergeleitet, den Logto zur Fertigstellung der Authentifizierung verwendet.
  3. Navigiere zu Use cases und klicke auf Customize deines Anwendungsfalls, um die Berechtigungen (Scopes) hinzuzufügen. Wir empfehlen, email und public_profile hinzuzufügen, die für die Implementierung von „Sign-in with Facebook“ in Logto erforderlich sind.

Schritt 2: Logto Connector mit Client-Zugangsdaten einrichten​

  1. Klicke im Facebook App Dashboard in der Seitenleiste auf App settings > Basic.
  2. Du siehst die App ID und das App secret im Panel.
  3. Klicke auf die Show-Schaltfläche neben dem App secret-Eingabefeld, um den Inhalt anzuzeigen und zu kopieren.
  4. Konfiguriere die Einstellungen deines Logto Facebook Connectors:
    • Fülle das Feld clientId mit der App ID aus.
    • Fülle das Feld clientSecret mit dem App secret aus.
    • Klicke in Logto auf Save and Done, um dein Identitätssystem mit Facebook zu verbinden.

Schritt 3: Berechtigungen (Scopes) konfigurieren​

Berechtigungen (Scopes) definieren, welche Zugriffsrechte deine App von den Benutzern anfordert und steuern, auf welche privaten Daten dein Projekt von deren Facebook-Konten zugreifen kann.

Berechtigungen im Facebook App Dashboard konfigurieren​

  1. Navigiere zu Facebook App Dashboard > Use cases und klicke auf die Customize-Schaltfläche.
  2. Füge nur die Berechtigungen hinzu, die deine App benötigt. Die Benutzer sehen und autorisieren diese Berechtigungen auf dem Facebook Zustimmungsbildschirm (Consent screen):
    • Für Authentifizierung (erforderlich): email und public_profile.
    • Für API-Zugriff (optional): Alle zusätzlichen Berechtigungen, die deine App benötigt (z. B. threads_content_publish, threads_read_replies für den Zugriff auf die Threads API). Siehe die Meta Developer Documentation für verfügbare Dienste.

Berechtigungen in Logto konfigurieren​

Wähle je nach Bedarf eine oder mehrere der folgenden Vorgehensweisen:

Option 1: Keine zusätzlichen API-Berechtigungen benötigt

  • Lasse das Feld Scopes in deinem Logto Facebook Connector leer.
  • Die Standardberechtigungen email public_profile werden angefordert, damit Logto grundlegende Benutzerinformationen korrekt abrufen kann.

Option 2: Zusätzliche Berechtigungen beim Anmelden anfordern

  • Gib alle gewünschten Berechtigungen im Feld Scopes ein, getrennt durch Leerzeichen.
  • Alle hier aufgeführten Berechtigungen überschreiben die Standardwerte, daher immer auch die Authentifizierungsberechtigungen angeben: email public_profile.

Option 3: Zusätzliche Berechtigungen später schrittweise anfordern

  • Nachdem sich der Benutzer angemeldet hat, kannst du bei Bedarf zusätzliche Berechtigungen anfordern, indem du einen föderierten sozialen Autorisierungsfluss erneut startest und das gespeicherte Token-Set des Benutzers aktualisierst.
  • Diese zusätzlichen Berechtigungen müssen nicht im Feld Scopes deines Logto Facebook Connectors eingetragen werden und können über die Logto Social Verification API erreicht werden.

Wenn du diese Schritte befolgst, fordert dein Logto Facebook Connector genau die Berechtigungen an, die deine App benötigt – nicht mehr und nicht weniger.

tipp:

Wenn deine App diese Berechtigungen anfordert, um auf die Facebook API zuzugreifen und Aktionen auszuführen, aktiviere Store tokens for persistent API access im Logto Facebook Connector. Siehe den nächsten Abschnitt für Details.

Schritt 4: Allgemeine Einstellungen​

Hier sind einige allgemeine Einstellungen, die die Verbindung zu Facebook nicht blockieren, aber die Authentifizierungserfahrung für Endbenutzer beeinflussen können.

Profilinformationen synchronisieren​

Im Facebook Connector kannst du die Richtlinie für das Synchronisieren von Profilinformationen wie Benutzernamen und Avataren festlegen. Wähle aus:

  • Nur bei Registrierung synchronisieren: Profilinformationen werden einmalig abgerufen, wenn sich der Benutzer zum ersten Mal anmeldet.
  • Immer bei Anmeldung synchronisieren: Profilinformationen werden jedes Mal aktualisiert, wenn sich der Benutzer anmeldet.

Tokens speichern, um auf Facebook APIs zuzugreifen (optional)​

Wenn du auf Facebook APIs zugreifen und Aktionen mit Benutzerautorisierung durchführen möchtest (egal ob über soziale Anmeldung oder Kontoverknüpfung), muss Logto bestimmte API-Berechtigungen erhalten und Tokens speichern.

  1. Füge die erforderlichen Berechtigungen gemäß obigem Tutorial hinzu.
  2. Aktiviere Store tokens for persistent API access im Logto Facebook Connector. Logto speichert Facebook Zugangstokens sicher im Secret Vault.
hinweis:

Facebook stellt keine Auffrischungstokens (Refresh tokens) bereit. Wenn jedoch die Token-Speicherung aktiviert ist, fordert Logto bei der Benutzer-Authentifizierung automatisch ein langlebiges Zugangstoken (60 Tage) an. Während dieses Zeitraums können Benutzer Zugangstokens manuell widerrufen, müssen aber ansonsten keine erneute Autorisierung durchführen, um auf Facebook APIs zuzugreifen. Hinweis: Füge offline_access nicht zum Feld Scope hinzu, da dies zu Fehlern führen kann.

Schritt 5: Anmeldung mit Facebook-Testbenutzern testen (optional)​

Du kannst Test-, Entwickler- und Admin-Benutzerkonten verwenden, um die Anmeldung mit der App zu testen. Du kannst die App auch direkt veröffentlichen, sodass sich jeder Facebook-Benutzer anmelden kann.

  1. Klicke im Facebook App Dashboard in der Seitenleiste auf App roles > Test Users.
  2. Klicke auf die Create test users-Schaltfläche, um einen Testbenutzer zu erstellen.
  3. Klicke auf die Options-Schaltfläche eines bestehenden Testbenutzers, um weitere Aktionen wie „Name und Passwort ändern“ anzuzeigen.

Schritt 6: Facebook-Anmeldeeinstellungen veröffentlichen​

In der Regel können sich nur Test-, Admin- und Entwicklerbenutzer mit der App anmelden. Um normalen Facebook-Benutzern die Anmeldung mit der App in der Produktionsumgebung zu ermöglichen, musst du die App möglicherweise veröffentlichen.

  1. Klicke im Facebook App Dashboard in der Seitenleiste auf Publish.
  2. Fülle die Felder Privacy Policy URL und User data deletion aus, falls erforderlich.
  3. Klicke auf die Save changes-Schaltfläche unten rechts.
  4. Klicke auf die Live-Umschaltfläche in der oberen Leiste der App.

Den Facebook Connector nutzen (Utilize the Facebook connector)​

Sobald du einen Facebook Connector erstellt und mit Facebook verbunden hast, kannst du ihn in deine Endnutzer-Flows einbinden. Wähle die Optionen, die zu deinen Anforderungen passen:

„Mit Facebook anmelden“ aktivieren (Enable "Sign-in with Facebook")​

  1. Gehe in der Logto Console zu Anmeldeerfahrung > Registrierung und Anmeldung
  2. Füge den Facebook Connector im Abschnitt Soziale Anmeldung hinzu, damit sich Benutzer mit Facebook authentifizieren können

Erfahre mehr über die soziale Anmeldeerfahrung.

Nutze die Account API, um ein individuelles Account Center in deiner App zu erstellen, das angemeldeten Benutzern ermöglicht, ihr Facebook-Konto zu verknüpfen oder zu trennen. Folge dem Account API-Tutorial

tipp:

Es ist möglich, den Facebook Connector nur für die Kontoverknüpfung und den API-Zugriff zu aktivieren, ohne ihn für die soziale Anmeldung zu aktivieren.

Auf die Facebook API zugreifen und Aktionen durchführen (Access Facebook API and perform actions)​

Deine Anwendung kann gespeicherte Facebook Zugangstokens (Access tokens) aus dem Secret Vault abrufen, um Facebook APIs aufzurufen und Backend-Aufgaben zu automatisieren (z. B. Inhalte veröffentlichen oder Beiträge verwalten). Siehe die Anleitung zum Abrufen gespeicherter Tokens für den API-Zugriff.

Die Facebook-Identität des Benutzers verwalten (Manage user's Facebook identity)​

Nachdem ein Benutzer sein Facebook-Konto verknüpft hat, können Administratoren diese Verbindung in der Logto Console verwalten:

  1. Navigiere zu Benutzerverwaltung und öffne das Benutzerprofil.
  2. Unter Soziale Verbindungen finde den Facebook-Eintrag und klicke auf Verwalten.
  3. Auf dieser Seite können Administratoren die Facebook-Verbindung des Benutzers verwalten, alle gewährten und synchronisierten Profilinformationen aus dem Facebook-Konto einsehen und den Status des Zugangstokens (Access token) prüfen.
hinweis:

Die Access Token-Antwort von Facebook enthält keine spezifischen Scope-Informationen, daher kann Logto die vom Benutzer gewährten Berechtigungen (Permissions) nicht direkt anzeigen. Solange der Benutzer jedoch den angeforderten Berechtigungen (Scopes) während der Autorisierung zugestimmt hat, hat deine Anwendung beim Zugriff auf die Facebook API die entsprechenden Berechtigungen. Es wird empfohlen, die benötigten Berechtigungen sowohl in der Facebook Developer Console als auch in Logto korrekt zu konfigurieren, um sicherzustellen, dass deine App den erforderlichen Zugriff hat.

Referenz (Reference)​

Facebook for Developers – Dokumentation Facebook Login Dokumentation