Soziale Anmeldung mit Facebook einrichten

Der offizielle Logto-Connector für die Facebook-Sozialanmeldung.

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

Der Facebook-Connector bietet eine prägnante Möglichkeit für deine Anwendung, das OAuth 2.0-Authentifizierungssystem von Facebook zu nutzen.

Ein Facebook-Entwicklerkonto registrieren

Registriere dich als Facebook-Entwickler, falls du noch kein Konto hast.

Eine Facebook-App einrichten

1. Besuche die Apps Seite.
2. Klicke auf deine bestehende App oder erstelle eine neue, falls nötig.
   • Der ausgewählte App-Typ liegt bei dir, sollte aber das Produkt Facebook Login enthalten.
3. Auf der App-Dashboard-Seite scrolle zum Abschnitt "Produkt hinzufügen" und klicke auf die Schaltfläche "Einrichten" auf der Karte "Facebook Login".
4. Überspringe die Facebook Login Schnellstartseite und klicke auf die Seitenleiste -> "Produkte" -> "Facebook Login" -> "Einstellungen".
5. Auf der Seite Facebook Login Einstellungen fülle ${your_logto_origin}/callback/${connector_id} im Feld "Gültige OAuth-Weiterleitungs-URIs" aus. Die connector_id findest du in der oberen Leiste der Logto Admin Console Connector-Detailseite. Zum Beispiel:
   • https://logto.dev/callback/${connector_id} für die Produktion
   • https://localhost:3001/callback/${connector_id} für Tests in der lokalen Umgebung
6. Klicke auf die Schaltfläche "Änderungen speichern" in der unteren rechten Ecke.

Den Connector-JSON zusammenstellen

1. Auf der Facebook-App-Dashboard-Seite klicke auf die Seitenleiste -> "Einstellungen" -> "Grundlegend".
2. Du siehst die "App-ID" und das "App-Geheimnis" auf dem Panel.
3. Klicke auf die Schaltfläche "Anzeigen" neben dem Eingabefeld für das App-Geheimnis, um dessen Inhalt zu kopieren.
4. Fülle die Logto-Connector-Einstellungen aus:
   • Fülle das Feld clientId mit dem String aus App-ID aus.
   • Fülle das Feld clientSecret mit dem String aus App-Geheimnis aus.
   • Fülle das Feld scope mit einer durch Kommas oder Leerzeichen getrennten Liste von Berechtigungen als String aus. Wenn du keinen Scope angibst, ist der Standard-Scope email,public_profile.

Anmeldung mit Facebook-Testbenutzern testen

Du kannst die Konten der Test-, Entwickler- und Admin-Benutzer verwenden, um die Anmeldung mit der zugehörigen App sowohl im Entwicklungs- als auch im Live-App-Modus zu testen.

Du kannst die App auch direkt live schalten, sodass sich jeder Facebook-Benutzer mit der App anmelden kann.

• Auf der App-Dashboard-Seite klicke auf die Seitenleiste -> "Rollen" -> "Testbenutzer".
• Klicke auf die Schaltfläche "Testbenutzer erstellen", um einen Testbenutzer zu erstellen.
• Klicke auf die Schaltfläche "Optionen" des bestehenden Testbenutzers, und du siehst weitere Operationen, z. B. "Name und Passwort ändern".

Facebook-Anmeldeeinstellungen veröffentlichen

Normalerweise können sich nur die Test-, Admin- und Entwickler-Benutzer mit der zugehörigen App im Entwicklungsmodus anmelden.

Um normalen Facebook-Benutzern die Anmeldung mit der App in der Produktionsumgebung zu ermöglichen, musst du möglicherweise deine Facebook-App in den Live-Modus schalten, abhängig vom App-Typ. Zum Beispiel hat die reine Business-Typ App keinen "Live"-Schalter, aber es wird deine Nutzung nicht blockieren.

1. Auf der Facebook-App-Dashboard-Seite klicke auf die Seitenleiste -> "Einstellungen" -> "Grundlegend".
2. Fülle die Felder "Datenschutzrichtlinien-URL" und "Benutzerdatenlöschung" auf dem Panel aus, falls erforderlich.
3. Klicke auf die Schaltfläche "Änderungen speichern" in der unteren rechten Ecke.
4. Klicke auf die "Live"-Schaltfläche in der oberen Leiste der App.

Konfigurationstypen

Name	Typ
clientId	string
clientSecret	string
scope	string

Referenzen

• Facebook Login - Dokumentation - Facebook für Entwickler
  • Manuelles Erstellen eines Anmeldeflusses
  • Berechtigungsleitfaden