Mit FirebaseUI ganz einfach Anmeldeinformationen zu Ihrer Webanwendung hinzufügen

FirebaseUI ist eine Bibliothek, die auf dem Firebase Authentication SDK basiert und Drop-in-UI-Abläufe für die Verwendung in Ihrer App bietet. FirebaseUI bietet die folgenden Vorteile:

  • Mehrere Anbieter: Anmeldeabläufe für die Anmeldung mit E-Mail-Adresse/Passwort, E-Mail-Link, Telefonauthentifizierung, Google, Facebook, Twitter und GitHub.
  • Kontoverknüpfung: Abläufe zum sicheren Verknüpfen von Nutzerkonten über Identitätsanbieter hinweg.
  • Anpassung: Überschreiben Sie die CSS-Stile von FirebaseUI, um sie an die Anforderungen Ihrer App anzupassen. Da FirebaseUI Open Source ist, können Sie das Projekt forken und genau an Ihre Anforderungen anpassen.
  • Registrierung mit nur einmal tippen und automatische Anmeldung – automatische Integration mit der Registrierung mit nur einmal tippen für eine schnelle geräteübergreifende Anmeldung.
  • Lokalisierte Benutzeroberfläche – Internationalisierung für über 40 Sprachen.
  • Upgrade für anonyme Nutzer durchführen: Anonyme Nutzer können sich anmelden oder registrieren, um ein Upgrade durchzuführen. Weitere Informationen finden Sie im Abschnitt zum Upgrade anonymer Nutzer.

Hinweis

  1. Firebase Authentication in Ihre Webanwendung einfügen. Achten Sie darauf, dass Sie die API mit Namensraum ab Version 9 verwenden (nicht die modulare API; siehe Seitenleiste oben).

  2. Binden Sie FirebaseUI über eine der folgenden Optionen ein:

    • CDN

      Fügen Sie die folgende Skript- und CSS-Datei auf Ihrer Seite in das Tag <head> unterhalb des Initialisierungs-Snippets aus der Firebase-Console ein:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    • npm-Modul

      Installieren Sie FirebaseUI und seine Abhängigkeiten über npm mit dem folgenden Befehl:

      $ npm install firebaseui --save

      require Sie die folgenden Module in Ihren Quelldateien:

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    • Bower-Komponente

      Installieren Sie FirebaseUI und seine Abhängigkeiten über Bower mit dem folgenden Befehl:

      $ bower install firebaseui --save

      Fügen Sie die erforderlichen Dateien in Ihren HTML-Code ein, wenn Ihr HTTP-Server die Dateien in bower_components/ bereitstellt:

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

FirebaseUI initialisieren

Nachdem Sie das SDK importiert haben, initialisieren Sie die Auth-Benutzeroberfläche.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Anmeldemethoden einrichten

Bevor Sie Firebase zum Anmelden von Nutzern verwenden können, müssen Sie die Anmeldemethoden aktivieren und konfigurieren, die Sie unterstützen möchten.

E-Mail-Adresse und Passwort

  1. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.

  2. Aktivieren Sie auf dem Tab Sign-in method (Anmeldemethode) den Anmeldeanbieter E-Mail/Passwort.

  3. Fügen Sie die E‑Mail-Anbieter-ID der Liste der FirebaseUI-signInOptions hinzu.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Optional: Für EmailAuthProvider kann konfiguriert werden, dass der Nutzer einen Anzeigenamen eingeben muss (Standardeinstellung: true).

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.

  2. Aktivieren Sie auf dem Tab Sign-in method (Anmeldemethode) den Anmeldeanbieter E-Mail/Passwort. Die Anmeldung mit E‑Mail-Adresse und Passwort muss aktiviert sein, damit die Anmeldung mit E‑Mail-Link verwendet werden kann.

  3. Aktivieren Sie im selben Bereich den Anmeldeanbieter E-Mail-Link (Anmeldung ohne Passwort).

  4. Klicken Sie auf Speichern.

  5. Fügen Sie die E‑Mail-Anbieter-ID der Liste der FirebaseUI-signInOptions zusammen mit dem E‑Mail-Link signInMethod hinzu.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  6. Wenn Sie die Anmelde-UI bedingt rendern (relevant für Single-Page-Apps), verwenden Sie ui.isPendingRedirect(), um zu erkennen, ob die URL einer Anmeldung mit E-Mail-Link entspricht und die UI gerendert werden muss, um die Anmeldung abzuschließen.

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  7. Optional: Die EmailAuthProvider für die Anmeldung über einen E-Mail-Link kann so konfiguriert werden, dass der Nutzer die geräteübergreifende Anmeldung abschließen darf oder nicht.

    Ein optionaler emailLinkSignIn-Callback kann definiert werden, um die firebase.auth.ActionCodeSettings-Konfiguration zurückzugeben, die beim Senden des Links verwendet werden soll. So können Sie angeben, wie der Link verarbeitet werden soll, z. B. mit einem benutzerdefinierten dynamischen Link oder zusätzlichem Status im Deeplink. Wenn kein Wert angegeben wird, wird die aktuelle URL verwendet und ein reiner Webablauf wird ausgelöst.

    Die Anmeldung per E-Mail-Link in FirebaseUI-Web ist mit FirebaseUI-Android und FirebaseUI-iOS kompatibel. Ein Nutzer, der den Ablauf in FirebaseUI-Android startet, kann den Link öffnen und die Anmeldung mit FirebaseUI-Web abschließen. Das Gleiche gilt für den umgekehrten Ablauf.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

OAuth-Anbieter (Google, Facebook, Twitter und GitHub)

  1. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.

  2. Aktivieren Sie auf dem Tab Anmeldemethode die Anmeldung mit dem angegebenen OAuth-Anbieter. Achten Sie darauf, dass auch die entsprechende OAuth-Client-ID und das entsprechende Secret angegeben sind.

  3. Autorisieren Sie die Domain Ihrer App, falls noch nicht geschehen:

    1. Rufen Sie in der Firebase-Konsole den Tab Einstellungen unter Sicherheit > Authentifizierung auf.

    2. Klicken Sie im Abschnitt Autorisierte Domains auf Domain hinzufügen und fügen Sie Ihre Domain hinzu.

  4. Fügen Sie die OAuth-Anbieter-ID der Liste der FirebaseUI-signInOptions hinzu.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  5. Optional: Wenn Sie benutzerdefinierte Gültigkeitsbereiche oder benutzerdefinierte OAuth-Parameter pro Anbieter angeben möchten, können Sie anstelle des Anbieterwerts ein Objekt übergeben:

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

Telefonnummer

  1. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.

  2. Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter für Anmeldungen Telefon.

  3. Autorisieren Sie die Domain Ihrer App, falls noch nicht geschehen:

    1. Rufen Sie in der Firebase-Konsole den Tab Einstellungen unter Sicherheit > Authentifizierung auf.

    2. Klicken Sie im Abschnitt Autorisierte Domains auf Domain hinzufügen und fügen Sie Ihre Domain hinzu.

  4. Fügen Sie die ID des Telefonnummernanbieters der Liste der FirebaseUI-signInOptions hinzu.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  5. Optional: Der PhoneAuthProvider kann mit benutzerdefinierten reCAPTCHA-Parametern konfiguriert werden, unabhängig davon, ob reCAPTCHA sichtbar oder unsichtbar ist (Standardeinstellung ist „normal“). Weitere Informationen finden Sie in der reCAPTCHA API-Dokumentation.

    Das Standardland, das bei der Eingabe der Telefonnummer ausgewählt werden soll, kann ebenfalls festgelegt werden. Eine vollständige Liste der Codes finden Sie in der Liste der unterstützten Ländercodes. Wenn nichts angegeben ist, wird standardmäßig die Telefonnummer der USA (+1) verwendet.

    Die folgenden Optionen werden derzeit unterstützt.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

Anmelden

Um den FirebaseUI-Anmeldevorgang zu starten, initialisieren Sie die FirebaseUI-Instanz, indem Sie die zugrunde liegende Auth-Instanz übergeben.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Definieren Sie das HTML-Element, in dem das FirebaseUI-Anmeldewidget gerendert werden soll.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

Geben Sie die FirebaseUI-Konfiguration an (unterstützte Anbieter und UI-Anpassungen sowie Erfolgs-Callbacks usw.).

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

Rendern Sie schließlich die FirebaseUI Auth-Oberfläche:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

Upgrade für anonyme Nutzer durchführen

Upgrade für anonyme Nutzer aktivieren

Wenn sich ein anonymer Nutzer mit einem permanenten Konto anmeldet oder registriert, soll er dort weitermachen können, wo er vor der Registrierung aufgehört hat. Dazu setzen Sie autoUpgradeAnonymousUsers einfach auf true, wenn Sie die Anmeldeoberfläche konfigurieren (diese Option ist standardmäßig deaktiviert).

Zusammenführungskonflikte bei Upgrades anonymer Nutzer beheben

Es gibt Fälle, in denen ein Nutzer, der sich anfangs anonym angemeldet hat, versucht, ein Upgrade auf einen vorhandenen Firebase-Nutzer durchzuführen. Da ein vorhandener Nutzer nicht mit einem anderen vorhandenen Nutzer verknüpft werden kann, löst FirebaseUI in diesem Fall den signInFailure-Callback mit dem Fehlercode firebaseui/anonymous-upgrade-merge-conflict aus. Das Fehlerobjekt enthält auch die dauerhaften Anmeldedaten. Die Anmeldung mit den permanenten Anmeldedaten sollte im Callback ausgelöst werden, um die Anmeldung abzuschließen. Bevor die Anmeldung über auth.signInWithCredential(error.credential) abgeschlossen werden kann, müssen Sie die Daten des anonymen Nutzers speichern und den anonymen Nutzer löschen. Kopieren Sie die Daten dann nach Abschluss der Anmeldung zurück zum nicht anonymen Nutzer. Das folgende Beispiel veranschaulicht, wie dieser Ablauf funktioniert.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

Nächste Schritte

  • Weitere Informationen zur Verwendung und Anpassung von FirebaseUI finden Sie in der README-Datei.
  • Wenn Sie ein Problem in FirebaseUI finden und es melden möchten, verwenden Sie die GitHub-Problemverfolgung.