Diese Seite wurde von der Cloud Translation API übersetzt.

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.

Die einfachste Möglichkeit, die Anmeldung mit Telefonnummer in Ihre App einzubinden, ist die Verwendung von FirebaseUI. Diese Bibliothek enthält ein Drop-in-Anmeldewidget, das Anmeldevorgänge 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

Falls noch nicht geschehen, kopieren Sie das Initialisierungssnippet aus der Firebase Console 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 Nutzerprofilen jeder Nutzer, der SMS empfangen kann, mit der Telefonnummer des Geräts in einem Konto anmelden.

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

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

Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung.
Aktivieren Sie auf der Seite Sign-in Method (Anmeldemethode) die Anmeldemethode Phone Number (Telefonnummer).
Optional: Legen Sie auf der Seite Einstellungen eine Richtlinie für die Regionen fest, in die Sie SMS-Nachrichten senden möchten. Durch Festlegen einer SMS-Regionsrichtlinie können Sie Ihre Apps vor SMS-Missbrauch schützen.
Wenn die Domain, auf der Ihre App gehostet wird, auf derselben Seite nicht im Bereich OAuth-Weiterleitungsdomains aufgeführt ist, fügen Sie sie hinzu. Hinweis: „localhost“ ist für die Telefonauthentifizierung nicht als gehostete Domain zulässig.

reCAPTCHA-Verifizierung einrichten

Bevor Sie Nutzer mit ihren Telefonnummern anmelden können, müssen Sie den reCAPTCHA-Verifizierer 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 RecaptchaVerifier des Firebase SDK verwenden, erstellt und verarbeitet Firebase alle erforderlichen Clientschlüssel und Secrets automatisch.

Das RecaptchaVerifier-Objekt unterstützt unsichtbares reCAPTCHA, das den Nutzer häufig ohne Interaktion überprüfen 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 Sie den Sprachcode in der Auth-Instanz aktualisieren, bevor Sie das reCAPTCHA rendern. Die oben genannte Lokalisierung gilt auch für die SMS, 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 mit dem Parameter size auf invisible und geben Sie die ID der Schaltfläche an, mit der das 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

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:

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 Mobiltelefon des Nutzers senden

Um die Anmeldung mit Telefonnummer zu initiieren, präsentieren Sie dem Nutzer eine Schnittstelle, 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:

Die 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 üblichen Gebühren anfallen.

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 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 für den Nutzer ausgegeben. Wenn der Nutzer die Aufgabe besteht, wird angefordert, dass Firebase Authentication eine SMS mit einem Bestätigungscode an das Smartphone des Nutzers sendet.

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 Methode confirm des ConfirmationResult-Objekts übergeben, das an den Fulfillment-Handler von signInWithPhoneNumber (d. h. an 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 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 Console einrichten. Das Testen mit fiktiven Telefonnummern bietet folgende Vorteile:

Authentifizierung der Telefonnummer testen, ohne das Nutzungskontingent zu belasten
Testen Sie die Authentifizierung der Telefonnummer, 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, 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 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:

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
Telefonnummern müssen hinsichtlich Länge und anderer Einschränkungen korrekt formatiert sein. Sie durchlaufen dieselbe Validierung wie die Telefonnummer eines echten Nutzers.
Sie können bis zu zehn Telefonnummern für die Entwicklung hinzufügen.
Verwenden Sie Testtelefonnummern/-codes, die schwer zu erraten sind, und ändern Sie diese häufig.

Fiktive Telefonnummern und Bestätigungscodes erstellen

Öffnen Sie in der Firebase-Konsole den Abschnitt Authentifizierung.
Aktivieren Sie auf dem Tab Anmeldemethode den Telefonanbieter, falls noch nicht geschehen.
Öffnen Sie das Akkordeonmenü Telefonnummern für Tests.
Geben Sie die Telefonnummer an, die Sie testen möchten, z. B. +1 650-555-3434.
Geben Sie den sechsstelligen Bestätigungscode für diese Nummer an, z. B. 654321.
Fügen Sie die Nummer hinzu. Bei Bedarf können Sie die Telefonnummer und den zugehörigen Code löschen, indem Sie mit dem Mauszeiger auf die entsprechende Zeile zeigen 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 echter Nutzer mit Telefonnummer und kann auf Realtime Database/Cloud Firestore und andere Dienste auf dieselbe Weise zugreifen. Das in diesem Prozess generierte ID-Token hat dieselbe Signatur wie ein echter Nutzer mit Telefonnummer.

Eine weitere Option ist, diesen Nutzern über benutzerdefinierte Anforderungen eine Testrolle zuzuweisen, um sie als Fakenutzer zu kennzeichnen, wenn Sie den Zugriff weiter einschränken möchten.

Integrationstests

Zusätzlich zu manuellen Tests bietet Firebase Authentication APIs, die Sie bei der Entwicklung von Integrationstests für die Telefonnummernauthentifizierung unterstützen. Mit diesen APIs wird die App-Überprüfung deaktiviert, indem die reCAPTCHA-Anforderung im Web und die unregelmäßigen Push-Benachrichtigungen unter iOS deaktiviert werden. So sind automatisierte Tests in diesen Abläufen möglich und lassen sich leichter 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 simulierte reCAPTCHA-App-Prüfungen 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 ausgeblendet. 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 automatisch wieder aufgelöst.
Unsichtbares reCAPTCHA: Das unsichtbare reCAPTCHA wird beim Rendern nicht automatisch ausgeblendet, sondern erst beim appVerifier.verify()-Aufruf oder wenn nach einer kurzen Verzögerung auf den Schaltflächenanker des reCAPTCHA geklickt wird. Ebenso läuft die Antwort nach einiger Zeit ab und wird erst nach dem appVerifier.verify()-Aufruf oder wenn der Schaltflächenanker des reCAPTCHA noch einmal angeklickt wird, automatisch ausgeblendet.

Immer 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 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 Variablen auth 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:

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