Teil 1: Das Backend

Hier ist ein Link zur Facebook-Entwicklerseite.

Wenn Sie sich das obige Video ansehen und Ihre Website testen, werden Sie bei der Anmeldung höchstwahrscheinlich ein Banner mit der Aufschrift "Submit for Login Review" sehen. Um dieses Banner zu entfernen und in den Live-Modus zu wechseln...

1. Du musst eine gültige URL für die Datenschutzrichtlinien und eine URL für die Datenlöschungsanweisungen angeben. Sie können diese beiden Eingaben in den Grundeinstellungen auf dem Facebook-App-Dashboard aktualisieren.
   - Die URL für die Datenlöschungsanweisungen ist eine Seite auf Ihrer Website, über die Mitglieder die Löschung ihrer Daten beantragen können.
2. Klicken Sie auf "Erweiterten Zugriff erhalten" für E-Mail und public_profile.
   - Ich hatte ziemliche Schwierigkeiten, die Facebook-Benutzeroberfläche richtig zu laden. Wenn Sie Schwierigkeiten haben, empfehle ich Ihnen, es noch einmal in einem privaten oder Inkognito-Browser zu versuchen.
3. Sie müssen einen Data Use Checkup durchführen.
4. Schalten Sie Ihre App vom Testmodus in den Live-Modus um.

Teil 2: Das Frontend

Wenn Sie die vorgefertigte Anmelde-, Login- oder Profil-UI von Memberstack verwenden, sind Sie bereits fertig. Aktivierte Social-Auth-Anbieter werden automatisch in der vorgefertigten Benutzeroberfläche angezeigt.

Wenn Sie Ihrem Webflow-Projekt eine Social-Authentifizierungs-Schaltfläche hinzufügen möchten, ist dieser Abschnitt für Sie.

Anmelde- und Login-Formulare

Ich empfehle, eine unserer Webflow-Schaltflächen für die soziale Authentifizierung zu kopieren. Sie sind zu 100 % in Webflow integriert, haben bereits die Attribute, die Sie benötigen, und lassen sich leicht anpassen:

A) Facebook-Schaltfläche mit hellem Thema
B) Facebook-Schaltfläche mit dunklem Thema.

Sie können Ihr eigenes Produkt von Grund auf neu erstellen:

1. Überprüfe die Markenrichtlinien von Facebook für Anmeldeschaltflächen.
2. Erstellen Sie einen Link-Block mit dem Attribut data-ms-auth-provider="facebook".
3. Fügen Sie das Facebook-Logo hinzu.
4. Fügen Sie den Text Ihrer Schaltfläche hinzu. Wir empfehlen etwas wie "Weiter mit Facebook".

Das war's mit den Schaltflächen für Anmeldung und Login. Profilschaltflächen haben ein paar zusätzliche Elemente.

Profil-Formulare

In diesem anderen Tutorial werden wir eine Benutzeroberfläche für Mitglieder erstellen, um Anbieter zu verbinden, zuvor verbundene Anbieter anzuzeigen und (optional) Anbieter zu trennen.

Social Auth-Schaltflächen in Profilformularen