Mit JavaScript über eine Telefonnummer mit Firebase authentifizieren

Mit Firebase Authentication können Sie einen Nutzer anmelden, indem Sie eine SMS an sein Smartphone senden. Der Nutzer meldet sich mit einem Einmalcode an, der in der SMS enthalten ist.

Am einfachsten fügen Sie Ihrer App die Anmeldung mit Telefonnummer hinzu, indem Sie FirebaseUI verwenden. Diese Bibliothek enthält ein globales Anmeldewidget, das Anmeldeabläufe für die Anmeldung mit Telefonnummer sowie für die passwortbasierte und die föderierte Anmeldung implementiert. In diesem Dokument wird beschrieben, wie Sie einen Anmeldevorgang mit Telefonnummer mithilfe des Firebase SDK implementieren.

Hinweis

Sicherheitsbedenken

Die Authentifizierung nur ü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 kann. Außerdem kann sich auf Geräten mit mehreren Nutzerprofilen jeder Nutzer, der SMS-Nachrichten empfangen kann, mit der Telefonnummer des Geräts in einem Konto anmelden.

Wenn Sie die Anmeldung per Telefonnummer in Ihrer App verwenden, sollten Sie sie neben sichereren Anmeldemethoden anbieten und Nutzer über die Sicherheitsrisiken der Anmeldung per Telefonnummer informieren.

Anmeldung mit Telefonnummer für Ihr Firebase-Projekt aktivieren

Wenn Sie Nutzer per SMS anmelden möchten, müssen Sie zuerst die Anmeldemethode „Telefonnummer“ für Ihr Firebase-Projekt aktivieren:

1. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.
2. Aktivieren Sie auf dem Tab Anmeldemethode den Anmeldeanbieter Telefon.
3. Legen Sie eine Richtlinie für die Regionen fest, in die SMS gesendet werden dürfen oder nicht. Wenn Sie eine SMS-Regionsrichtlinie festlegen, können Sie Ihre Apps besser vor SMS-Missbrauch schützen. Bei neuen Projekten sind in der Standardrichtlinie keine Regionen zulässig.
   1. Rufen Sie in der Firebase-Konsole den Tab Einstellungen unter Sicherheit > Authentifizierung auf.
   2. Richten Sie im Abschnitt Richtlinie für SMS-Regionen Ihre Richtlinie für SMS-Regionen ein.
4. Falls noch nicht geschehen, autorisieren Sie die Domain Ihrer App:
   1. Rufen Sie in der Firebase-Konsole den Tab Sicherheit > Authentifizierung > Einstellungen auf.
   2. Klicken Sie im Bereich Autorisierte Domains auf Domain hinzufügen und fügen Sie Ihre Domain hinzu.

   Hinweis: Localhost ist für die Telefonauthentifizierung nicht als gehostete Domain zulässig.

reCAPTCHA-Prüfer einrichten

Bevor Sie Nutzer mit ihren Telefonnummern anmelden können, müssen Sie die reCAPTCHA-Bestätigung von Firebase einrichten. Firebase verwendet reCAPTCHA, um Missbrauch zu verhindern. So wird beispielsweise sichergestellt, dass die Anfrage zur Bestätigung der Telefonnummer von einer der zulässigen Domains Ihrer App stammt.

Sie müssen keinen reCAPTCHA-Client manuell einrichten. Wenn Sie das RecaptchaVerifier-Objekt des Firebase SDK verwenden, erstellt und verwaltet Firebase automatisch alle erforderlichen Clientschlüssel und ‑geheimnisse.

Das RecaptchaVerifier-Objekt unterstützt unsichtbares reCAPTCHA, mit dem der Nutzer oft ohne Nutzeraktion bestätigt werden kann, sowie das reCAPTCHA-Widget, für das immer eine Nutzerinteraktion erforderlich ist.

Das zugrunde liegende gerenderte reCAPTCHA kann an die Sprache des Nutzers angepasst werden, indem der Sprachcode in der Auth-Instanz aktualisiert wird, bevor das reCAPTCHA gerendert wird. Die oben genannte Lokalisierung gilt auch für die SMS, die an den Nutzer gesendet wird und den Bestätigungscode enthält.

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

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

Unsichtbares reCAPTCHA verwenden

Wenn Sie ein unsichtbares reCAPTCHA verwenden möchten, erstellen Sie ein RecaptchaVerifier-Objekt, wobei der Parameter size auf invisible gesetzt ist. Geben Sie dabei die ID der Schaltfläche an, mit der das Anmeldeformular gesendet wird. Beispiel:

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

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

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

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

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

Optional: reCAPTCHA-Parameter angeben

Optional können Sie Callback-Funktionen für das RecaptchaVerifier-Objekt festlegen, die aufgerufen werden, wenn der Nutzer das reCAPTCHA löst oder das reCAPTCHA abläuft, bevor der Nutzer das Formular sendet:

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

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 vorrendern

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

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

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

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

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

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

Bestätigungscode an das Smartphone des Nutzers senden

Um die Anmeldung mit Telefonnummer zu starten, präsentieren Sie dem Nutzer eine Benutzeroberfläche, in der er aufgefordert wird, seine Telefonnummer anzugeben. Rufen Sie dann signInWithPhoneNumber auf, um Firebase aufzufordern, einen Authentifizierungscode per SMS an das Telefon des Nutzers zu senden:

1. Telefonnummer des Nutzers abrufen.

   Die rechtlichen Anforderungen variieren. Als Best Practice und um die Erwartungen Ihrer Nutzer zu erfüllen, sollten Sie sie jedoch darüber informieren, dass sie bei der Anmeldung mit dem Smartphone möglicherweise eine SMS zur Bestätigung erhalten und dass die Standardgebühren gelten.

2. Rufen Sie signInWithPhoneNumber auf und übergeben Sie die Telefonnummer des Nutzers und das 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 einen Fehler zurückgibt, setzen Sie 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 für den Nutzer ausgegeben. Wenn der Nutzer die Aufgabe besteht, wird Firebase Authentication aufgefordert, eine SMS mit einem Bestätigungscode an das Smartphone des Nutzers zu senden.

Nutzer mit dem Bestätigungscode anmelden

Nachdem der Aufruf von signInWithPhoneNumber erfolgreich war, fordern Sie den Nutzer auf, den per SMS erhaltenen Bestätigungscode einzugeben. Melden Sie den Nutzer dann an, indem Sie den Code an die confirm-Methode des ConfirmationResult-Objekts übergeben, das an den Fulfillment-Handler von signInWithPhoneNumber (d. h. an den then-Block) übergeben wurde. Beispiel:

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

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 angemeldet.

Zwischen-AuthCredential-Objekt abrufen

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

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

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

firebase.auth().signInWithCredential(credential);

Mit fiktiven Telefonnummern testen

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

• Telefonnummer-Authentifizierung testen, ohne Ihr Nutzungskontingent zu verbrauchen
• Telefonnummer-Authentifizierung testen, ohne eine tatsächliche SMS zu senden.
• Führen Sie aufeinanderfolgende Tests mit derselben Telefonnummer aus, ohne dass die Anzahl der Anfragen begrenzt wird. So wird das Risiko einer Ablehnung während der App-Überprüfung im App-Store minimiert, falls der Prüfer dieselbe Telefonnummer für Tests verwendet.
• Sie können ganz einfach in Entwicklungsumgebungen testen, ohne zusätzlichen Aufwand. So können Sie beispielsweise in einem iOS-Simulator oder einem Android-Emulator ohne Google Play-Dienste entwickeln.
• Sie können Integrationstests schreiben, ohne durch Sicherheitsprüfungen blockiert zu werden, die normalerweise auf echte Telefonnummern in einer Produktionsumgebung angewendet werden.

Fiktive Telefonnummern müssen die folgenden Anforderungen erfüllen:

1. Verwenden Sie Telefonnummern, die tatsächlich fiktiv sind und noch nicht existieren. Mit Firebase Authentication können Sie keine vorhandenen Telefonnummern, die von echten Nutzern verwendet werden, als Testnummern festlegen. Eine Möglichkeit besteht darin, Telefonnummern mit der Vorwahl 555 als US-Testtelefonnummern zu verwenden, z. B.: +1 650-555-3434
2. Telefonnummern müssen hinsichtlich Länge und anderer Einschränkungen korrekt formatiert sein. Sie durchlaufen dieselbe Validierung wie die Telefonnummer eines echten Nutzers.
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.

Fiktive Telefonnummern und Bestätigungscodes erstellen

1. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.
2. Aktivieren Sie auf dem Tab Anmeldemethode den Anmeldeanbieter Telefon, falls noch nicht geschehen.
3. Maximieren Sie den Bereich Telefonnummern für Tests.
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. Klicken Sie für jede Nummer auf Hinzufügen. Bei Bedarf können Sie die Telefonnummer und den zugehörigen Code löschen, indem Sie den Mauszeiger auf die entsprechende Zeile bewegen und auf das Papierkorbsymbol klicken.

Manuelle Tests

Sie können sofort damit beginnen, eine fiktive Telefonnummer in Ihrer Anwendung zu verwenden. So können Sie während der Entwicklungsphasen manuelle Tests durchführen, ohne dass es zu Kontingentproblemen oder Drosselung kommt. Sie können auch direkt über einen iOS-Simulator oder Android-Emulator ohne installierte Google Play-Dienste testen.

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-Nutzer mit dieser Telefonnummer erstellt. Der Nutzer hat dasselbe Verhalten und dieselben Eigenschaften wie ein Nutzer mit einer echten Telefonnummer und kann auf Realtime Database/Cloud Firestore und andere Dienste auf dieselbe Weise zugreifen. Das während dieses Vorgangs erstellte ID-Token hat dieselbe Signatur wie ein echter Nutzer mit Telefonnummer.

Eine weitere Option ist, über benutzerdefinierte Ansprüche eine Testrolle für diese Nutzer festzulegen, um sie als Falschnutzer zu kennzeichnen, wenn Sie den Zugriff weiter einschränken möchten.

Integrationstests

Zusätzlich zu manuellen Tests bietet Firebase Authentication APIs, mit denen Sie Integrationstests für die Telefonauthentifizierung schreiben können. Diese APIs deaktivieren die App-Überprüfung, indem sie die reCAPTCHA-Anforderung in Web- und Silent-Push-Benachrichtigungen unter iOS deaktivieren. Dadurch sind automatisierte Tests in diesen Abläufen möglich und einfacher zu implementieren. Außerdem ermöglichen sie das Testen von Sofortbestätigungsabläufen unter Android.

Legen Sie im Web appVerificationDisabledForTesting auf true fest, bevor Sie firebase.auth.RecaptchaVerifier rendern. Dadurch wird das reCAPTCHA automatisch gelöst, sodass Sie die Telefonnummer übergeben können, ohne es manuell lösen zu müssen. Hinweis: Auch wenn reCAPTCHA deaktiviert ist, kann die Anmeldung nicht abgeschlossen werden, wenn Sie eine nicht fiktive Telefonnummer verwenden. 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 Mock-reCAPTCHA-App-Prüfer verhalten sich unterschiedlich, wenn die App-Überprüfung deaktiviert ist:

• Sichtbares reCAPTCHA: Wenn das sichtbare reCAPTCHA über appVerifier.render() gerendert wird, wird es nach einer kurzen Verzögerung automatisch aufgelöst. Das entspricht einem Nutzer, der sofort nach dem Rendern auf reCAPTCHA klickt. Die reCAPTCHA-Antwort läuft nach einiger Zeit ab und wird dann automatisch wieder aufgelöst.
• Unsichtbares reCAPTCHA: Das unsichtbare reCAPTCHA wird nicht automatisch beim Rendern aufgelöst, sondern beim appVerifier.verify()-Aufruf oder wenn nach einer kurzen Verzögerung auf den Button-Anker des reCAPTCHA geklickt wird. Die Antwort läuft nach einiger Zeit ebenfalls ab und wird erst nach dem appVerifier.verify()-Aufruf oder wenn noch einmal auf den Button-Anker des reCAPTCHA geklickt wird, automatisch behoben.

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 dieser beim Ablauf ausgelöst.

Nächste Schritte

Wenn sich ein Nutzer zum ersten Mal anmeldet, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, mit denen sich der Nutzer angemeldet hat, also mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen des Authentifizierungsanbieters. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps Ihres Projekts zu identifizieren, unabhängig davon, wie sich der Nutzer anmeldet.

• In Ihren Apps ist es am besten, den Authentifizierungsstatus des Nutzers zu ermitteln, indem Sie einen Observer für das Auth-Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Nutzers aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.

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

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

Rufen Sie signOut auf, um einen Nutzer abzumelden:

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

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

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