Mit JavaScript über eine Telefonnummer mit Firebase authentifizieren

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

Die einfachste Möglichkeit, die Anmeldung per Telefonnummer in Ihre App einzubinden, ist die Verwendung von FirebaseUI, das ein Drop-in-Anmeldewidget enthält, das Anmeldevorgänge für die Anmeldung per Telefon nummer sowie für die passwortbasierte und föderierte Anmeldung implementiert. In diesem Dokument wird beschrieben, wie Sie einen Anmeldevorgang per Telefonnummer mit dem Firebase SDK implementieren.

Telefonnummern, die Endnutzer zur Authentifizierung angeben, werden von Google gesendet und gespeichert, um Spam und Missbrauch in den Google-Diensten zu verhindern, einschließlich, aber nicht beschränkt auf Firebase. Entwickler müssen sicherstellen, dass sie die entsprechende Endnutzereinwilligung haben, bevor sie den Firebase Authentication auf Telefonnummern basierenden Anmeldungsdienst nutzen.

Hinweis

Falls noch nicht geschehen, kopieren Sie den Initialisierungsschnipsel aus 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 Nutzern übertragen werden kann. Außerdem kann sich auf Geräten mit mehreren Nutzer profilen 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 zusammen mit sichereren Anmeldemethoden anbieten und Nutzer über die Sicherheits risiken der Anmeldung per Telefonnummer informieren.

Anmeldung per Telefonnummer für Ihr Firebase-Projekt aktivieren

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

1. Öffnen Sie in der Firebase Konsole den Bereich Authentication.
2. Aktivieren Sie auf der Seite Anmeldemethode die Anmeldemethode Telefonnummer.
3. Legen Sie auf der Seite Einstellungen eine Richtlinie für die Regionen fest, an die Sie SMS-Nachrichten senden möchten oder nicht. Bei neuen Projekten sind in der Standardrichtlinie keine Regionen zulässig.
4. Wenn die Domain, in der Ihre App gehostet wird, auf derselben Seite nicht im OAuth-Weiterleitungsdomains Bereich aufgeführt ist, fügen Sie sie hinzu. Beachten Sie, dass localhost für die Telefonauthentifizierung nicht als gehostete Domain zulässig ist.

reCAPTCHA-Verifizierung einrichten

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

Sie müssen einen reCAPTCHA-Client nicht manuell einrichten. Wenn Sie das Objekt des Firebase SDKRecaptchaVerifier verwenden, erstellt und verwaltet Firebase automatisch alle erforderlichen Clientschlüssel und Secrets.

Das RecaptchaVerifier Objekt unterstützt unsichtbares reCAPTCHA, das den Nutzer häufig ohne Nutzer aktion überprüfen kann, sowie das reCAPTCHA-Widget, für das immer eine Nutzerinteraktion erforderlich ist, um erfolgreich abgeschlossen zu werden.

Das zugrunde liegende gerenderte reCAPTCHA kann an die Präferenz 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-Nachricht, die an den Nutzer gesendet wird und 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 Sie ein unsichtbares reCAPTCHA verwenden möchten, erstellen Sie ein RecaptchaVerifier Objekt wobei der size Parameter auf invisible gesetzt ist, und geben Sie die ID der Schaltfläche an, mit der 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 ein Element auf Ihrer Seite, das das Widget enthält, und erstellen Sie 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

Sie können optional 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:

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 des reCAPTCHAs, mit der Sie die reCAPTCHA API aufrufen können:

Web

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

Web

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

Bestätigungscode an das Smartphone des Nutzers senden

Um die Anmeldung per Telefonnummer zu starten, präsentieren Sie dem Nutzer eine Oberfläche, in der er seine Telefonnummer angeben kann. Rufen Sie dann signInWithPhoneNumber auf, um Firebase aufzufordern, einen Authentifizierungscode per SMS an das Smartphone des Nutzers zu senden:

1. Rufen Sie die Telefonnummer des Nutzers ab.

   Die rechtlichen Anforderungen variieren, aber als Best Practice und um die Erwartungen Ihrer Nutzer zu erfüllen, sollten Sie sie darüber informieren, dass sie bei der Anmeldung per Telefonnummer möglicherweise eine SMS zur Bestätigung erhalten und dass die üblichen Gebühren anfallen.

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

   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 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);
   });

   Hinweis: Informationen zu den geltengenden Nutzungslimits und Kontingenten finden Sie unter Firebase Authentication Limits.

Die Methode signInWithPhoneNumber stellt dem Nutzer die reCAPTCHA-Aufgabe und fordert Firebase Authentication auf, eine SMS mit einem Bestätigungscode an das Smartphone des Nutzers zu senden, wenn der Nutzer die Aufgabe besteht.

Um Missbrauch zu verhindern, begrenzt Firebase die Anzahl der SMS-Nachrichten, die innerhalb eines bestimmten Zeitraums an eine einzelne Telefonnummer gesendet werden können. Wenn Sie dieses Limit überschreiten, werden Anfragen zur Bestätigung der Telefonnummer möglicherweise gedrosselt. Wenn dieses Problem während der Entwicklung auftritt, verwenden Sie eine andere Telefonnummer für Tests oder versuchen Sie es später noch einmal.

Nutzer mit dem Bestätigungscode anmelden

Nachdem der Aufruf von signInWithPhoneNumber erfolgreich war, fordern Sie den Nutzer auf, den Bestätigungscode einzugeben, den er per SMS erhalten hat. Melden Sie den Nutzer dann an, indem Sie den Code an die Methode confirm des ConfirmationResult-Objekts übergeben, das an den Fulfillment-Handler von signInWithPhoneNumber (d. h. den then-Block) übergeben wurde. 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.

Zwischenobjekt `AuthCredential` abrufen

Wenn Sie ein AuthCredential-Objekt für das Konto des Nutzers abrufen müssen, ü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 in der Firebase Konsole fiktive Telefonnummern für die Entwicklung einrichten. Tests mit fiktiven Telefon nummern bieten folgende Vorteile:

• Sie können die Authentifizierung per Telefonnummer testen, ohne Ihr Nutzungskontingent zu verbrauchen.
• Sie können die Authentifizierung per Telefonnummer testen, ohne eine tatsächliche SMS zu senden.
• Sie können aufeinanderfolgende Tests mit derselben Telefonnummer ausführen, ohne dass es zu Drosselung kommt. Dadurch wird das Risiko einer Ablehnung während der App-Überprüfung im App-Store minimiert, wenn der Prüfer dieselbe Telefonnummer für Tests verwendet.
• Sie können in Entwicklungsumgebungen ohne zusätzlichen Aufwand testen, z. B. in einem iOS-Simulator oder einem Android-Emulator ohne Google Play-Dienste.
• Sie können Integrationstests schreiben, ohne von 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. Firebase Authentication lässt nicht zu, dass Sie vorhandene Telefonnummern, die von echten Nutzern verwendet werden, als Testnummern festlegen. Eine Möglichkeit besteht darin, Nummern mit der Vorwahl 555 als US-Testtelefonnummern zu verwenden, z. B.: [phone]
2. Telefonnummern müssen hinsichtlich Länge und anderer Einschränkungen korrekt formatiert sein. Sie durchlaufen dieselbe Bestätigung wie die Telefonnummer eines echten Nutzers.
3. Sie können bis zu zehn Telefonnummern für die Entwicklung hinzufügen.
4. Verwenden Sie Testtelefonnummern und ‑codes, die schwer zu erraten sind, und ändern Sie sie häufig.

Fiktive Telefonnummern und Bestätigungscodes erstellen

1. Öffnen Sie in der Firebase Konsole den Authentication Bereich.
2. Aktivieren Sie auf dem Tab Anmeldemethode den Telefonanbieter, falls noch nicht geschehen.
3. Öffnen Sie das Akkordeonmenü Telefonnummern für Tests.
4. Geben Sie die Telefonnummer ein, die Sie testen möchten, z. B. [phone].
5. Geben Sie den sechsstelligen Bestätigungscode für diese Nummer ein, z. B. 654321.
6. Klicken Sie auf Hinzufügen. Bei Bedarf können Sie die Telefonnummer und den zugehörigen Code löschen. Bewegen Sie dazu den Mauszeiger auf die entsprechende Zeile und klicken Sie auf das Papierkorbsymbol.

Manuelle Tests

Sie können eine fiktive Telefonnummer direkt in Ihrer App verwenden. So können Sie während der Entwicklungsphasen manuelle Tests durchführen, ohne auf Kontingentprobleme oder Drosselung zu stoßen. Sie können auch direkt über einen iOS-Simulator oder Android-Emulator testen, ohne dass Google Play-Dienste installiert sind.

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 echter Nutzer mit Telefonnummer und kann auf dieselbe Weise auf Realtime Database/Cloud Firestore und andere Dienste zugreifen. Das während dieses Vorgangs erstellte ID-Token hat dieselbe Signatur wie das eines echten Nutzers mit Telefonnummer.

Da das ID-Token für die fiktive Telefonnummer dieselbe Signatur wie das eines echten Nutzers mit Telefonnummer hat, ist es wichtig, diese Nummern sicher zu speichern und sie kontinuierlich zu recyceln.

Alternativ können Sie diesen Nutzern über benutzerdefinierte Ansprüche eine Testrolle zuweisen, um sie als gefälschte Nutzer 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. Mit diesen APIs wird die App-Überprüfung deaktiviert, indem die reCAPTCHA Anforderung im Web und in Push-Benachrichtigungen im Hintergrund unter iOS deaktiviert wird. So können Sie in diesen Abläufen automatisierte Tests durchführen und sie einfacher implementieren. Außerdem können Sie damit sofortige Bestätigungsabläufe unter Android testen.

Achten Sie darauf, dass die App-Überprüfung für Produktions-Apps nicht deaktiviert ist und dass in Ihrer Produktions-App keine fiktiven Telefonnummern fest codiert sind.

Setzen Sie im Web appVerificationDisabledForTesting auf true bevor Sie die firebase.auth.RecaptchaVerifier rendern. Dadurch wird das reCAPTCHA automatisch aufgelöst, sodass Sie die Telefonnummer übergeben können, ohne es manuell zu lösen. Beachten Sie, dass die Anmeldung auch dann fehlschlägt, wenn reCAPTCHA deaktiviert ist und 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 = "[phone]";
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-Verifizierer verhalten sich anders, 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 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 erst beim Aufruf von appVerifier.verify()oder wenn nach einer kurzen Verzögerung auf die Schaltflächenverankerung des reCAPTCHAs geklickt wird. Ebenso läuft die Antwort nach einiger Zeit ab und wird erst nach dem Aufruf von appVerifier.verify() oder wenn noch einmal auf die Schaltflächenverankerung des reCAPTCHAs geklickt wird, automatisch aufgelöst.

Wenn ein simuliertes 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 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 Telefon nummer 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 empfehlenswert, den Authentifizierungsstatus Ihres 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 den Firebase Realtime Database und Cloud Storage Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

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

Rufen Sie signOut auf, um einen Nutzer abzumelden:

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