Soziale Anmeldung mit Facebook einrichten

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

tipp:

In diesem Leitfaden gehen wir davon aus, dass du grundlegende Kenntnisse über Logto Connectors hast. Falls nicht, schaue dir den Leitfaden Connectors konfigurieren an, 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 keines hast.

Eine Facebook-App einrichten

1. Besuche die Seite Apps.
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 haben.
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} in das Feld "Gültige OAuth-Weiterleitungs-URIs" ein. 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.
   • Fülle das Feld clientSecret mit dem String aus App-Geheimnis.
   • 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-Nutzer 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-Nutzern 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
  • Manuellen Anmeldefluss erstellen
  • Berechtigungsleitfaden