Mit FirebaseUI ganz einfach Anmeldeinformationen zu Ihrer Webanwendung hinzufügen

FirebaseUI ist eine Bibliothek, die auf des Firebase Authentication SDK, das Drop-in-UI-Abläufe für die Verwendung in für Ihre App. FirebaseUI bietet folgende Vorteile:

  • Mehrere Anbieter – Anmeldeverfahren für E-Mail-Adresse/Passwort, E-Mail-Link, Telefon Authentifizierung, Google-, Facebook-, Twitter- und GitHub-Anmeldung.
  • Kontoverknüpfung: Abläufe zum sicheren Verknüpfen von Nutzerkonten über Identitätsanbieter hinweg.
  • Anpassung: CSS-Stile von FirebaseUI überschreiben, damit sie zu Ihrer App passen Anforderungen. Da FirebaseUI Open Source ist, können Sie Projekt erstellen und es genau an Ihre Bedürfnisse anpassen.
  • Registrierung mit nur einem Tippen und automatische Anmeldung – automatische Integration mit Mit nur einem Tippen registrieren für eine schnelle geräteübergreifende Anmeldung.
  • Lokalisierte Benutzeroberfläche: Internationalisierung für über 40 Sprachen.
  • Upgrade für anonyme Nutzer ausführen – Möglichkeit zum Upgrade für anonyme Nutzer mit Anmeldung/Anmeldung. Weitere Informationen finden Sie unter Upgrade für anonyme Nutzer ausführen .

Hinweis

  1. Fügen Sie Ihrer Webanwendung Firebase Authentication hinzu. Verwenden Sie dabei die Version 9 (empfohlen) oder ein älteres SDK (siehe Seitenleiste oben).

  2. Fügen Sie FirebaseUI über eine der folgenden Optionen hinzu:

    1. CDN

      Fügen Sie das folgende Skript und die folgende CSS-Datei in den <head>-Abschnitt ein: Tag von Ihrer Seite unter dem Initialisierungs-Snippet aus der Firebase Console hinzu:

      <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 die zugehörigen Abhängigkeiten über npm mit dem folgenden Befehl: Befehl:

      $ npm install firebaseui --save

      require die folgenden Module in Ihre Quelldateien:

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

    3. Bower-Komponente

      Installieren Sie FirebaseUI und die zugehörigen 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 Dateien in 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

Initialisieren Sie nach dem Importieren des SDK die Auth-UI.

// 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 die Sie unterstützen möchten.

E-Mail-Adresse und Passwort

  1. Öffnen Sie in der Firebase-Konsole den Bereich Authentifizierung und aktivieren Sie E-Mail- und Passwort-Authentifizierung.

  2. 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...
});

  3. Optional: Die EmailAuthProvider kann so konfiguriert werden, dass der Nutzer , um einen Anzeigenamen einzugeben (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. Am Tab Sign in method (Anmeldemethode) den Anbieter E-Mail/Passwort ein. Hinweis Die Anmeldung mit E-Mail-Adresse und Passwort muss aktiviert sein, damit die Anmeldung per E-Mail-Link verwendet werden kann.

  2. Aktivieren Sie im selben Abschnitt die Anmeldung über E-Mail-Link (Anmeldung ohne Passwort). und klicken Sie auf Speichern.

  3. Fügen Sie die E-Mail-Anbieter-ID der Liste mit FirebaseUI signInOptions hinzu über den 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 bedingten Rendern der Anmelde-UI (relevant für Single-Page-Apps) ui.isPendingRedirect() verwenden, um festzustellen, ob die URL einer Anmeldung entspricht mit E-Mail-Link und die Benutzeroberfläche muss gerendert werden, 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: Die EmailAuthProvider für die Anmeldung über einen E-Mail-Link kann so konfiguriert werden, dass die geräteübergreifende Anmeldung für den Nutzer zugelassen oder blockiert wird.

    Ein optionaler emailLinkSignIn-Callback kann definiert werden, um den Parameter firebase.auth.ActionCodeSettings Konfiguration, die beim Senden des Links verwendet werden soll. Dadurch haben Sie die Möglichkeit, Angeben, wie der Link verarbeitet werden kann, benutzerdefinierter dynamischer Link, zusätzlicher Status im Deeplink usw. Wenn keine Angabe erfolgt, wird die aktuelle URL verwendet und eine Web-URL nur der Fluss ausgelöst wird.

    Anmeldung per E-Mail-Link in FirebaseUI-web ist kompatibel mit FirebaseUI für Android und FirebaseUI für iOS Ein Nutzer, der den Ablauf von FirebaseUI-Android aus startet, kann den Link und schließen Sie die Anmeldung mit FirebaseUI-web ab. Das 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 Console den Bereich Authentifizierung und aktivieren Sie die Anmeldung über den angegebenen OAuth-Anbieter. Die entsprechende OAuth-Client-ID und das entsprechende Secret müssen ebenfalls angegeben werden.

  2. Achten Sie außerdem darauf, dass Sie im Bereich Authentication (Authentifizierung) die Domain angeben, in der Ihr .

  3. Füge 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...
});

  4. Optional: Hier können Sie benutzerdefinierte Bereiche oder benutzerdefinierte OAuth-Parameter pro können Sie ein Objekt anstelle des Werts für den Anbieter ü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 Bereich Authentifizierung und aktivieren Sie Telefonnummer anmelden.

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

  3. Fügen Sie die Anbieter-ID der Telefonnummer der Liste der FirebaseUI signInOptions hinzu.

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

  4. Optional: PhoneAuthProvider kann mit benutzerdefiniertem reCAPTCHA konfiguriert werden -Parameter, ob reCAPTCHA sichtbar oder unsichtbar ist (standardmäßig auf "Normal" eingestellt). Weitere Informationen finden Sie in der reCAPTCHA API-Dokumentation.

    Es kann auch das Standardland festgelegt werden, das bei der Eingabe der Telefonnummer ausgewählt wird. Weitere Informationen finden Sie in der Liste der unterstützten Ländercodes finden Sie eine vollständige Liste der Codes. Wenn keine Angabe gemacht wird, wird die Telefonnummer standardmäßig für 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 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>

FirebaseUI-Konfiguration angeben (unterstützte Anbieter und UI-Anpassungen) 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);

Upgrade für anonyme Nutzer ausführen

Anonymes Nutzerupgrade aktivieren

Wenn sich ein anonymer Nutzer anmeldet oder ein dauerhaftes Konto hat, möchten Sie um sicherzustellen, dass der Nutzer vor der Registrierung weitermachen kann. Setzen Sie dazu bei der Konfiguration einfach autoUpgradeAnonymousUsers auf true Über die Anmeldeoberfläche (diese Option ist standardmäßig deaktiviert).

Umgang mit Konflikten beim Zusammenführen von Upgrades für anonyme Nutzer

Es kann vorkommen, dass ein Nutzer, der ursprünglich anonym angemeldet ist, versucht, ein Upgrade durchzuführen. für einen vorhandenen Firebase-Nutzer. Da ein vorhandener Nutzer nicht mit einem anderen verknüpft werden kann, vorhandenen Nutzer haben, löst FirebaseUI den signInFailure-Callback mit einer Fehlercode firebaseui/anonymous-upgrade-merge-conflict, wenn der oben beschriebene Fehler auftritt. Das Fehlerobjekt enthält auch die dauerhaften Anmeldedaten. Anmelden mit dem permanente Anmeldedaten sollten im Callback ausgelöst werden, um die Anmeldung abzuschließen. Bevor die Anmeldung abgeschlossen werden kann über auth.signInWithCredential(error.credential), Sie müssen die anonymen Daten speichern Nutzerdaten löschen und den anonymen Nutzer löschen. Nach Abschluss der Anmeldung kannst du Daten an den nicht anonymen Nutzer zurückgegeben. Ein Beispiel zeigt, wie dies User Flow 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 zum Verwenden und Anpassen von FirebaseUI finden Sie in der README-Datei.
  • Wenn Sie auf ein Problem in FirebaseUI stoßen und es melden möchten, verwenden Sie die GitHub-Problemverfolgung