Authentifizieren Sie sich bei Firebase mit einer Telefonnummer mithilfe von JavaScript

Sie können die Firebase-Authentifizierung verwenden, um einen Benutzer anzumelden, indem Sie eine SMS-Nachricht an das Telefon des Benutzers senden. Der Benutzer meldet sich mit einem Einmalcode an, der in der SMS-Nachricht enthalten ist.

Der einfachste Weg, die Telefonnummernanmeldung zu Ihrer App hinzuzufügen, ist die Verwendung von FirebaseUI , das ein Drop-in-Anmelde-Widget enthält, das Anmeldeabläufe für die Telefonnummernanmeldung sowie passwortbasierte und föderierte Anmeldungen implementiert -In. In diesem Dokument wird beschrieben, wie Sie mit dem Firebase SDK einen Anmeldevorgang für Telefonnummern implementieren.

Bevor Sie beginnen

Falls noch nicht geschehen, kopieren Sie das Initialisierungs-Snippet von der Firebase-Konsole in Ihr Projekt, wie unter „Firebase zu Ihrem JavaScript-Projekt hinzufügen“ 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. Außerdem kann sich auf Geräten mit mehreren Benutzerprofilen jeder Benutzer, der SMS-Nachrichten empfangen kann, mit der Telefonnummer des Geräts bei einem Konto anmelden.

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

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

Um Benutzer per SMS anzumelden, müssen Sie zunächst die Anmeldemethode „Telefonnummer“ für Ihr Firebase-Projekt aktivieren:

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung .
  2. Aktivieren Sie auf der Seite „Anmeldemethode“ die Anmeldemethode „Telefonnummer“ .
  3. Wenn die Domäne, die Ihre App hosten wird, nicht im Abschnitt „OAuth-Umleitungsdomänen“ aufgeführt ist, fügen Sie auf derselben Seite Ihre Domäne hinzu.

Das Kontingent von Firebase-Anmeldeanfragen für Telefonnummern ist hoch genug, dass 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 Preisseite .

Richten Sie den reCAPTCHA-Verifizierer 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, indem beispielsweise sichergestellt wird, dass die Anfrage zur Telefonnummernüberprüfung 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 verwenden, erstellt und verarbeitet Firebase automatisch alle erforderlichen Clientschlüssel und Geheimnisse.

Das RecaptchaVerifier Objekt unterstützt unsichtbares reCAPTCHA , das den Benutzer häufig verifizieren kann, ohne dass eine Benutzeraktion erforderlich ist, sowie das reCAPTCHA-Widget, für dessen erfolgreichen Abschluss immer eine Benutzerinteraktion erforderlich ist.

Das zugrunde liegende gerenderte reCAPTCHA kann nach den Wünschen des Benutzers lokalisiert werden, indem der Sprachcode auf 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.

Web modular API

import { getAuth } from "firebase/auth";

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

Web namespaced API

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

Verwenden Sie unsichtbares reCAPTCHA

Um ein unsichtbares reCAPTCHA zu verwenden, erstellen Sie ein RecaptchaVerifier Objekt, dessen size auf invisible festgelegt ist, und geben Sie die ID der Schaltfläche an, die Ihr Anmeldeformular sendet. Zum Beispiel:

Web modular API

import { getAuth, RecaptchaVerifier } from "firebase/auth";

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

Web namespaced API

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

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 Sie dann ein RecaptchaVerifier Objekt, wobei Sie dabei die ID des Containers angeben. Zum Beispiel:

Web modular API

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {});
auth_phone_recaptcha_verifier_simple.js

Web namespaced API

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

Optional: Geben Sie reCAPTCHA-Parameter an

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

Web modular API

import { getAuth, RecaptchaVerifier } from "firebase/auth";

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

Web namespaced API

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

Optional: Rendern Sie das reCAPTCHA vorab

Wenn Sie das reCAPTCHA vorab rendern möchten, bevor Sie eine Anmeldeanfrage senden, rufen Sie render auf:

Web modular API

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
auth_phone_recaptcha_render.js

Web namespaced API

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
phone-auth.js

Nach render Auflösung erhalten Sie die Widget-ID des reCAPTCHA, mit der Sie Aufrufe an die reCAPTCHA- API tätigen können:

Web modular API

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
auth_get_recaptcha_response.js

Web namespaced API

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
phone-auth.js

Senden Sie einen Bestätigungscode an das Telefon des Benutzers

Um die Anmeldung über die Telefonnummer zu initiieren, präsentieren Sie dem Benutzer eine Schnittstelle, die ihn zur Angabe seiner Telefonnummer auffordert, und rufen Sie dann signInWithPhoneNumber auf, um Firebase aufzufordern, einen Authentifizierungscode per SMS an das Telefon des Benutzers zu senden:

  1. Rufen Sie die Telefonnummer des Benutzers ab.

    Die rechtlichen Anforderungen variieren. Als Best Practice und um die Erwartungen Ihrer Benutzer zu wecken, sollten Sie sie jedoch darüber informieren, dass sie bei Verwendung der telefonischen Anmeldung möglicherweise eine SMS-Nachricht zur Überprüfung erhalten und Standardtarife gelten.

  2. Rufen Sie signInWithPhoneNumber auf und übergeben Sie ihm die Telefonnummer des Benutzers und den RecaptchaVerifier den Sie zuvor erstellt haben.

    Web modular API

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";

const phoneNumber = getPhoneNumberFromUserInput();
const appVerifier = window.recaptchaVerifier;

const auth = getAuth();
signInWithPhoneNumber(auth, phoneNumber, appVerifier)
    .then((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((error) => {
      // Error; SMS not sent
      // ...
    });
    auth_phone_signin.js

    Web namespaced API

    const phoneNumber = getPhoneNumberFromUserInput();
const appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then((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((error) => {
      // Error; SMS not sent
      // ...
    });
    phone-auth.js
    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 Methode signInWithPhoneNumber gibt die reCAPTCHA-Herausforderung an den Benutzer aus und fordert, wenn der Benutzer die Herausforderung besteht, die Firebase-Authentifizierung auf, eine SMS-Nachricht mit einem Bestätigungscode an das Telefon des Benutzers zu senden.

Melden Sie den Benutzer mit dem Bestätigungscode an

Nachdem der Aufruf von signInWithPhoneNumber erfolgreich war, fordern Sie den Benutzer auf, den Bestätigungscode einzugeben, den er per SMS erhalten hat. Melden Sie dann den Benutzer an, indem Sie den Code an die confirm des ConfirmationResult Objekts übergeben, das an den Erfüllungshandler von signInWithPhoneNumber (d. h. seinen then Block) übergeben wurde. Zum Beispiel:

Web modular API

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

Web namespaced API

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});
phone-auth.js

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

Rufen Sie das AuthCredential-Zwischenobjekt ab

Wenn Sie ein AuthCredential Objekt für das Konto des Benutzers benötigen, übergeben Sie den Bestätigungscode aus dem Bestätigungsergebnis und den Bestätigungscode an PhoneAuthProvider.credential , anstatt confirm :

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

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 Ihrer Telefonnummer, 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 dass es zu einer Drosselung kommt. Dies minimiert das Risiko einer Ablehnung während des Überprüfungsprozesses im App Store, wenn der Prüfer zufällig dieselbe Telefonnummer zum Testen verwendet.
  • Testen Sie problemlos in Entwicklungsumgebungen ohne zusätzlichen Aufwand, z. B. die Möglichkeit, in einem iOS-Simulator oder einem Android-Emulator ohne Google Play Services zu entwickeln.
  • Schreiben Sie Integrationstests, ohne durch Sicherheitsüberprüfungen blockiert zu werden, die normalerweise auf echte Telefonnummern in einer Produktionsumgebung angewendet werden.

Fiktive Telefonnummern müssen diese 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 vorhandene Telefonnummern, die von echten Benutzern verwendet werden, nicht als Testnummern festlegen. Eine Möglichkeit besteht darin, 555-Vorwahlnummern als US-Testtelefonnummern zu verwenden, zum Beispiel: +1 650-555-3434
  2. Telefonnummern müssen im Hinblick auf Länge und andere Einschränkungen korrekt formatiert sein. Sie durchlaufen weiterhin die gleiche 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. Aktivieren Sie auf der Registerkarte „Anmeldemethode“ den Telefonanbieter, falls Sie dies noch nicht getan haben.
  3. Öffnen Sie das Menü Telefonnummern zum Testen des Akkordeons.
  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 an, zum Beispiel: 654321 .
  6. Fügen Sie die Nummer hinzu. Bei Bedarf können Sie die Telefonnummer und ihren Code löschen, indem Sie mit der Maus über die entsprechende Zeile fahren und auf das Papierkorbsymbol klicken.

Manuelles Testen

Sie können direkt damit beginnen, eine fiktive Telefonnummer in Ihrer Bewerbung zu verwenden. Dadurch können Sie während der Entwicklungsphase manuelle Tests durchführen, ohne dass es zu Kontingentproblemen oder Drosselungen kommt. Sie können den Test auch direkt von einem iOS-Simulator oder Android-Emulator aus durchführen, 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 das gleiche Verhalten und die gleichen Eigenschaften wie ein echter Telefonnummernbenutzer und kann auf die gleiche Weise auf Realtime Database/Cloud Firestore und andere Dienste zugreifen. Der während dieses Vorgangs geprägte ID-Token hat die gleiche Signatur wie ein echter Telefonnummernbenutzer.

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

Integrationstests

Zusätzlich zu manuellen Tests bietet Firebase Authentication APIs, die beim Schreiben von Integrationstests für Telefonauthentifizierungstests helfen. Diese APIs deaktivieren die App-Verifizierung, indem sie die reCAPTCHA-Anforderung im Web und stille Push-Benachrichtigungen in iOS deaktivieren. Dies macht Automatisierungstests in diesen Abläufen möglich und einfacher zu implementieren. Darüber hinaus bieten sie die Möglichkeit, sofortige Verifizierungsabläufe auf Android zu testen.

Setzen Sie im Web appVerificationDisabledForTesting auf true , bevor Sie firebase.auth.RecaptchaVerifier rendern. Dadurch wird das reCAPTCHA automatisch aufgelöst, sodass Sie die Telefonnummer weitergeben können, ohne sie manuell lösen zu müssen. Beachten Sie, dass die Anmeldung mit einer nicht fiktiven Telefonnummer auch dann nicht abgeschlossen werden kann, wenn reCAPTCHA deaktiviert ist. 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 unterschiedlich, wenn die App-Verifizierung deaktiviert ist:

  • Sichtbares reCAPTCHA : Wenn das sichtbare reCAPTCHA über appVerifier.render() gerendert wird, löst es sich automatisch nach dem 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 appVerifier.verify() Aufruf oder wenn nach dem Bruchteil einer Sekunde Verzögerung auf den Schaltflächenanker des reCAPTCHA geklickt wird. Ebenso läuft die Antwort nach einiger Zeit ab und wird erst nach dem Aufruf appVerifier.verify() oder wenn erneut auf den Schaltflächenanker des reCAPTCHA geklickt wird, 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 ist, 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 – also dem Benutzernamen und dem Kennwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann zur Identifizierung eines Benutzers in jeder App in Ihrem Projekt verwendet werden, unabhängig davon, wie sich der Benutzer anmeldet.

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

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

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

Um einen Benutzer abzumelden, rufen Sie signOut auf:

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js