Google is committed to advancing racial equity for Black communities. See how.
Diese Seite wurde von der Cloud Translation API übersetzt.
Switch to English

Authentifizieren Sie sich mit Firebase mit einer Telefonnummer unter Verwendung von JavaScript

Mit der Firebase-Authentifizierung können Sie einen Benutzer anmelden, indem Sie eine SMS an das Telefon des Benutzers senden. Der Benutzer meldet sich mit einem in der SMS-Nachricht enthaltenen Einmalcode an.

Der einfachste Weg, Ihrer App eine Telefonnummernanmeldung hinzuzufügen, ist die Verwendung von FirebaseUI , das ein Drop-In-Anmelde-Widget enthält, das Anmeldeflüsse für die Telefonnummernanmeldung sowie kennwortbasierte und Verbundanmeldungen implementiert -im. In diesem Dokument wird beschrieben, wie Sie einen Anmeldefluss für Telefonnummern mithilfe des Firebase SDK implementieren.

Bevor Sie beginnen

Wenn Sie dies noch nicht getan haben, kopieren Sie das Initialisierungs-Snippet von der Firebase-Konsole in Ihr Projekt, wie unter Hinzufügen von Firebase zu Ihrem JavaScript-Projekt beschrieben .

Sicherheitsbedenken

Die Authentifizierung nur mit einer Telefonnummer ist zwar praktisch, aber weniger sicher als die anderen verfügbaren Methoden, da der Besitz einer Telefonnummer leicht zwischen Benutzern übertragen werden kann. Auf Geräten mit mehreren Benutzerprofilen kann sich jeder Benutzer, der SMS-Nachrichten empfangen kann, unter Verwendung der Telefonnummer des Geräts bei einem Konto anmelden.

Wenn Sie in Ihrer App eine auf Telefonnummern basierende Anmeldung verwenden, sollten Sie diese zusammen mit sichereren Anmeldemethoden anbieten und die Benutzer über die Sicherheitsmängel bei der Verwendung der Telefonnummernanmeldung informieren.

Aktivieren Sie die Anmeldung für die Telefonnummer für Ihr Firebase-Projekt

Um Benutzer per SMS anzumelden, müssen Sie zuerst die Anmeldemethode für die Telefonnummer für Ihr Firebase-Projekt aktivieren:

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung .
  2. Auf der Sign-in - Methode Seite, aktivieren Sie die Telefonnummer Anmelde-Verfahren.
  3. Fügen Sie auf derselben Seite Ihre Domain hinzu, wenn die Domain, in der Ihre App gehostet wird, nicht im Abschnitt OAuth-Umleitungsdomänen aufgeführt ist.

Das Anmeldeanforderungskontingent für die Telefonnummer von Firebase ist hoch genug, damit die meisten Apps nicht betroffen sind. Wenn Sie jedoch eine sehr große Anzahl von Benutzern mit Telefonauthentifizierung anmelden müssen, müssen Sie möglicherweise Ihren Preisplan aktualisieren. Siehe die Preisseite .

Richten Sie den reCAPTCHA-Prüfer ein

Bevor Sie Benutzer mit ihren Telefonnummern anmelden können, müssen Sie den reCAPTCHA-Verifizierer von Firebase einrichten. Firebase verwendet reCAPTCHA, um Missbrauch zu verhindern, z. B. indem sichergestellt wird, dass die Anforderung zur Überprüfung der Telefonnummer von einer der zulässigen Domänen Ihrer App stammt.

Sie müssen einen reCAPTCHA-Client nicht manuell einrichten. Wenn Sie das RecaptchaVerifier Objekt des Firebase SDK RecaptchaVerifier , erstellt und verarbeitet Firebase automatisch alle erforderlichen RecaptchaVerifier und RecaptchaVerifier .

Das RecaptchaVerifier Objekt unterstützt unsichtbares reCAPTCHA , mit dem der Benutzer häufig überprüft werden kann, ohne dass eine Benutzeraktion erforderlich ist, sowie das reCAPTCHA-Widget, für dessen erfolgreiche RecaptchaVerifier immer eine Benutzerinteraktion erforderlich ist.

Das zugrunde liegende gerenderte reCAPTCHA kann nach den Wünschen des Benutzers lokalisiert werden, indem der Sprachcode in der Auth-Instanz aktualisiert wird, bevor das reCAPTCHA gerendert wird. Die oben genannte Lokalisierung gilt auch für die an den Benutzer gesendete SMS-Nachricht, die den Bestätigungscode enthält.

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Verwenden Sie unsichtbares reCAPTCHA

Um einen unsichtbaren reCAPTCHA zu verwenden, erstellen Sie ein RecaptchaVerifier Objekt mit der size Parametersatz invisible , die ID der Schaltfläche angeben , die Ihre Anmelde-Formular abschickt. Zum Beispiel:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

Verwenden Sie das reCAPTCHA-Widget

Um das sichtbare reCAPTCHA-Widget zu verwenden, erstellen Sie auf Ihrer Seite ein Element, das das Widget enthält, und erstellen RecaptchaVerifier dann ein RecaptchaVerifier Objekt, in dem Sie die ID des Containers RecaptchaVerifier . Zum Beispiel:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

Optional: Geben Sie die reCAPTCHA-Parameter an

Sie können optional Rückruffunktionen für das RecaptchaVerifier Objekt RecaptchaVerifier , die aufgerufen werden, wenn der Benutzer das reCAPTCHA löst oder das reCAPTCHA abläuft, bevor der Benutzer das Formular RecaptchaVerifier :

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': function(response) {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': function() {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

Optional: Rendern Sie das reCAPTCHA vorab

Wenn Sie das reCAPTCHA vor dem Senden einer Anmeldeanforderung vorab rendern möchten, rufen Sie render :

recaptchaVerifier.render().then(function(widgetId) {
  window.recaptchaWidgetId = widgetId;
});

Nach dem render Entschlüssen, erhalten Sie das Widget - IDs reCAPTCHA, mit dem Sie telefonieren zum verwenden können reCAPTCHA API:

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

Senden Sie einen Bestätigungscode an das Telefon des Benutzers

Um die Anmeldung der Telefonnummer zu initiieren, präsentieren Sie dem Benutzer eine Benutzeroberfläche, in der er aufgefordert wird, seine Telefonnummer signInWithPhoneNumber , und rufen signInWithPhoneNumber dann signInWithPhoneNumber an, um Firebase signInWithPhoneNumber , einen Authentifizierungscode per SMS an das Telefon des Benutzers zu senden:

  1. Holen Sie sich die Telefonnummer des Benutzers.

    Die gesetzlichen Anforderungen variieren, aber als bewährte Methode und um die Erwartungen Ihrer Benutzer festzulegen, sollten Sie sie darüber informieren, dass sie bei Verwendung der Telefonanmeldung möglicherweise eine SMS-Nachricht zur Überprüfung erhalten und Standardtarife gelten.

  2. Rufen Sie signInWithPhoneNumber und übergeben Sie ihm die Telefonnummer des Benutzers und den RecaptchaVerifier erstellten RecaptchaVerifier .
    var phoneNumber = getPhoneNumberFromUserInput();
    var appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (confirmationResult) {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
        }).catch(function (error) {
          // Error; SMS not sent
          // ...
        });
    
    Wenn signInWithPhoneNumber zu einem Fehler führt, setzen Sie reCAPTCHA zurück, damit der Benutzer es erneut versuchen kann:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    }
    

Die signInWithPhoneNumber Methode gibt die reCAPTCHA-Herausforderung an den Benutzer aus. Wenn der Benutzer die Herausforderung besteht, fordert er die Firebase-Authentifizierung auf, eine SMS-Nachricht mit einem Bestätigungscode an das Telefon des Benutzers zu senden.

Melden Sie sich beim Benutzer mit dem Bestätigungscode an

Nachdem der Aufruf von signInWithPhoneNumber erfolgreich war, fordern Sie den Benutzer auf, den per SMS empfangenen Bestätigungscode signInWithPhoneNumber . signInWithPhoneNumber beim Benutzer an, indem Sie den Code an die confirm des ConfirmationResult Objekts übergeben, das an den Fulfillment-Handler von signInWithPhoneNumber (d. signInWithPhoneNumber Seinen then Block). Zum Beispiel:

var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) {
  // User signed in successfully.
  var user = result.user;
  // ...
}).catch(function (error) {
  // User couldn't sign in (bad verification code?)
  // ...
});

Wenn der Anruf zur confirm erfolgreich war, ist der Benutzer erfolgreich angemeldet.

Holen Sie sich das intermediäre AuthCredential-Objekt

Wenn Sie einen bekommen müssen AuthCredential Objekt für das Benutzerkonto, übergeben Sie den Bestätigungscode aus dem Bestätigungsergebnis und den Bestätigungscode zu PhoneAuthProvider.credential statt Aufruf confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Anschließend können Sie den Benutzer mit den Anmeldeinformationen anmelden:

firebase.auth().signInWithCredential(credential);

Testen Sie mit fiktiven Telefonnummern

Über die Firebase-Konsole können Sie fiktive Telefonnummern für die Entwicklung einrichten. Das Testen mit fiktiven Telefonnummern bietet folgende Vorteile:

  • Testen Sie die Authentifizierung von Telefonnummern, ohne Ihr Nutzungskontingent zu verbrauchen.
  • Testen Sie die Authentifizierung der Telefonnummer, ohne eine tatsächliche SMS-Nachricht zu senden.
  • Führen Sie aufeinanderfolgende Tests mit derselben Telefonnummer durch, ohne gedrosselt zu werden. Dies minimiert das Risiko einer Ablehnung während des App Store-Überprüfungsprozesses, wenn der Prüfer zufällig dieselbe Telefonnummer zum Testen verwendet.
  • Testen Sie problemlos in Entwicklungsumgebungen ohne zusätzlichen Aufwand, z. B. in einem iOS-Simulator oder einem Android-Emulator ohne Google Play Services.
  • Schreiben Sie Integrationstests, ohne durch Sicherheitsüberprüfungen blockiert zu werden, die normalerweise auf reale Telefonnummern in einer Produktionsumgebung angewendet werden.

Fiktive Telefonnummern müssen folgende Anforderungen erfüllen:

  1. Stellen Sie sicher, dass Sie Telefonnummern verwenden, die tatsächlich fiktiv sind und noch nicht existieren. Mit der Firebase-Authentifizierung können Sie keine vorhandenen Telefonnummern festlegen, die von echten Benutzern als Testnummern verwendet werden. Eine Möglichkeit besteht darin, 555 Präfixnummern als US- Testtelefonnummern zu verwenden , zum Beispiel: +1 650-555-3434
  2. Telefonnummern müssen hinsichtlich Länge und anderer Einschränkungen korrekt formatiert sein. Sie durchlaufen weiterhin dieselbe Validierung wie die Telefonnummer eines echten Benutzers.
  3. Sie können bis zu 10 Telefonnummern für die Entwicklung hinzufügen.
  4. Verwenden Sie Testtelefonnummern / -codes, die schwer zu erraten sind, und ändern Sie diese häufig.

Erstellen Sie fiktive Telefonnummern und Bestätigungscodes

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung .
  2. Im Zeichen in Verfahren Registerkarte, aktivieren Sie die Telefonanbieter , wenn Sie nicht bereits haben.
  3. Öffnen Sie die Telefonnummern zum Testen des Akkordeonmenüs.
  4. Geben Sie die Telefonnummer an, die Sie testen möchten, zum Beispiel: +1 650-555-3434 .
  5. Geben Sie den 6-stelligen Bestätigungscode für diese bestimmte Nummer ein, zum Beispiel: 654321 .
  6. Fügen Sie die Nummer hinzu. Bei Bedarf können Sie die Telefonnummer und ihren Code löschen, indem Sie den Mauszeiger über die entsprechende Zeile bewegen und auf das Papierkorbsymbol klicken.

Manuelle Prüfung

Sie können direkt mit der Verwendung einer fiktiven Telefonnummer in Ihrer Anwendung beginnen. Auf diese Weise können Sie während der Entwicklungsphase manuelle Tests durchführen, ohne auf Kontingentprobleme oder Drosselung zu stoßen. Sie können auch direkt von einem iOS-Simulator oder Android-Emulator aus testen, ohne dass Google Play Services installiert ist.

Wenn Sie die fiktive Telefonnummer angeben und den Bestätigungscode senden, wird keine tatsächliche SMS gesendet. Stattdessen müssen Sie den zuvor konfigurierten Bestätigungscode angeben, um die Anmeldung abzuschließen.

Nach Abschluss der Anmeldung wird ein Firebase-Benutzer mit dieser Telefonnummer erstellt. Der Benutzer hat dasselbe Verhalten und dieselben Eigenschaften wie ein Benutzer mit einer echten Telefonnummer und kann auf dieselbe Weise auf die Echtzeitdatenbank / den Cloud Firestore und andere Dienste zugreifen. Das während dieses Vorgangs geprägte ID-Token hat dieselbe Signatur wie ein Benutzer mit einer echten Telefonnummer.

Eine andere Möglichkeit besteht darin , eine Testrolle über benutzerdefinierte Ansprüche für diese Benutzer festzulegen, um sie als gefälschte Benutzer zu unterscheiden, wenn Sie den Zugriff weiter einschränken möchten.

Integrationstests

Zusätzlich zu manuellen Tests bietet Firebase Authentication APIs, mit denen Integrationstests für Telefonauthentifizierungstests geschrieben werden können. Diese APIs deaktivieren die App-Überprüfung, indem sie die reCAPTCHA-Anforderung im Web und stille Push-Benachrichtigungen in iOS deaktivieren. Dies ermöglicht Automatisierungstests in diesen Flows und ist einfacher zu implementieren. Darüber hinaus bieten sie die Möglichkeit, sofortige Überprüfungsabläufe unter Android zu testen.

Auf Web, Satz appVerificationDisabledForTesting auf true vor dem Rendering firebase.auth.RecaptchaVerifier . Dadurch wird das reCAPTCHA automatisch aufgelöst, sodass Sie die Telefonnummer übergeben können, ohne sie manuell zu lösen. Beachten Sie, dass die Verwendung einer nicht fiktiven Telefonnummer trotz deaktivierter Funktion von reCAPTCHA immer noch nicht vollständig abgeschlossen werden kann. Mit dieser API können nur fiktive Telefonnummern verwendet werden.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

Sichtbare und unsichtbare Schein-reCAPTCHA-App-Verifizierer verhalten sich anders, wenn die App-Verifizierung deaktiviert ist:

  • Sichtbares reCAPTCHA : Wenn das sichtbare reCAPTCHA über appVerifier.render() gerendert wird, löst es sich automatisch nach einem Bruchteil einer Sekunde Verzögerung auf. Dies entspricht einem Benutzer, der unmittelbar nach dem Rendern auf reCAPTCHA klickt. Die reCAPTCHA-Antwort läuft nach einiger Zeit ab und wird dann erneut automatisch aufgelöst.
  • Unsichtbares reCAPTCHA : Das unsichtbare reCAPTCHA wird beim Rendern nicht automatisch aufgelöst, sondern beim Aufruf von appVerifier.verify() oder wenn der Schaltflächenanker des reCAPTCHA nach einem Bruchteil einer Sekunde Verzögerung angeklickt wird. In ähnlicher Weise läuft die Antwort nach einiger Zeit ab und wird erst nach dem Aufruf von appVerifier.verify() oder nach appVerifier.verify() den Schaltflächenanker des reCAPTCHA automatisch aufgelöst.

Immer wenn ein Schein-reCAPTCHA aufgelöst wird, wird die entsprechende Rückruffunktion wie erwartet mit der gefälschten Antwort ausgelöst. Wenn auch ein Ablaufrückruf angegeben wird, wird dieser bei Ablauf ausgelöst.

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal angemeldet hat, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen verknüpft, dh dem Benutzernamen und dem Kennwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Benutzer in jeder App in Ihrem Projekt zu identifizieren, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Apps wird empfohlen, den Authentifizierungsstatus Ihres Benutzers zu ermitteln, indem Sie einen Beobachter für das Auth Objekt festlegen. Sie können dann die grundlegenden Profilinformationen des User aus dem User abrufen. Siehe Benutzer verwalten .

  • In Ihren Firebase- Sicherheitsregeln für Echtzeitdatenbanken und Cloud-Speicher können Sie die eindeutige Benutzer-ID des angemeldeten Benutzers aus der auth und damit steuern, auf welche Daten ein Benutzer zugreifen kann.

Sie können Benutzern erlauben, sich mit mehreren Authentifizierungsanbietern bei Ihrer App anzumelden, indem Sie die Anmeldeinformationen des Authentifizierungsanbieters mit einem vorhandenen Benutzerkonto verknüpfen.

Um einen Benutzer signOut , rufen Sie signOut :

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});