Diese Seite wurde von der Cloud Translation API übersetzt.

Mit JavaScript über eine Telefonnummer mit Firebase authentifizieren
Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Sie können Firebase Authentication verwenden, um einen Nutzer anzumelden, indem Sie eine SMS an das Smartphone des Nutzers senden. Der Nutzer meldet sich mit einem Einmalcode an, der in der SMS enthalten ist.

Die einfachste Möglichkeit, Ihrer App die Anmeldung per Telefonnummer hinzuzufügen, ist die Verwendung von FirebaseUI. Diese enthält ein Anmelde-Widget, das Anmeldeabläufe für die Anmeldung per Telefonnummer sowie die passwortbasierte und föderierte Anmeldung implementiert. In diesem Dokument wird beschrieben, wie Sie mit dem Firebase SDK einen Anmeldevorgang per Telefonnummer implementieren.

Hinweis

Falls noch nicht geschehen, kopiere das Initialisierungs-Snippet aus der Firebase Console in dein Projekt, wie unter Firebase deinem JavaScript-Projekt hinzufügen beschrieben.

Sicherheitsbedenken

Die Authentifizierung mit nur einer Telefonnummer ist zwar praktisch, aber weniger sicher als die anderen verfügbaren Methoden, da die Inhaberschaft einer Telefonnummer leicht zwischen Nutzern übertragen werden kann. Auf Geräten mit mehreren Nutzerprofilen kann sich jeder Nutzer, der SMS empfangen kann, mit der Telefonnummer des Geräts in einem Konto anmelden.

Wenn Sie in Ihrer App die standortbasierte Anmeldung per Telefonnummer anbieten, sollten Sie sie zusammen mit sichereren Anmeldemethoden anbieten und die 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 Console den Bereich Authentifizierung.
Aktivieren Sie auf der Seite Anmeldemethode die Anmeldemethode Telefonnummer.
Wenn die Domain, auf der Ihre App gehostet wird, auf derselben Seite nicht im Abschnitt OAuth-Weiterleitungsdomains aufgeführt ist, fügen Sie sie hinzu. Hinweis: „localhost“ ist für die telefonische Authentifizierung 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, indem sichergestellt wird, dass Anfragen zur Bestätigung der Telefonnummer von einer der zulässigen Domains Ihrer Anwendung stammen.

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

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 Einstellungen des Nutzers angepasst werden, indem Sie den Sprachcode in der Auth-Instanz aktualisieren, bevor das reCAPTCHA gerendert wird. Die oben genannte Lokalisierung gilt auch für die SMS mit dem Bestätigungscode, die an den Nutzer gesendet wird.

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, über die 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 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

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

Senden Sie einen Bestätigungscode an das Mobiltelefon des Nutzers.

Wenn Sie die Anmeldung per Telefonnummer starten möchten, zeigen Sie dem Nutzer eine Benutzeroberfläche an, in der er aufgefordert wird, seine Telefonnummer anzugeben. Rufen Sie dann signInWithPhoneNumber auf, um Firebase zu bitten, dem Nutzer per SMS einen Authentifizierungscode zu senden:

Telefonnummer des Nutzers abrufen

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

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

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

Wenn der Aufruf von signInWithPhoneNumber erfolgreich war, bitte den Nutzer, den Bestätigungscode einzugeben, den er per SMS erhalten hat. Melde den Nutzer an, indem du den Code an die confirm-Methode des ConfirmationResult-Objekts übergibst, 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 angemeldet.

Zwischenobjekt „AuthCredential“ abrufen

Wenn du ein AuthCredential-Objekt für das Konto des Nutzers abrufen möchtest, übergebe 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. Der Test mit fiktiven Telefonnummern bietet folgende Vorteile:

Die Authentifizierung per Telefonnummer testen, ohne das Nutzungskontingent zu verbrauchen
Testen Sie die Authentifizierung per Telefonnummer, ohne eine SMS zu senden.
Sie können aufeinanderfolgende Tests mit derselben Telefonnummer ausführen, ohne dass es zu Drosselung kommt. So wird das Risiko minimiert, dass die App bei der Überprüfung im App Store abgelehnt wird, wenn der Prüfer zufällig dieselbe Telefonnummer für die Tests verwendet.
Sie können Ihre Apps ohne zusätzlichen Aufwand in Entwicklungsumgebungen 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 folgende Anforderungen erfüllen:

Achten Sie darauf, dass Sie Telefonnummern verwenden, die tatsächlich fiktiv sind und noch nicht vergeben wurden. Mit Firebase Authentication können Sie keine Telefonnummern festlegen, die von echten Nutzern verwendet werden. Eine Möglichkeit besteht darin, als US-Testtelefonnummern Nummern mit dem Präfix „555“ zu verwenden, z. B.: +1 650-555-3434
Telefonnummern müssen hinsichtlich Länge und anderer Einschränkungen richtig formatiert sein. Sie werden jedoch genauso wie die Telefonnummer eines echten Nutzers überprüft.
Sie können bis zu zehn Telefonnummern für die Entwicklungszwecke hinzufügen.
Verwenden Sie Testtelefonnummern/-codes, die schwer zu erraten sind, und ändern Sie diese häufig.

Erstellen Sie fiktive Telefonnummern und Bestätigungscodes.

Öffnen Sie in der Firebase Console den Bereich 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 ein, z. B. 654321.
Fügen Sie die Nummer hinzu. Falls erforderlich, können Sie die Telefonnummer und den Code löschen. Bewegen Sie dazu den Mauszeiger auf die entsprechende Zeile und klicken Sie auf das Papierkorbsymbol.

Manuelle Tests

Sie können sofort mit der Verwendung einer fiktiven Telefonnummer in Ihrer Anwendung beginnen. So können Sie während der Entwicklungsphase 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 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 bei diesem Vorgang erstellte ID-Token hat dieselbe Signatur wie ein Nutzer mit einer echten Telefonnummer.

Eine weitere Option besteht darin, diesen Nutzern über benutzerdefinierte Ansprüche eine Testrolle zuzuweisen, um sie als Fake-Nutzer 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 Telefonauthentifizierung unterstützen. Mit diesen APIs wird die App-Überprüfung deaktiviert, indem die reCAPTCHA-Anforderung im Web und die Funktion für lautlose Push-Benachrichtigungen unter iOS deaktiviert wird. Dadurch sind automatisierte Tests in diesen Abläufen möglich und einfacher zu implementieren. Außerdem können Sie damit Instant-Bestätigungsabläufe auf Android-Geräten testen.

Legen Sie im Web appVerificationDisabledForTesting auf true fest, bevor Sie die firebase.auth.RecaptchaVerifier rendern. Dadurch wird das reCAPTCHA automatisch gelöst und Sie können die Telefonnummer weitergeben, ohne es manuell lösen zu müssen. Auch wenn reCAPTCHA deaktiviert ist, kann die Anmeldung nicht abgeschlossen werden, wenn Sie eine echte 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 Verzögerung von einem Bruchteil einer Sekunde automatisch ausgeblendet. Das entspricht dem Klicken auf das reCAPTCHA durch einen Nutzer direkt nach dem Rendern. Die reCAPTCHA-Antwort läuft nach einiger Zeit ab und wird dann automatisch wieder aufgelöst.
Unsichtbares reCAPTCHA: Das unsichtbare reCAPTCHA wird nicht beim Rendern automatisch ausgeblendet, sondern 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 nur nach dem appVerifier.verify()-Aufruf oder wenn der Anker der reCAPTCHA-Schaltfläche noch einmal angeklickt wird, automatisch aufgelöst.

Wenn ein simuliertes reCAPTCHA ausgeblendet 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

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

In Ihren Apps sollten Sie den Authentifizierungsstatus des Nutzers am besten über einen Beobachter für das Auth-Objekt ermitteln. Die grundlegenden Profilinformationen des Nutzers können Sie dann 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 über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Wenn Sie einen Nutzer abmelden möchten, rufen Sie signOut auf:

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