Fügen Sie Ihrer Web-App mit FirebaseUI ganz einfach eine Anmeldung 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 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 eine schnelle geräteübergreifende Anmeldung.
  • Lokalisierte UI - Internationalisierung für über 40 Sprachen .
  • Anonyme Benutzer aktualisieren – Möglichkeit, anonyme Benutzer durch Anmeldung/Registrierung zu aktualisieren. Weitere Informationen finden Sie im Abschnitt Aktualisieren anonymer Benutzer .

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. 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-Konsole 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" />

    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 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" />

Initialisieren Sie FirebaseUI

Initialisieren Sie nach dem Importieren 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 Kennwortauthentifizierung.

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

    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-/Kennwortanbieter . Beachten Sie, dass die Anmeldung per E-Mail/Passwort aktiviert sein muss, um die Anmeldung per E-Mail-Link zu verwenden.

  2. Aktivieren Sie im selben Abschnitt die Anmeldemethode E-Mail-Link (kennwortlose 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. Verwenden Sie beim bedingten Rendern der Anmelde-UI (relevant für Einzelseiten-Apps) 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);
}

  5. Optional : Der EmailAuthProvider für die Anmeldung per E-Mail-Link kann so konfiguriert werden, dass der Benutzer die geräteübergreifende Anmeldung zulässt oder blockiert.

    Ein optionaler emailLinkSignIn Callback 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 der Link gehandhabt werden kann, einen benutzerdefinierten dynamischen Link, einen zusätzlichen Status im Deep-Link usw. Wenn nicht angegeben, wird die aktuelle URL verwendet und ein Nur-Web-Fluss ausgelöst.

    Die E-Mail-Link-Anmeldung in FirebaseUI-Web ist mit FirebaseUI-Android und FirebaseUI-iOS kompatibel, wobei ein Benutzer, der den Flow von FirebaseUI-Android aus startet, den Link öffnen und die Anmeldung mit FirebaseUI-Web abschließen kann. Dasselbe 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. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung und aktivieren Sie die Anmeldung des angegebenen OAuth-Anbieters. Stellen Sie sicher, dass die entsprechende OAuth-Client-ID und das Geheimnis ebenfalls angegeben sind.

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

  3. Fügen Sie die OAuth-Anbieter-ID zur Liste von 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 : Um benutzerdefinierte Bereiche oder benutzerdefinierte OAuth-Parameter pro Anbieter anzugeben, können Sie ein Objekt statt 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, auf der Ihre Anmeldeseite gerendert wird, auch zur Liste der autorisierten Domänen hinzugefügt wird.

  3. Fügen Sie die ID des Telefonnummernanbieters zur Liste von FirebaseUI signInOptions .

    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, ob reCAPTCHA sichtbar oder unsichtbar ist (standardmäßig normal). Weitere Informationen finden Sie in der reCAPTCHA-API-Dokumentation .

    Das Standardland zur Auswahl bei der Telefonnummerneingabe kann ebenfalls eingestellt werden. Die vollständige Liste der Codes finden Sie in der Liste der unterstützten Ländercodes. Wenn nicht angegeben, wird die Telefonnummer standardmäßig in die Vereinigten Staaten (+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

Um den FirebaseUI-Anmeldeablauf zu starten, initialisieren Sie die FirebaseUI-Instanz, indem Sie die zugrunde liegende Auth ü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 schließlich die FirebaseUI Auth-Schnittstelle:

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

Aktualisieren anonymer Benutzer

Upgrade für anonyme Benutzer aktivieren

Wenn sich ein anonymer Benutzer anmeldet oder sich mit einem permanenten Konto anmeldet, möchten Sie sicher sein, dass der Benutzer mit dem fortfahren kann, was er vor der Anmeldung getan hat. Legen Sie dazu einfach autoUpgradeAnonymousUsers auf true fest, wenn Sie die Anmeldebenutzeroberfläche konfigurieren (diese Option ist standardmäßig deaktiviert).

Behandeln von Zusammenführungskonflikten bei Upgrades anonymer Benutzer

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 den signInFailure Callback mit einem Fehlercode firebaseui/anonymous-upgrade-merge-conflict aus, wenn der oben genannte Fall eintritt. Das Fehlerobjekt enthält auch den permanenten Berechtigungsnachweis. 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 zeigt, 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 .
  • Wenn Sie ein Problem in FirebaseUI finden und es melden möchten, verwenden Sie den GitHub Issue Tracker .