Mit JavaScript über eine Telefonnummer mit Firebase authentifizieren

Du kannst Firebase Authentication verwenden, um einen Nutzer durch Senden einer SMS anzumelden auf das Smartphone der Nutzenden übertragen. Der Nutzer meldet sich mit einem einmaligen Code an, der im SMS.

Am einfachsten können Sie die Anmeldung mit einer Telefonnummer in Ihrer App mit FirebaseUI mit einem Widget für die Anmeldung, das Anmeldevorgänge für das Smartphone implementiert. Zahlenanmeldung sowie passwortbasierte und föderierte Anmeldung. In diesem Dokument wird beschrieben, wie Sie mit dem Firebase SDK einen Anmeldevorgang per Telefonnummer implementieren.

Hinweis

Falls noch nicht geschehen, kopieren Sie das Initialisierungs-Snippet aus dem Firebase-Konsole zu Ihrem Projekt hinzu, wie unter beschrieben. Fügen Sie Firebase zu Ihrem JavaScript-Projekt hinzu.

Sicherheitsbedenken

Die Authentifizierung über eine Telefonnummer ist zwar praktisch, aber weniger sicher als die anderen verfügbaren Methoden, da der Besitz einer Telefonnummer leicht zwischen Nutzern übertragen werden. Auf Geräten mit mehreren Nutzern Profilen hinzugefügt, kann sich jeder Nutzer, der SMS-Nachrichten empfangen kann, über Telefonnummer des Geräts.

Wenn Sie sich in Ihrer App über eine Telefonnummer anmelden, sollten Sie diese anbieten und sicherere Anmeldemethoden nutzen und die Nutzer über die Sicherheit informieren, welche Nachteile es bei der Anmeldung über die Telefonnummer hat.

Anmeldung per Telefonnummer für Ihr Firebase-Projekt aktivieren

Wenn Sie Nutzer per SMS anmelden möchten, müssen Sie zuerst die Anmeldung mit der Telefonnummer aktivieren für Ihr Firebase-Projekt an:

  1. Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung.
  2. Aktivieren Sie auf der Seite Anmeldemethode die Anmeldemethode Telefonnummer.
  3. Falls die Domain, auf der Ihre App gehostet wird, auf derselben Seite nicht in der OAuth-Weiterleitungsdomains auf und fügen Sie Ihre Domain hinzu. Beachten Sie, dass localhost nicht als gehosteter Server zulässig ist. Domain für die Telefonauthentifizierung verwenden.

reCAPTCHA-Verifizierung einrichten

Bevor Sie Nutzer mit ihren Telefonnummern anmelden können, müssen Sie sie einrichten reCAPTCHA-Verifizierung von Firebase. Firebase verwendet reCAPTCHA, um Missbrauch zu verhindern, z. B. indem Sie sicherstellen, dass die Anfrage zur Bestätigung der Telefonnummer von einer Ihrer zugelassenen Domains der App an.

Sie müssen reCAPTCHA-Client nicht manuell einrichten. wenn Sie die Funktion RecaptchaVerifier-Objekt des Firebase SDK, Firebase automatisch alle erforderlichen Clientschlüssel und -geheimnisse erstellt und verarbeitet.

Das RecaptchaVerifier-Objekt unterstützt unsichtbar reCAPTCHA, mit dem sich Nutzer oft bestätigen lassen, ohne dass ein Nutzer erforderlich ist und das reCAPTCHA-Widget, das immer eine Nutzerinteraktion erfordert. abgeschlossen wird.

Das zugrunde liegende gerenderte reCAPTCHA kann nach den Vorgaben des Nutzers lokalisiert werden, indem das Sprachcode auf der Auth-Instanz vor dem Rendern des reCAPTCHA. Die zuvor erwähnte Lokalisierung gilt auch für die SMS-Nachricht, die an den Nutzer gesendet wird, die den Bestätigungscode enthält.

Web

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

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

Unsichtbares reCAPTCHA verwenden

Wenn du ein unsichtbares reCAPTCHA verwenden möchtest, musst du ein RecaptchaVerifier-Objekt erstellen wobei der Parameter size auf invisible festgelegt ist und Folgendes angibt: Die ID der Schaltfläche, über die Ihr Anmeldeformular gesendet wird. Beispiel:

Web

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

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

reCAPTCHA-Widget verwenden

Wenn Sie das sichtbare reCAPTCHA-Widget verwenden möchten, erstellen Sie auf Ihrer Seite ein Element, das das Widget enthält, und dann ein RecaptchaVerifier-Objekt. Geben Sie dabei die ID des Containers an. Beispiel:

Web

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

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

Web

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

Optional: reCAPTCHA-Parameter angeben

Optional können Sie Callback-Funktionen auf der RecaptchaVerifier-Objekt, das aufgerufen wird, wenn der Nutzer die reCAPTCHA oder reCAPTCHA läuft ab, bevor der Nutzer das Formular sendet:

Web

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

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: reCAPTCHA vorab rendern

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

Web

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

Web

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

Nachdem render aufgelöst wurde, erhalten Sie die Widget-ID von reCAPTCHA, die die Sie verwenden können, um die reCAPTCHA-API:

Web

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

Web

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

Bestätigungscode an die Telefonnummer des Nutzers senden

Um die Anmeldung über die Telefonnummer zu starten, müssen Sie dem Nutzer eine Oberfläche einblenden, um eine Telefonnummer anzugeben, und rufen Sie dann signInWithPhoneNumber, um von Firebase anzufordern, dass ein Authentifizierungscode per SMS an das Telefon des Nutzers:

  1. Ermitteln Sie die Telefonnummer des Nutzers.

    Als Best Practice gelten unterschiedliche rechtliche Anforderungen. und die Erwartungen der Nutzenden zu definieren, sollten Sie sie informieren, erhalten sie zur Bestätigung per SMS fallen Gebühren an.

  2. Rufen Sie signInWithPhoneNumber auf und übergeben Sie die Telefonnummer des Nutzers und die zuvor erstellte RecaptchaVerifier.

    Web

    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

    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 Nutzer es noch einmal versuchen kann: 
    grecaptcha.reset(window.recaptchaWidgetId);

// Or, if you haven't stored the widget ID:
window.recaptchaVerifier.render().then(function(widgetId) {
  grecaptcha.reset(widgetId);
});

Mit der Methode signInWithPhoneNumber wird die reCAPTCHA-Aufgabe ausgegeben Wenn der Nutzer die Aufgabe besteht, fordert er Firebase Authentication sendet eine SMS mit einem Bestätigungscode an die auf das Smartphone des Nutzers.

Nutzer mit Bestätigungscode anmelden

Nach dem erfolgreichen Aufruf von signInWithPhoneNumber fordern Sie die Nutzer, den Bestätigungscode einzugeben, den sie per SMS erhalten haben. Nutzer anmelden indem Sie den Code an die confirm-Methode der ConfirmationResult-Objekt, das an übergeben wurde Der Auftragsausführungs-Handler von signInWithPhoneNumber (d. h. seine Block then). Beispiel:

Web

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

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 von confirm erfolgreich war, ist der Nutzer erfolgreich. angemeldet sind.

AuthCredential-Zwischenobjekt abrufen

Wenn Sie ein AuthCredential-Objekt für das Objekt den Bestätigungscode aus dem Bestätigungsergebnis Bestätigungscode an PhoneAuthProvider.credential statt an confirm wird aufgerufen: 

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

Anschließend können Sie den Nutzer mit diesen Anmeldedaten anmelden:

firebase.auth().signInWithCredential(credential);

Mit fiktiven Telefonnummern testen

Sie können fiktive Telefonnummern für die Entwicklung über die Firebase-Konsole einrichten. Mit fiktivem Smartphone testen Zahlen bietet folgende Vorteile:

  • Testen Sie die Authentifizierung der Telefonnummer, ohne Ihr Nutzungskontingent zu verbrauchen.
  • Testen Sie die Authentifizierung der Telefonnummer, ohne eine SMS zu senden.
  • Aufeinanderfolgende Tests mit derselben Telefonnummer ausführen, ohne dass dies gedrosselt wird. Dieses minimiert das Risiko einer Ablehnung während der Überprüfung im App-Shop, falls der Prüfer die App Telefonnummer für den Test.
  • Leichtes Testen 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.
  • Integrationstests schreiben, ohne durch normale Sicherheitsprüfungen blockiert zu werden echte Telefonnummern in einer Produktionsumgebung verwenden.

Fiktive Telefonnummern müssen folgende Anforderungen erfüllen:

  1. Achten Sie darauf, dass die angegebenen Telefonnummern tatsächlich fiktiv sind. Mit Firebase Authentication können Sie keine Telefonnummern festlegen, die von echten Nutzern verwendet werden. Eine Möglichkeit besteht darin, 555-Präfixnummern als US-Testtelefonnummern zu verwenden. Beispiel: +1 650 555 3434
  2. Telefonnummern müssen im Hinblick auf Länge und andere Einschränkungen. Sie werden jedoch genauso wie die Telefonnummer eines echten Nutzers überprüft.
  3. Sie können bis zu 10 Telefonnummern für die Entwicklung hinzufügen.
  4. Verwenden Sie Testtelefonnummern/-codes, die schwer zu erraten und zu ändern sind häufig verwendet wird.

Fiktive Telefonnummern und Bestätigungscodes erstellen

  1. Öffnen Sie in der Firebase-Konsole das Authentifizierung.
  2. Aktivieren Sie auf dem Tab Anmeldemethode den Telefonanbieter, falls Sie dies noch nicht getan haben.
  3. Öffnen Sie das Akkordeon-Menü Telefonnummern zum Testen.
  4. Geben Sie die Telefonnummer an, die Sie testen möchten, z. B. +1 650-555-3434.
  5. Geben Sie den sechsstelligen Bestätigungscode für diese Nummer an, z. B. 654321.
  6. Fügen Sie die Nummer hinzu. Bei Bedarf können Sie die Telefonnummer und indem Sie mit der Maus auf die entsprechende Zeile zeigen und auf das Papierkorbsymbol klicken.

Manuelle Tests

Sie können sofort mit der Verwendung einer fiktiven Telefonnummer in Ihrer Anwendung beginnen. So können Sie manuelle Tests in Entwicklungsphasen ohne Kontingentprobleme oder Drosselung durchführen. Sie können Tests auch ohne die Google Play-Dienste direkt über einen iOS-Simulator oder einen Android-Emulator durchführen. installiert haben.

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

Nach der Anmeldung wird ein Firebase-Nutzer mit dieser Telefonnummer erstellt. Der Nutzer hat dasselbe Verhalten und dieselben Eigenschaften wie ein echter Nutzer mit Telefonnummer und kann auf dieselbe Weise auf Realtime Database/Cloud Firestore und andere Dienste zugreifen. Das während des hat dieser Prozess dieselbe Signatur wie ein echter Nutzer einer Telefonnummer.

Alternativ können Sie eine Testrolle über ein benutzerdefiniertes Behauptungen auf diese Nutzer, um sie als gefälschte Nutzer zu unterscheiden, wenn Sie Zugriff haben.

Integrationstests

Zusätzlich zu manuellen Tests bietet Firebase Authentication APIs, die Sie bei der Entwicklung von Integrationstests für die Telefonauthentifizierung unterstützen. Bei diesen APIs wird die App-Überprüfung deaktiviert, indem das reCAPTCHA deaktiviert wird im Web und stille Push-Benachrichtigungen unter iOS. Dadurch werden automatisierte Tests in und einfacher zu implementieren. Darüber hinaus ermöglichen sie es, Instant- für die Bestätigung unter Android.

Im Web appVerificationDisabledForTesting festlegen auf true vor dem Rendern des firebase.auth.RecaptchaVerifier. Dadurch wird das reCAPTCHA automatisch gelöst und Sie können die Telefonnummer weitergeben, ohne es manuell lösen zu müssen. Hinweis dass reCAPTCHA deaktiviert ist, aber die Verwendung einer fiktiven Telefonnummer trotzdem nicht funktioniert. um die Anmeldung abzuschließen. 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 simulierte reCAPTCHA-App-Prüfungen verhalten sich anders, wenn die App-Überprüfung deaktiviert ist:

  • Sichtbares reCAPTCHA: Wenn das sichtbare reCAPTCHA über appVerifier.render() wird sie automatisch nach dem Bruchteil einer Sekunde aufgelöst. Verzögerung. Das entspricht dem Klick eines Nutzers direkt nach dem Rendern auf das reCAPTCHA. Das reCAPTCHA der 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 im appVerifier.verify()oder wenn der Schaltflächenanker von reCAPTCHA die innerhalb einer Sekunde verzögert angeklickt wurden. Auch die Antwort läuft nach einiger Zeit ab wird erst nach dem appVerifier.verify()-Aufruf oder der Button-Anker des reCAPTCHA noch einmal angeklickt.

Immer wenn ein fiktives reCAPTCHA aufgelöst wird, wird die entsprechende Callback-Funktion wie erwartet ausgelöst. mit der falschen Antwort. Wenn auch ein Ablauf-Callback angegeben ist, wird er nach Ablauf ausgelöst.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und die mit den Anmeldedaten verknüpft sind, d. h. Nutzername und Passwort, oder Authentifizierungsanbieter-Informationen – also für den Nutzer, mit dem sich der Nutzer angemeldet hat. Diese neue -Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um in jeder App in Ihrem Projekt einen Nutzer erreichen, unabhängig davon, wie er sich anmeldet.

  • Um den Authentifizierungsstatus Ihrer Nutzer in Ihren Apps zu ermitteln, gehen Sie folgendermaßen vor: einen Beobachter für das Auth-Objekt festlegen. Sie können dann die E-Mail-Adresse des Nutzers abrufen, grundlegende Profilinformationen aus dem User-Objekt. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In Firebase Realtime Database und Cloud Storage Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen, und steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Rufen Sie auf, um einen Nutzer abzumelden. signOut:

Web

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

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