Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

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

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

  • Mehrere Anbieter - Anmeldeflüsse für E-Mail / Passwort, E-Mail-Link, Telefonauthentifizierung, Google-, Facebook-, Twitter- und GitHub-Anmeldung.
  • Kontoverknüpfung - Flows zur sicheren Verknüpfung von Benutzerkonten zwischen Identitätsanbietern.
  • Anpassung - Überschreiben Sie die CSS-Stile von FirebaseUI, um Ihren App-Anforderungen zu entsprechen. Da FirebaseUI Open Source ist, können Sie das Projekt auch verzweigen 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 .
  • Aktualisieren anonymer Benutzer - Möglichkeit, anonyme Benutzer durch Anmelden / Anmelden zu aktualisieren. Weitere Informationen finden Sie im Abschnitt Aktualisieren anonymer Benutzer .

Bevor Sie beginnen

  1. Fügen Sie Ihrer Webanwendung die Firebase-Authentifizierung hinzu .

  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 unterhalb des Initialisierungsausschnitts aus der Firebase-Konsole ein:

      <script src="https://www.gstatic.com/firebasejs/ui/4.8.0/firebase-ui-auth.js"></script>
      <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.8.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. Laubenkomponente

      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- bower_components/ , wenn Ihr HTTP-Server die 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" />
      

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());

Richten Sie Anmeldemethoden ein

Bevor Sie Benutzer mit Firebase anmelden 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 der 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 . Auf dem Anmelden Methode Registerkarte, aktivieren Sie den E - Mail / Passwort - Anbieter. Beachten Sie, dass die E-Mail- / Kennwortanmeldung aktiviert sein muss, um die E-Mail-Linkanmeldung verwenden zu können.

  2. Aktivieren Sie im selben Abschnitt die Anmeldemethode für den 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 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. Verwenden ui.isPendingRedirect() beim bedingten Rendern der Anmelde-Benutzeroberfläche (relevant für Apps mit nur einer Seite) ui.isPendingRedirect() um festzustellen, 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 EmailAuthProvider oder blockieren kann.

    Ein optionaler emailLinkSignIn Rückruf kann definiert werden , um die Rückkehr firebase.auth.ActionCodeSettings Konfiguration zu verwenden , wenn die Verbindung zu senden. Auf diese Weise können Sie festlegen, wie der Link behandelt werden soll, einen benutzerdefinierten dynamischen Link, einen zusätzlichen Status im Deep Link usw. Wenn dies nicht angegeben wird, wird die aktuelle URL verwendet und ein Nur-Web-Flow wird ausgelöst.

    Die Anmeldung für E-Mail-Links in FirebaseUI-web ist mit FirebaseUI-Android und FirebaseUI-iOS kompatibel. Ein Benutzer, der den Flow von FirebaseUI-Android startet, kann den Link öffnen und die Anmeldung mit FirebaseUI-web abschließen. Gleiches 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 auch die entsprechende OAuth-Client-ID und das Geheimnis angegeben sind.

  2. Stellen Sie außerdem im Abschnitt Authentifizierung sicher, dass die Domain, in der Ihre Anmeldeseite gerendert wird, ebenfalls zur Liste der autorisierten Domains hinzugefügt wird.

  3. Fügen Sie die OAuth-Provider-ID zur 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 : 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 für die Telefonnummer.

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

  3. Fügen Sie die ID des Telefonnummernanbieters zur Liste der 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, unabhängig davon, ob reCAPTCHA sichtbar oder unsichtbar ist (standardmäßig normal). Weitere Informationen finden Sie in den reCAPTCHA-API-Dokumenten .

    Das Standardland, das bei der Eingabe der Telefonnummer ausgewählt werden soll, kann ebenfalls festgelegt 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 den USA eingegeben (+1).

    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

Initialisieren Sie die FirebaseUI-Instanz, indem Sie die zugrunde liegende Auth Instanz übergeben, um den FirebaseUI-Anmeldefluss zu starten.

// 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 Benutzeroberflächenanpassungen sowie erfolgreiche Rü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-Authentifizierungsoberfläche:

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

Anonyme Benutzer aktualisieren

Aktivieren eines anonymen Benutzer-Upgrades

Wenn sich ein anonymer Benutzer anmeldet oder sich mit einem permanenten Konto anmeldet, möchten Sie sicher sein, dass der Benutzer vor der Anmeldung mit seinen Aktivitäten fortfahren kann. Setzen autoUpgradeAnonymousUsers dazu einfach autoUpgradeAnonymousUsers auf true wenn Sie die Anmelde-Benutzeroberfläche konfigurieren (diese Option ist standardmäßig deaktiviert).

Umgang mit Zusammenführungskonflikten bei anonymen Benutzeraktualisierungen

Es gibt Fälle, in denen ein Benutzer, der ursprünglich anonym angemeldet war, 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 Rückruf mit einem Fehlercode firebaseui/anonymous-upgrade-merge-conflict wenn das oben signInFailure auftritt. Das Fehlerobjekt enthält auch den permanenten Berechtigungsnachweis. Die Anmeldung mit dem permanenten Berechtigungsnachweis sollte im Rückruf ausgelöst werden, um die Anmeldung abzuschließen. Bevor die Anmeldung über auth.signInWithCredential(error.credential) werden kann, müssen Sie die Daten des anonymen Benutzers speichern und den anonymen Benutzer löschen. Kopieren Sie die Daten nach Abschluss der Anmeldung zurück auf 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-Datei .
  • Wenn Sie ein Problem in FirebaseUI finden und es melden möchten, verwenden Sie den GitHub-Issue-Tracker .