Sie können Ihren Nutzern erlauben, sich mit ihren Facebook-Konten bei Firebase zu authentifizieren indem Sie die Facebook-Anmeldung in Ihre App integrieren. Sie können Facebook-Log-in indem Sie entweder das Firebase SDK für die Anmeldung verwenden oder den Facebook-Anmeldevorgang manuell ausführen und das resultierende Zugriffstoken an Firebase
Hinweis
- Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
- Auf Facebook for Developers erhalten Sie die App-ID und das App-Secret für Ihre App.
- Facebook-Anmeldung aktivieren:
- Öffnen Sie in der Firebase-Konsole den Abschnitt Auth.
- Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldemethode Facebook und geben Sie die App-ID und das App-Secret an, die Sie von Facebook erhalten haben.
- Prüfen Sie dann, ob Ihr OAuth-Weiterleitungs-URI (z. B.
my-app-12345.firebaseapp.com/__/auth/handler
) in der Konfiguration Produkteinstellungen > Facebook-Anmeldung auf der Seite „Einstellungen“ Ihrer Facebook-App auf der Website Facebook für Entwickler als einer Ihrer OAuth-Weiterleitungs-URIs aufgeführt ist.
Anmeldevorgang mit dem Firebase SDK durchführen
Wenn Sie eine Webanwendung erstellen, ist es am einfachsten, Ihre Nutzer zu authentifizieren. mit Firebase über die Facebook-Konten das Firebase JavaScript SDK. Wenn Sie einen Nutzer in Node.js oder einer anderen nicht browserbasierten Umgebung authentifizieren möchten, müssen Sie den Anmeldevorgang manuell abwickeln.
So verwalten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:
- Erstellen Sie eine Instanz des Facebook-Anbieter-Objekts:
Web
import { FacebookAuthProvider } from "firebase/auth"; const provider = new FacebookAuthProvider();
Web
var provider = new firebase.auth.FacebookAuthProvider();
- Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie
Authentifizierungsanbieter
beantragen möchten. Um einen Bereich hinzuzufügen, rufen Sie
addScope
Beispiel:Web
provider.addScope('user_birthday');
Web
provider.addScope('user_birthday');
- Optional: Wenn du den OAuth-Ablauf des Anbieters in der bevorzugten Sprache des Nutzers lokalisieren möchtest, ohne die entsprechenden benutzerdefinierten OAuth-Parameter explizit zu übergeben, aktualisiere den Sprachcode in der Auth-Instanz, bevor du den OAuth-Ablauf startest. Beispiel:
Web
import { getAuth } from "firebase/auth"; const auth = getAuth(); auth.languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // auth.useDeviceLanguage();
Web
firebase.auth().languageCode = 'it'; // To apply the default browser preference instead of explicitly setting it. // firebase.auth().useDeviceLanguage();
- Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Anbieterparameter an, die mit der OAuth-Anfrage gesendet werden sollen. Um einen benutzerdefinierten Parameter hinzuzufügen, rufen Sie
setCustomParameters
beim initialisierten Anbieter mit einem Objekt, das den Schlüssel enthält OAuth-Anbieter und im entsprechenden Wert angegeben. Beispiel:Web
provider.setCustomParameters({ 'display': 'popup' });
Web
provider.setCustomParameters({ 'display': 'popup' });
- Authentifizieren Sie sich mit Firebase über das Facebook-Anbieterobjekt. Sie können
fordern Sie Ihre Nutzer auf, sich mit ihrem Facebook-Konto anzumelden, indem sie ein
Pop-up-Fenster öffnen oder zur Anmeldeseite weitergeleitet werden. Die Weiterleitungsmethode ist
auf Mobilgeräten bevorzugt.
- Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie
signInWithPopup
:Web
import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // The signed-in user info. const user = result.user; // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; // IdP data available using getAdditionalUserInfo(result) // ... }) .catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // The AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web
firebase .auth() .signInWithPopup(provider) .then((result) => { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... // This gives you a Facebook Access Token. You can use it to access the Facebook API. var accessToken = credential.accessToken; // ... }) .catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes findest du in den Auth-Referenzdokumenten.
- Wenn Sie sich durch Weiterleitung zur Anmeldeseite anmelden möchten, rufen Sie
signInWithRedirect
auf: Folgen Sie den Best Practices für die Verwendung von „signInWithWeiterleitung“.Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
getRedirectResult
beim Laden der Seite:Web
import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth"; const auth = getAuth(); getRedirectResult(auth) .then((result) => { // This gives you a Facebook Access Token. You can use it to access the Facebook API. const credential = FacebookAuthProvider.credentialFromResult(result); const token = credential.accessToken; const user = result.user; // IdP data available using getAdditionalUserInfo(result) // ... }).catch((error) => { // Handle Errors here. const errorCode = error.code; const errorMessage = error.message; // The email of the user's account used. const email = error.customData.email; // AuthCredential type that was used. const credential = FacebookAuthProvider.credentialFromError(error); // ... });
Web
firebase.auth() .getRedirectResult() .then((result) => { if (result.credential) { /** @type {firebase.auth.OAuthCredential} */ var credential = result.credential; // This gives you a Facebook Access Token. You can use it to access the Facebook API. var token = credential.accessToken; // ... } // The signed-in user info. var user = result.user; // IdP data available in result.additionalUserInfo.profile. // ... }).catch((error) => { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... });
- Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie
Mit Firebase in einer Chrome-Erweiterung authentifizieren
Wenn Sie eine App für eine Chrome-Erweiterung erstellen, lesen Sie die Leitfaden zu nicht sichtbaren Dokumenten.
Nächste Schritte
Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, d. h. mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps in Ihrem Projekt zu identifizieren, unabhängig davon, wie er sich anmeldet.
-
Um den Authentifizierungsstatus Ihrer Nutzer in Ihren Apps zu ermitteln, gehen Sie folgendermaßen vor: einen Beobachter für das
Auth
-Objekt festlegen. Sie können dann die E-Mail-Adresse grundlegende Profilinformationen aus demUser
-Objekt. Weitere Informationen finden Sie unter Nutzer verwalten: In Firebase Realtime Database und Cloud Storage Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen
auth
abrufen, und steuern, auf welche Daten ein Nutzer zugreifen kann.
Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.
Rufen Sie auf, um einen Nutzer abzumelden.
signOut
:
Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });