Fügen Sie mit FirebaseUI ganz einfach die Anmeldung zu Ihrer Web-App hinzu

FirebaseUI ist eine Bibliothek, die auf dem Firebase Authentication SDK aufbaut und Drop-in-UI-Flows zur Verwendung in Ihrer App bereitstellt. FirebaseUI bietet die folgenden Vorteile:

  • Mehrere Anbieter – Anmeldeabläufe für E-Mail/Passwort, E-Mail-Link, Telefonauthentifizierung, Google-, Facebook-, Twitter- und GitHub-Anmeldung.
  • Kontoverknüpfung – Abläufe zur sicheren Verknüpfung von Benutzerkonten über Identitätsanbieter hinweg.
  • Anpassung – überschreiben Sie die CSS-Stile von FirebaseUI, um sie an Ihre App-Anforderungen anzupassen. Da FirebaseUI außerdem Open Source ist, können Sie das Projekt forken und genau an Ihre Bedürfnisse anpassen.
  • One-Tap-Anmeldung und automatische Anmeldung – automatische Integration mit One-Tap-Anmeldung für schnelle geräteübergreifende Anmeldung.
  • Lokalisierte Benutzeroberfläche – Internationalisierung für über 40 Sprachen .
  • Anonyme Benutzer aktualisieren – Möglichkeit, anonyme Benutzer durch Anmeldung/Registrierung zu aktualisieren. Weitere Informationen finden Sie im Abschnitt „Anonyme Benutzer aktualisieren“ .

Bevor Sie beginnen

  1. Fügen Sie Ihrer Webanwendung die Firebase-Authentifizierung hinzu und stellen Sie sicher, dass Sie das v9-kompatible (empfohlen) oder ältere SDK verwenden (siehe Seitenleiste oben).

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

    1. CDN

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

      <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" />
      
    2. npm-Modul

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

      $ npm install firebaseui --save
      

      require die folgenden Module in Ihren Quelldateien:

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. 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

Initialisieren Sie nach dem Import des SDK 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 Benutzern verwenden können, müssen Sie die Anmeldemethoden aktivieren und konfigurieren, die Sie unterstützen möchten.

E-Mail-Adresse und Passwort

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt „Authentifizierung“ und aktivieren Sie die E-Mail- und Passwort-Authentifizierung.

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

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. Optional : Der EmailAuthProvider kann so konfiguriert werden, dass der Benutzer einen Anzeigenamen eingeben muss (standardmäßig true ).

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung . Aktivieren Sie auf der Registerkarte Anmeldemethode den E-Mail-/Passwort- Anbieter. Beachten Sie, dass die E-Mail-/Passwort-Anmeldung aktiviert sein muss, um die E-Mail-Link-Anmeldung zu verwenden.

  2. Aktivieren Sie im selben Abschnitt die Anmeldemethode „E-Mail-Link (passwortlose Anmeldung)“ und klicken Sie auf „Speichern“ .

  3. Fügen Sie die E-Mail-Anbieter-ID zusammen mit dem E-Mail-Link signInMethod zur Liste der FirebaseUI signInOptions 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...
    });
    
  4. Wenn Sie die Anmelde-Benutzeroberfläche bedingt rendern (relevant für Einzelseiten-Apps), verwenden Sie ui.isPendingRedirect() , um zu erkennen, ob die URL einer Anmeldung mit E-Mail-Link entspricht und die Benutzeroberfläche 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);
    }
    
  5. Optional : Der EmailAuthProvider für die E-Mail-Link-Anmeldung kann so konfiguriert werden, dass der Benutzer die geräteübergreifende Anmeldung zulässt oder blockiert.

    Ein optionaler emailLinkSignIn Rückruf kann definiert werden, um die firebase.auth.ActionCodeSettings -Konfiguration zurückzugeben, die beim Senden des Links verwendet werden soll. Dies bietet die Möglichkeit anzugeben, wie mit dem Link umgegangen werden soll, einen benutzerdefinierten dynamischen Link, einen zusätzlichen Status im Deep-Link usw. festzulegen. Wenn keine Angabe erfolgt, wird die aktuelle URL verwendet und ein reiner Web-Flow ausgelöst.

    Die E-Mail-Link-Anmeldung in FirebaseUI-web ist mit FirebaseUI-Android und FirebaseUI-iOS kompatibel, wobei ein Benutzer, der den Flow über FirebaseUI-Android startet, den Link öffnen und die Anmeldung mit FirebaseUI-web abschließen kann. Dasselbe gilt auch für den umgekehrten Fluss.

    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. Öffnen Sie in der Firebase-Konsole den Abschnitt „Authentifizierung“ und aktivieren Sie die Anmeldung beim angegebenen OAuth-Anbieter. Stellen Sie sicher, dass auch die entsprechende OAuth-Client-ID und das entsprechende Geheimnis angegeben sind.

  2. Stellen Sie außerdem im Abschnitt „Authentifizierung“ sicher, dass die Domäne, in der Ihre Anmeldeseite gerendert wird, auch zur Liste der autorisierten Domänen hinzugefügt wird.

  3. Fügen Sie die OAuth-Anbieter-ID zur Liste von 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...
    });
    
  4. Optional : Um benutzerdefinierte Bereiche oder benutzerdefinierte OAuth-Parameter pro Anbieter anzugeben, können Sie ein Objekt anstelle nur des Anbieterwerts ü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. Öffnen Sie in der Firebase-Konsole den Abschnitt „Authentifizierung“ und aktivieren Sie die Anmeldung per Telefonnummer.

  2. Stellen Sie sicher, dass die Domäne, in der Ihre Anmeldeseite gerendert wird, auch zur Liste der autorisierten Domänen hinzugefügt wird.

  3. Fügen Sie die Telefonnummernanbieter-ID zur Liste von FirebaseUI signInOptions hinzu.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Optional : Der PhoneAuthProvider kann mit benutzerdefinierten reCAPTCHA-Parametern konfiguriert werden, unabhängig davon, ob reCAPTCHA sichtbar oder unsichtbar ist (standardmäßig normal). Weitere Informationen finden Sie in den reCAPTCHA-API-Dokumenten .

    Es kann auch das Standardland festgelegt werden, das bei der Telefonnummerneingabe ausgewählt werden soll. Die vollständige Liste der Codes finden Sie in der Liste der unterstützten Ländercodes . Wenn keine Angabe erfolgt, wird als Telefonnummer standardmäßig die USA (+1) eingegeben.

    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-Anmelde-Widget gerendert wird.

<!-- 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 Erfolgsrückrufe 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 abschließend die FirebaseUI-Auth-Schnittstelle:

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

Anonyme Benutzer aktualisieren

Anonymes Benutzer-Upgrade aktivieren

Wenn sich ein anonymer Benutzer mit einem dauerhaften Konto anmeldet oder registriert, möchten Sie sicherstellen, dass der Benutzer mit dem fortfahren kann, was er vor der Registrierung getan hat. Setzen Sie dazu einfach autoUpgradeAnonymousUsers auf true , wenn Sie die Anmeldeoberfläche konfigurieren (diese Option ist standardmäßig deaktiviert).

Umgang mit Konflikten bei der Zusammenführung anonymer Benutzer-Upgrades

Es gibt Fälle, in denen ein zunächst anonym angemeldeter Benutzer versucht, ein Upgrade auf einen vorhandenen Firebase-Benutzer durchzuführen. Da ein vorhandener Benutzer nicht mit einem anderen vorhandenen Benutzer verknüpft werden kann, löst FirebaseUI in diesem Fall den signInFailure Rückruf mit dem Fehlercode firebaseui/anonymous-upgrade-merge-conflict aus. Das Fehlerobjekt enthält auch die permanenten Anmeldeinformationen. Die Anmeldung mit den permanenten Anmeldeinformationen sollte im Rückruf 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 Benutzers speichern und den anonymen Benutzer löschen. Kopieren Sie dann nach Abschluss der Anmeldung die Daten zurück an den nicht anonymen Benutzer. Ein Beispiel unten veranschaulicht, wie dieser Ablauf funktionieren würde.

// 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 den GitHub Issue Tracker .