In diesem Artikel werden die Vorteile der sozialen Anmeldung erläutert und wie wir die Anmeldung per Facebook auf unserer Website oder mobilen App implementieren können.
Mehr als 1 Million Websites oder Apps verwenden „Mit Facebook anmelden“ oder „Mit Facebook einloggen“ . Wissen Sie, warum sie sich über Facebook anmelden und wie sich dies positiv auf die Konvertierung auswirkt?
Laut mehreren Umfragen nutzen weltweit mehr als 3 Milliarden Menschen soziale Medien. Das entspricht etwa 50 % der Weltbevölkerung.
Die größte Herausforderung und das Wichtigste ist, die Benutzerregistrierung und -anmeldung bei der Entwicklung unserer Anwendung schnell und einfach zu gestalten. Die Registrierungsformulare erfordern viele Daten, die von den Benutzern manuell ausgefüllt werden müssen, wodurch potenzielle Benutzer verloren gehen. Darüber hinaus müssen die Benutzer ihre Benutzernamen/E-Mails und Passwörter in die Anmeldeformulare eingeben, um sich zu authentifizieren, und müssen sich außerdem mehrere individuelle IDs und Passwörter merken.
Mit Social Login können Kunden ihre vorhandenen sozialen Identitäten mitbringen und diese zur Registrierung und Anmeldung verwenden, ohne explizit ein neues Profil erstellen zu müssen.
Facebook ist im Vergleich zu anderen Social-Media-Anbietern der beliebteste Social-Media-Anbieter und die Zahl der aktiven Facebook-Benutzer wächst täglich.
In diesem Artikel erkläre ich, wie Sie „Mit Facebook anmelden“ ganz einfach auf Ihrer Website oder mobilen App implementieren können.
Facebook arbeitet mit dem OAuth 2.0-Protokoll und die meisten sozialen Anbieter wie Facebook, Google, Microsoft und Linkedin unterstützen OAuth 2.0. Lesen Sie diesen Artikel Erste Schritte mit OAuth 2.0, um mehr über den OAuth-Flow zu erfahren.
Erstellen Sie Ihre Facebook Login-App
Hier finden Sie die vollständige Schritt-für-Schritt-Anleitung zum Erstellen Ihrer Facebook Login-App.
Schritt 1
Gehen Sie zu Facebook Developer und melden Sie sich mit Ihren Facebook Logindaten an.
HINWEIS : Bitte melden Sie sich nicht mit einem Geschäftskonto an, da Facebook Ihnen in diesem Fall nicht erlaubt, eine App zu erstellen.
Schritt 2
Wählen Sie „Meine Apps“ aus , wie auf dem folgenden Bildschirm angezeigt.
Schritt 3
Klicken Sie auf „Neue App hinzufügen“, wie im folgenden Bildschirm angezeigt.
Schritt 4
Geben Sie den Anzeigenamen und die Kontakt-E-Mail ein. Klicken Sie anschließend auf App-ID erstellen
Schritt 5
Führen Sie bei der Sicherheitsüberprüfung die Sicherheitsschritte durch und klicken Sie auf die Schaltfläche „Senden“ .
Schritt 6
Sobald Sie auf dem App-Dashboard gelandet sind, wählen Sie „Facebook Login“ und klicken Sie auf „Einrichten“ .
Schritt 7
Klicken Sie in der Seitenleiste unter Facebook-Login auf „Einstellungen“. Aktivieren Sie Client-OAuth-Login. Aktivieren Sie Web-OAuth-Login. Tragen Sie die gültige Umleitungs-URL unter „Gültige OAuth-Umleitungs-URIs“ ein . Klicken Sie auf die Schaltfläche „Speichern“.
Schritt 8
Klicken Sie in der Seitenleiste unter „Einstellungen“ auf „Basis“. Unter „App“ finden Sie unter „Domains“ die URL Ihrer Website. Geben Sie alle erforderlichen Details ein. Ändern Sie den Status der App in der oberen rechten Ecke von „Entwicklung“ auf „Live“. Klicken Sie auf die Schaltfläche „Änderungen speichern“ .
Jetzt ist Ihre Facebook-App fertig. Sie können mit der Implementierung des Facebook-Logins beginnen
Datenauswahl
Wenn sich ein Benutzer über Facebook Login bei Ihrer Website oder App anmeldet, können Sie auf die bei Facebook gespeicherten Daten des Benutzers zugreifen. Facebook erlaubt nur die grundlegenden Profildatenberechtigungen für eine neue Facebook-App. Um mehr Daten entsprechend Ihren Geschäftsanforderungen zu erhalten, müssen Sie zusätzliche Berechtigungen für Ihre Facebook-App aktivieren. Facebook unterstützt rund 42 Berechtigungen . Sie müssen Benutzerdaten auswählen, die Sie von Facebook sammeln möchten.
Senden Sie Ihre Facebook Login-App zur Überprüfung
Um mehr als nur grundlegende Profildatenpunkte abzurufen oder zusätzliche Berechtigungen von Ihren Benutzern anzufordern, durchlaufen Ihre Facebook-Apps den Überprüfungsprozess. Manchmal verlangen Unternehmen zusätzliche Berechtigungen für die Facebook-App. Dazu müssen Sie Ihre Facebook-App zur Genehmigung einreichen, bevor Sie weitere Informationen anfordern können.
Der Überprüfungsprozess für Facebook-Apps ist ziemlich einfach. Informationen zum Überprüfungsprozess für Facebook-Apps finden Sie in diesem Dokument hier .
Fügen Sie auf Ihrer Site die Schaltfläche „Login mit Facebook“ hinzu
Mithilfe des JavaScript SDK von Facebook lässt sich die Facebook Login auf einer Webseite ganz einfach implementieren. Facebook stellt Dokumentation und Anleitungen sowie Codebeispiele zur Implementierung des Anmeldesystems bereit.
Sehen wir uns an, wie wir die Facebook Loginoberfläche hinzufügen können. Dazu müssen wir nur den von Facebook bereitgestellten Code kopieren und einfügen. Hier habe ich dem vorhandenen Code einige Anpassungen hinzugefügt
Fügen Sie diesen Code in den Body-Abschnitt Ihres HTML-Codes ein.
Jetzt müssen Sie den JavaScript-Abschnitt einfügen. Dadurch wird das Facebook SDK JavaScript asynchron geladen.
Als Nächstes fügen wir die Facebook-Init-Funktion hinzu. Wir müssen nur den Platzhalter „App-ID“ durch die App-ID Ihrer App ersetzen, die Sie am Anfang erstellt haben. Sie finden den Platzhalter in dieser Zeile: appId: „{your-app-id}“.
Als Nächstes müssen wir die Funktion hinzufügen, die die Antwort verarbeitet und den Seiteninhalt basierend auf der Art der Antwort ändert. Ich habe diese Funktion ganz oben im Skriptabschnitt hinzugefügt.
Wie Sie sehen, empfängt die obige Funktion eine Antwortvariable und überprüft ihren Status. Wenn eine Verbindung besteht, ruft sie die Informationen des angemeldeten Benutzers ab und gibt diese Informationen in der Konsole Ihres Browsers aus. In diesem Bereich können Sie dieses Skript zur Verarbeitung der Daten erweitern. Wenn die Anmeldung nicht autorisiert ist, ändert diese Funktion das HTML auf Ihrer Seite, um Sie zur Anmeldung aufzufordern.
Wenn Sie diese Seite nun als login.html speichern und in einem Browser öffnen, sollten Sie die Facebook Loginschaltfläche sehen. Sie können diesen Code auch von meinem GitHub-Repo herunterladen. Ich habe ihn angepasst, um ihn für eine Erklärung etwas kürzer zu machen.
Melden Sie sich jetzt einfach an und überprüfen Sie die Konsolenausgabe. Sie sehen jetzt einige grundlegende Informationen, darunter ID, E-Mail, Vorname , Geschlecht und Nachname .
Das ist alles, was Sie dazu wissen müssen. Natürlich gibt es in der Facebook-Dokumentation noch viele weitere Optionen und Funktionen zu entdecken.
Mehr lesen: Docker vs. Containerd: Ein detaillierter Vergleich
Abschließende Gedanken
Social-Media-Plattformen wachsen von Tag zu Tag und vereinfachen den Registrierungs- und Anmeldevorgang. Verbraucher können ihre vorhandenen sozialen Identitäten verwenden, um sich zu registrieren und anzumelden. Sie müssen keine separate Kombination aus Benutzername und Passwort erstellen, was den Anmelde-/Registrierungsprozess vereinfacht.
LoginRadius unterstützt die Anmeldung mit Facebook bei über 40 anderen beliebten sozialen Netzwerken wie Google, Twitter, LinkedIn usw. Sie können alle beliebten Social-Media-Anbieter in weniger als 60 Sekunden auf Ihrer Website oder in Ihrer mobilen App implementieren.
