Catch up on everthing we announced at this year's Firebase Summit. Learn more

Authentifizieren Sie sich bei Firebase mit einer Telefonnummer mit JavaScript

Sie können Firebase Authentication verwenden, um einen Benutzer anzumelden, indem Sie eine SMS-Nachricht an das Telefon des Benutzers senden. Der Benutzer meldet sich mit einem Einmalcode an, der in der SMS-Nachricht enthalten ist.

Der einfachste Weg , Telefonnummer Sign-in hinzufügen , um Ihre Anwendung verwenden FirebaseUI , die ein Drop-in beinhaltet Anmelde-Widget , dass Geräte-Anmeldeströme für Telefonnummer Sign-in, sowie Passwort-basierte und föderierte Zeichen -in. In diesem Dokument wird beschrieben, wie Sie mit dem Firebase SDK einen Anmeldevorgang für eine Telefonnummer implementieren.

Bevor Sie beginnen

Wenn Sie nicht bereits haben, kopieren Sie die Initialisierung Ausschnitt aus der Firebase - Konsole zu einem Projekt , wie beschrieben Add Firebase zu Ihrem JavaScript - Projekt .

Sicherheitsbedenken

Die Authentifizierung mit nur einer Telefonnummer ist zwar bequem, aber weniger sicher als die anderen verfügbaren Methoden, da der Besitz einer Telefonnummer leicht zwischen Benutzern übertragen werden kann. Außerdem kann sich auf Geräten mit mehreren Benutzerprofilen jeder Benutzer, der SMS-Nachrichten empfangen kann, mit der Telefonnummer des Geräts bei einem Konto anmelden.

Wenn Sie die telefonnummernbasierte Anmeldung in Ihrer App verwenden, sollten Sie diese neben sichereren Anmeldemethoden anbieten und die Benutzer über die Sicherheitsabwägungen bei der Verwendung der Telefonnummernanmeldung informieren.

Aktivieren Sie die Telefonnummern-Anmeldung für Ihr Firebase-Projekt

Um Benutzer per SMS anzumelden, müssen Sie zunächst die Anmeldemethode Telefonnummer für Ihr Firebase-Projekt aktivieren:

  1. In der Firebase Konsole öffnen den Abschnitt Authentication.
  2. Auf der Sign-in - Methode Seite, aktivieren Sie die Telefonnummer Anmelde-Verfahren.
  3. Auf der gleichen Seite, wenn die Domäne , die Ihre App nicht im OAuth Redirect Domänen Abschnitt aufgeführt Host wird, fügen Sie Ihre Domain.

Das Kontingent von Firebase-Anmeldeanfragen für Telefonnummern ist hoch genug, sodass die meisten Apps nicht betroffen sind. Wenn Sie jedoch eine sehr große Anzahl von Benutzern mit Telefonauthentifizierung anmelden müssen, müssen Sie möglicherweise Ihren Preisplan aktualisieren. Siehe die Preisseite.

Richten Sie den reCAPTCHA-Verifier ein

Bevor Sie Benutzer mit ihren Telefonnummern anmelden können, müssen Sie die reCAPTCHA-Überprüfung von Firebase einrichten. Firebase verwendet reCAPTCHA, um Missbrauch zu verhindern, indem beispielsweise 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 Firebase SDK verwenden RecaptchaVerifier Objekt, Firebase erstellt automatisch und übernimmt alle notwendigen Client - Schlüssel und Geheimnisse.

Die RecaptchaVerifier Objektträger unsichtbar reCAPTCHA , die oft den Benutzer überprüfen kann jede Aktion des Benutzers , ohne dass, wie auch die reCAPTCHA - Widget, die immer Benutzer - Interaktion erfordert erfolgreich abzuschließen.

Das zugrunde liegende gerenderte reCAPTCHA kann nach den Vorlieben des Benutzers lokalisiert werden, indem der Sprachcode auf der Auth-Instanz aktualisiert wird, bevor das reCAPTCHA gerendert wird. Die oben genannte Lokalisierung gilt auch für die an den Benutzer gesendete SMS-Nachricht, die den Bestätigungscode enthält.

Webversion 9

import { getAuth } from "firebase/auth";

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

Webversion 8

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

Verwenden Sie unsichtbares reCAPTCHA

Um einen unsichtbaren reCAPTCHA zu verwenden, erstellen Sie ein RecaptchaVerifier Objekt mit der size Parametersatz invisible , die ID der Schaltfläche angeben , die Ihre Anmelde-Formular abschickt. Zum Beispiel:

Webversion 9

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

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

Webversion 8

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

Verwenden Sie das reCAPTCHA-Widget

So verwenden Sie den sichtbaren reCAPTCHA - Widget, erstellen Sie ein Element auf Ihrer Seite das Widget enthält, und dann ein erstellen RecaptchaVerifier Objekt, die ID des Containers angeben , wenn Sie dies tun. Zum Beispiel:

Webversion 9

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

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

Webversion 8

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

Optional: Geben Sie reCAPTCHA-Parameter an

Sie können Callback - Funktionen auf dem optional eingestellt RecaptchaVerifier Objekt , die aufgerufen werden , wenn der Benutzer löst die reCAPTCHA oder die reCAPTCHA abläuft , bevor der Benutzer das Formular abschickt:

Webversion 9

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

Webversion 8

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

Optional: Das reCAPTCHA vorab rendern

Wenn Sie die reCAPTCHA vorrendern wollen , bevor Sie eine Anmelde-Anfrage einreichen, Anruf render :

Webversion 9

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

Webversion 8

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

Nach dem render Entschlüssen, erhalten Sie das Widget - IDs reCAPTCHA, mit dem Sie telefonieren zum verwenden können reCAPTCHA API:

Webversion 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Webversion 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Senden Sie einen Bestätigungscode an das Telefon des Benutzers

So initiieren Telefonnummer Sign-in, präsentieren dem Anwender eine Schnittstelle , die Aufforderungen sie ihre Telefonnummer zur Verfügung zu stellen, und rufen Sie dann signInWithPhoneNumber auf Anfrage , dass Firebase einen Authentifizierungscode an das Telefon des Benutzers per SMS senden:

  1. Rufen Sie die Telefonnummer des Benutzers ab.

    Die rechtlichen Anforderungen variieren, aber als Best Practice und um die Erwartungen Ihrer Benutzer zu erfüllen, sollten Sie sie darüber informieren, dass sie bei der telefonischen Anmeldung möglicherweise eine SMS-Nachricht zur Bestätigung erhalten und Standardtarife gelten.

  2. Call signInWithPhoneNumber , vorbei an ihm die Telefonnummer des Benutzers und die RecaptchaVerifier zuvor erstellt wurde .

    Webversion 9

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

    Webversion 8

    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
          // ...
        });
    Wenn signInWithPhoneNumber zu einem Fehler führt, setzen Sie das reCAPTCHA so dass der Benutzer es erneut 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 gibt die reCAPTCHA Herausforderung für den Benutzer, und wenn der Benutzer die Herausforderung geht, fordert , dass Firebase - Authentifizierung eine SMS - Nachricht senden einen Bestätigungscode an das Telefon des Benutzers enthält.

Melden Sie den Benutzer mit dem Bestätigungscode an

Nach dem Aufruf von signInWithPhoneNumber gelingt es, den Benutzer auffordern , den Bestätigungscode einzugeben sie per SMS empfangen werden . Dann Zeichen in dem Benutzer durch den Code an das Passieren confirm Methode des ConfirmationResult Objekts , das zu übergeben wurde signInWithPhoneNumber ‚s Erfüllung Handler (das heißt, sein then Block). Zum Beispiel:

Webversion 9

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?)
  // ...
});

Webversion 8

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?)
  // ...
});

Wenn der Anruf zu confirm kann, wird der Benutzer erfolgreich angemeldet.

Holen Sie sich das Zwischenobjekt AuthCredential

Wenn Sie einen bekommen müssen AuthCredential Objekt für das Benutzerkonto, übergeben Sie den Bestätigungscode aus dem Bestätigungsergebnis und den Bestätigungscode zu PhoneAuthProvider.credential statt Aufruf confirm :

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

Anschließend können Sie den Benutzer mit den Anmeldeinformationen anmelden:

firebase.auth().signInWithCredential(credential);

Test mit fiktiven Telefonnummern

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

  • Testen Sie die Authentifizierung der Telefonnummer, ohne Ihr Nutzungskontingent zu verbrauchen.
  • Testen Sie die Authentifizierung der Telefonnummer, ohne eine tatsächliche SMS-Nachricht zu senden.
  • Führen Sie aufeinanderfolgende Tests mit derselben Telefonnummer durch, ohne gedrosselt zu werden. Dadurch wird das Risiko einer Ablehnung während des Überprüfungsprozesses im App Store minimiert, wenn der Prüfer zufällig dieselbe Telefonnummer zum Testen verwendet.
  • Testen Sie problemlos 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.
  • Schreiben Sie Integrationstests, ohne durch Sicherheitsprüfungen blockiert zu werden, die normalerweise auf echte Telefonnummern in einer Produktionsumgebung angewendet werden.

Fiktive Telefonnummern müssen diese Anforderungen erfüllen:

  1. Stellen Sie sicher, dass Sie Telefonnummern verwenden, die tatsächlich fiktiv sind und noch nicht existieren. Firebase Authentication ermöglicht es Ihnen nicht, vorhandene Telefonnummern, die von echten Benutzern verwendet werden, als Testnummern festzulegen. Eine Option ist 555 Präfix Zahlen als US Test Telefonnummern zu verwenden, zum Beispiel: +1 650-555-3434
  2. Telefonnummern müssen hinsichtlich Länge und anderen Einschränkungen korrekt formatiert sein. Sie durchlaufen weiterhin dieselbe Überprüfung wie die Telefonnummer eines echten Benutzers.
  3. Sie können bis zu 10 Telefonnummern für die Entwicklung hinzufügen.
  4. Verwenden Sie schwer zu erratende Testtelefonnummern/Codes und ändern Sie diese häufig.

Erstelle fiktive Telefonnummern und Bestätigungscodes

  1. In der Firebase Konsole öffnen den Abschnitt Authentication.
  2. Im Zeichen in Verfahren Registerkarte, aktivieren Sie die Telefonanbieter , wenn Sie nicht bereits haben.
  3. Öffnen Sie die Telefonnummern für die Prüfung Akkordeon - Menü.
  4. Geben Sie die Telefonnummer , die Sie testen möchten, zum Beispiel: +1 650-555-3434.
  5. Geben Sie den 6-stelligen Bestätigungscode für die jeweilige Nummer, zum Beispiel: 654.321.
  6. Fügen Sie die Nummer. Bei Bedarf können Sie die Telefonnummer und ihren Code löschen, indem Sie mit der Maus über die entsprechende Zeile fahren und auf das Papierkorbsymbol klicken.

Manuelle Prüfung

Sie können direkt eine fiktive Telefonnummer in Ihrer Bewerbung verwenden. Auf diese Weise können Sie während der Entwicklungsphase manuelle Tests durchführen, ohne auf Kontingentprobleme oder Drosselung zu stoßen. Sie können auch direkt von einem iOS-Simulator oder Android-Emulator testen, ohne dass Google Play Services installiert ist.

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

Nach Abschluss der Anmeldung wird ein Firebase-Benutzer mit dieser Telefonnummer erstellt. Der Benutzer hat dasselbe Verhalten und dieselben Eigenschaften wie ein echter Telefonnummernbenutzer und kann auf dieselbe Weise auf Realtime Database/Cloud Firestore und andere Dienste zugreifen. Der während dieses Vorgangs geprägte ID-Token hat die gleiche Signatur wie ein echter Telefonnummernbenutzer.

Eine weitere Möglichkeit ist eine Test Rolle festgelegt über benutzerdefinierte Ansprüche auf diesem Benutzer sie als gefälschten Benutzer zu unterscheiden , wenn Sie den Zugriff weiter einschränken mögen.

Integrationstests

Zusätzlich zu manuellen Tests bietet Firebase Authentication APIs, mit denen Sie Integrationstests für Telefonauthentifizierungstests schreiben können. Diese APIs deaktivieren die App-Überprüfung, indem sie die reCAPTCHA-Anforderung im Web und stille Push-Benachrichtigungen in iOS deaktivieren. Dies macht Automatisierungstests in diesen Flows möglich und einfacher zu implementieren. Darüber hinaus bieten sie die Möglichkeit, sofortige Überprüfungsabläufe auf Android zu testen.

Auf Web, Set appVerificationDisabledForTesting zu true , bevor Sie den Rendering firebase.auth.RecaptchaVerifier . Dadurch wird das reCAPTCHA automatisch aufgelöst, sodass Sie die Telefonnummer übergeben können, ohne sie manuell zu lösen. Beachten Sie, dass die Anmeldung mit einer nicht-fiktionalen Telefonnummer trotz deaktiviertem reCAPTCHA fehlschlägt. 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-Verifizierer verhalten sich unterschiedlich, wenn die App-Verifizierung deaktiviert ist:

  • Visible ReCAPTCHA: Wenn die sichtbare ReCAPTCHA über gerendert wird appVerifier.render() , es löst sich automatisch nach einem Bruchteil einer Sekunde Verzögerung. Dies entspricht einem Benutzer, 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.
  • Unsichtbare reCAPTCHA: Die unsichtbare reCAPTCHA nicht automatisch Entschlossenheit auf Rendering und stattdessen tut dies auf der appVerifier.verify() Anruf oder wenn die Taste Anker des reCAPTCHA ist nach einem Bruchteil einer Sekunde Verzögerung angeklickt. In ähnlicher Weise wird die Reaktion nach einiger Zeit verfallen und werden nur Auto-resolve entweder nach dem appVerifier.verify() Anruf oder wenn die Taste Anker des reCAPTCHA wieder angeklickt.

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

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal anmeldet, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – d. h. Benutzername und Kennwort, Telefonnummer oder Authentifizierungsanbieterinformationen – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Benutzer in jeder App in Ihrem Projekt zu identifizieren, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Anwendungen, ist der empfohlene Weg , den Auth - Status Ihres Benutzers zu kennen , einen Beobachter auf dem einzustellen Auth Objekt. Sie können dann bekommen den grundlegenden Profilinformationen des Benutzers aus dem User Siehe Benutzer verwalten .

  • In Ihrer Datenbank und Firebase Realtime Cloud Storage Sicherheitsregeln , können Sie die angemeldeten Nutzer die eindeutige Benutzer - ID aus der bekommen auth Variable, und es verwenden , um steuern kann ein Benutzer Zugriff , welche Daten.

Sie können Benutzer erlauben , durch mehrere Authentifizierungsanbieter anmelden, um Ihre App Verknüpfung Auth - Provider - Anmeldeinformationen zu einem vorhandenen Benutzerkonto.

Um einen Benutzer abzumelden, rufen signOut :

Webversion 9

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

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

Webversion 8

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