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.

Die einfachste Möglichkeit, Ihrer App eine Telefonnummernanmeldung hinzuzufügen, ist die Verwendung von FirebaseUI , das ein Drop-in-Widget für die Anmeldung 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 Anmeldeablauf für Telefonnummern implementieren.

Bevor Sie beginnen

Falls noch nicht geschehen, kopieren Sie das Initialisierungs-Snippet aus der Firebase-Konsole in Ihr Projekt, wie unter Hinzufügen von Firebase zu Ihrem JavaScript-Projekt beschrieben.

Sicherheitsbedenken

Die Authentifizierung mit nur einer Telefonnummer ist zwar bequem, 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 die telefonnummernbasierte Anmeldung in Ihrer App verwenden, sollten Sie sie zusammen mit sichereren Anmeldemethoden anbieten und die Benutzer über die Sicherheitskompromisse 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 hostet, nicht im Abschnitt OAuth-Umleitungsdomänen aufgeführt ist, fügen Sie auf derselben Seite Ihre Domäne hinzu.

Das Kontingent für Anmeldeanfragen für Telefonnummern von Firebase 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 die reCAPTCHA-Überprüfung ein

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

Sie müssen keinen reCAPTCHA-Client 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 oft verifizieren kann, ohne dass eine Benutzeraktion erforderlich ist, sowie das reCAPTCHA-Widget, das immer eine Benutzerinteraktion erfordert, um erfolgreich abgeschlossen zu werden.

Das zugrunde liegende gerenderte reCAPTCHA kann nach den Vorlieben 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 version 9

import { getAuth } from "firebase/auth";

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

Web version 8

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 Parameter size auf invisible gesetzt ist, und geben Sie die ID der Schaltfläche an, die Ihr Anmeldeformular übermittelt. Zum Beispiel:

Web version 9

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

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

Web version 8

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 ein Element auf Ihrer Seite, das das Widget enthält, und erstellen Sie dann ein RecaptchaVerifier Objekt, wobei Sie dabei die ID des Containers angeben. Zum Beispiel:

Web version 9

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

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

Web version 8

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 version 9

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

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

Web version 8

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 Anmeldeanforderung senden, rufen Sie render auf:

Web version 9

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

Web version 8

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

Nachdem das render aufgelöst wurde, erhalten Sie die Widget-ID von reCAPTCHA, mit der Sie Aufrufe an die reCAPTCHA -API senden können:

Web version 9

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

Web version 8

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

Senden Sie einen Bestätigungscode an das Telefon des Benutzers

Um die Anmeldung per Telefonnummer zu initiieren, zeigen Sie dem Benutzer eine Oberfläche, die ihn auffordert, seine Telefonnummer anzugeben, und rufen Sie dann signInWithPhoneNumber auf, um anzufordern, dass Firebase einen Authentifizierungscode per SMS an das Telefon des Benutzers sendet:

  1. Rufen Sie die Telefonnummer des Benutzers ab.

    Die gesetzlichen Anforderungen sind unterschiedlich, aber als Best Practice und um die Erwartungen Ihrer Benutzer zu erfüllen, sollten Sie sie darüber informieren, dass sie bei Verwendung der telefonischen Anmeldung möglicherweise eine SMS-Nachricht zur Überprüfung erhalten und Standardgebühren anfallen.

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

    Web version 9

    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 version 8

    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 das 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 und fordert, wenn der Benutzer die Herausforderung besteht, an, dass die Firebase-Authentifizierung eine SMS-Nachricht mit einem Bestätigungscode an das Telefon des Benutzers sendet.

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 Methode „ confirm “ des Objekts „ ConfirmationResult “ übergeben, das an den Fulfillment-Handler von signInWithPhoneNumber (d. h. seinen then -Block) übergeben wurde. Zum Beispiel:

Web version 9

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 version 8

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 confirm erfolgreich war, wurde der Benutzer erfolgreich angemeldet.

Rufen Sie das AuthCredential-Zwischenobjekt ab

Wenn Sie ein AuthCredential -Objekt für das Konto des Benutzers abrufen müssen, übergeben Sie den Bestätigungscode aus dem Bestätigungsergebnis und den Bestätigungscode an PhoneAuthProvider.credential , anstatt den Befehl „ 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

Sie können fiktive Telefonnummern für die Entwicklung über die Firebase-Konsole 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. Dadurch wird das Risiko einer Ablehnung während des Überprüfungsprozesses im App Store minimiert, 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-Dienste zu entwickeln.
  • Schreiben Sie Integrationstests, ohne durch Sicherheitsprüfungen blockiert zu werden, die normalerweise auf echte Telefonnummern in einer Produktionsumgebung angewendet werden.

Diese Anforderungen müssen fiktive Telefonnummern erfüllen:

  1. Stellen Sie sicher, dass Sie fiktive Telefonnummern verwenden, die noch nicht existieren. Mit der Firebase-Authentifizierung können Sie vorhandene Telefonnummern, die von echten Benutzern verwendet werden, nicht als Testnummern festlegen. Eine Option besteht darin, 555-Vorwahlnummern als US-Testtelefonnummern zu verwenden, zum Beispiel: +1 650-555-3434
  2. Telefonnummern müssen hinsichtlich der Länge und anderer Beschränkungen korrekt formatiert sein. Sie durchlaufen immer noch 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 spezifische 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.

Manuelles Testen

Sie können direkt mit der Verwendung einer fiktiven Telefonnummer in Ihrer Bewerbung 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 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 eingeben, 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 Benutzer einer echten Telefonnummer 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 weitere Option 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.

Integrationstest

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

Legen Sie im Web appVerificationDisabledForTesting auf true fest, bevor Sie firebase.auth.RecaptchaVerifier rendern. Dadurch wird das reCAPTCHA automatisch aufgelöst, sodass Sie die Telefonnummer weitergeben können, ohne sie manuell zu lösen. Beachten Sie, dass auch wenn reCAPTCHA deaktiviert ist, die Anmeldung mit einer nicht fiktiven Telefonnummer nicht 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-Überprüfungen verhalten sich unterschiedlich, wenn die App-Überprüfung deaktiviert ist:

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

Immer wenn ein mock reCAPTCHA aufgelöst wird, wird die entsprechende Callback-Funktion wie erwartet mit der gefälschten Antwort ausgelöst. Wenn auch ein Ablauf-Callback angegeben ist, wird er 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 – d. h. dem Benutzernamen und Kennwort, der Telefonnummer oder den Authentifizierungsanbieterinformationen –, 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 besteht die empfohlene Möglichkeit, den Authentifizierungsstatus Ihres Benutzers zu erfahren, darin, einen Beobachter für das Auth festzulegen. Sie können dann die grundlegenden Profilinformationen des Benutzers aus dem User abrufen. Siehe Benutzer verwalten .

  • In Ihren Sicherheitsregeln für die Firebase-Echtzeitdatenbank und den Cloud-Speicher können Sie die eindeutige Benutzer-ID des angemeldeten Benutzers aus der Variablen 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 abzumelden, rufen signOut :

Web version 9

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 version 8

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