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

FirebaseUI ist eine Bibliothek auf der SDK Firebase Authentifizierung aufgebaut , die Drop-in - UI bietet die Verwendung in Ihrer Anwendung fließt für. FirebaseUI bietet die folgenden Vorteile:

  • Mehrere Provider - Anmelde-Flows für E - Mail / Passwort, E - Mail - Link, Telefon - Authentifizierung, Google, Facebook, Twitter und GitHub-Anmeldung.
  • Kontoverknüpfung - fließt , um sicher Link Benutzerkonten über Identity - Provider.
  • Anpassung - Überschreibung CSS - Stile von FirebaseUI , um Ihre Anwendung Anforderungen zu entsprechen. Da FirebaseUI Open Source ist, können Sie das Projekt außerdem verzweigen und genau an Ihre Bedürfnisse anpassen.
  • Ein-Tap - Sign-up und die automatische Anmeldung in - automatischer Integration mit One-Tap - Sign-up für schnelle Cross-Device-Anmeldung.
  • Lokalisierte UI - Internationalisierung für mehr als 40 Sprachen .
  • Aktualisieren von anonymen Benutzern - Fähigkeit anonymen Benutzer durch Sign-in / sign-up zu aktualisieren. Weitere Informationen finden Sie auf die Upgrade anonymen Benutzer Abschnitt .

Bevor Sie beginnen

  1. In Firebase - Authentifizierung auf Ihre Web - Anwendung .

  2. Schließen 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 unter dem Initialisierungs-Snippet aus der Firebase Console ein:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.0/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.0/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 gewünschten Dateien in Ihrem HTML, wenn Ihr HTTP - Server dient dazu , die Dateien innerhalb bower_components/ :

      <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 zu unterstützenden Anmeldemethoden aktivieren und konfigurieren.

E-Mail-Adresse und Passwort

  1. In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und E - Mail und Passwort - Authentifizierung aktivieren.

  2. Fügen Sie die E - Mail - Provider - ID in der Liste der FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. Optional: Die EmailAuthProvider konfiguriert werden kann , um den Benutzer erfordern einen Anzeigenamen (Standardeinstellung eingeben true ).

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. In der Firebase Konsole öffnen den Abschnitt Authentication. Auf dem Anmelden Methode Registerkarte, aktivieren Sie 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. Im selben Abschnitt aktivieren E - Mail - Link ( ohne Passwort-Anmeldung) Anmelde-Methode und klicken Sie auf Speichern.

  3. Fügen Sie die E - Mail - Provider - ID in der Liste der FirebaseUI signInOptions zusammen mit dem E - Mail - Link signInMethod .

    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. Beim Rendern der Anmelde-UI bedingt (relevant für einzelne Seite Apps), verwendet ui.isPendingRedirect() zu erkennen , ob die URL entspricht eine Anmelde-E - Mail mit Link und die UI Bedürfnisse kompletten Anmelde-gerendert werden.

    // 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: Die EmailAuthProvider für E - Mail - Link-Anmeldung können die Benutzer zu erlauben oder zu blockieren Abschluss Quer Gerät Sign-in konfiguriert werden.

    Ein optionaler emailLinkSignIn Rückruf kann definiert werden , um die Rückkehr firebase.auth.ActionCodeSettings Konfiguration zu verwenden , wenn die Verbindung zu senden. Dies bietet die Möglichkeit, anzugeben, wie der Link gehandhabt werden kann, benutzerdefinierter dynamischer Link, zusätzlicher Status im Deep-Link usw. Wenn nicht angegeben, wird die aktuelle URL verwendet und ein reiner Web-Flow ausgelöst.

    E - Mail - Link-Anmeldung in FirebaseUI-web ist kompatibel mit FirebaseUI-Android und FirebaseUI-iOS , wo ein Benutzer den Fluss von FirebaseUI-Android starten kann den Link öffnen und vollständige Anmeldung in FirebaseUI-web. Das gleiche gilt für den Gegenstrom.

    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. In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und aktivieren Sie die angegebenen OAuth - Provider-Anmeldung. Stellen Sie sicher, dass auch die entsprechende OAuth-Client-ID und das Geheimnis angegeben sind.

  2. Auch im Abschnitt Authentifizierung, stellen Sie sicher , die Domäne , in der Anmelde-Seite gerendert wird auch an die autorisierten Domänen - Liste hinzugefügt.

  3. Fügen Sie die OAuth - Anbieter - ID in der Liste der FirebaseUI signInOptions .

    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: Wenn Sie benutzerdefinierte Bereiche oder benutzerdefinierte OAuth Parameter pro Anbieter angeben, können Sie ein Objekt statt nur der Anbieter Wert ü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. In der Firebase Konsole , öffnen Sie den Abschnitt Authentifizierung und Telefonnummer-Anmeldung aktivieren.

  2. Stellen Sie sicher, dass die Domain, auf der Ihre Anmeldeseite gerendert wird, auch zur Liste der autorisierten Domains hinzugefügt wird.

  3. Fügen Sie die Telefonnummer Provider - ID in die Liste der FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Optional: Die PhoneAuthProvider können mit benutzerdefinierten reCAPTCHA Parametern konfiguriert werden , ob reCAPTCHA sichtbar oder unsichtbar (Standard : normal) ist. Siehe die reCAPTCHA API - Dokumentation für weitere Details.

    Das Standardland zur Auswahl bei der Rufnummerneingabe kann ebenfalls eingestellt werden. Finden Sie in der Liste der unterstützten Ländercodes für die vollständige Liste der Codes. Wenn keine Angabe gemacht wird, 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'
        }
      ]
    });
    

Einloggen

Zum Auftakt der FirebaseUI Zeichen in Fluss, initialisieren Sie die FirebaseUI Instanz durch die zugrunde liegende vorbei Auth - Instanz.

// 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 schließlich die FirebaseUI Auth-Schnittstelle:

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

Upgrade anonymer Benutzer

Aktivieren des anonymen Benutzer-Upgrades

Wenn sich ein anonymer Benutzer mit einem permanenten Konto anmeldet oder anmeldet, möchten Sie sicherstellen, dass der Benutzer mit dem fortfahren kann, was er vor der Anmeldung getan hat. Um dies zu tun, geben Sie einfach autoUpgradeAnonymousUsers zu true , wenn Sie die Anmelde-Benutzeroberfläche konfigurieren (diese Option ist standardmäßig deaktiviert).

Umgang mit Zusammenführungskonflikten bei anonymen Benutzer-Upgrades

Es gibt Fälle, in denen ein ursprünglich anonym angemeldeter Benutzer versucht, ein Upgrade auf einen vorhandenen Firebase-Benutzer durchzuführen. Da ein bestehender Benutzer kann nicht auf einen anderen bestehenden Benutzer verknüpft werden, FirebaseUI wird der Trigger signInFailure Rückruf mit einem Fehlercode firebaseui/anonymous-upgrade-merge-conflict , wenn die oben auftritt. 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. Vor-Anmeldung kann über abgeschlossen sein auth.signInWithCredential(error.credential) , müssen Sie den anonymen Benutzerdaten 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 über die Verwendung und Anpassung FirebaseUI finden Sie auf der Readme .
  • Wenn Sie ein Problem in FirebaseUI finden und möchte es berichten, verwenden Sie die GitHub issue tracker .