Mit JavaScript über eine Telefonnummer mit Firebase authentifizieren

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 einmaligen Code an, der im SMS.

Am einfachsten können Sie die Anmeldung über eine Telefonnummer in Ihrer App mit FirebaseUI mit einem Widget für die Anmeldung, das Anmeldevorgänge für das Smartphone implementiert. Zahlenanmeldung sowie passwortbasierte und föderierte Anmeldung. In diesem Dokument wird beschrieben, wie Sie mit dem Firebase SDK einen Anmeldevorgang per Telefonnummer implementieren.

Von Endnutzern zur Authentifizierung angegebene Telefonnummern werden gesendet und gespeichert von Google, um den Spam- und Missbrauchspräventionsprozess in allen Google-Diensten zu verbessern. einschließlich, aber nicht beschränkt auf Firebase. Entwickler müssen die Einwilligung der Endnutzer einholen, bevor sie den Anmeldedienst für Telefonnummern von Firebase Authentication verwenden.

Hinweis

Falls noch nicht geschehen, kopieren Sie das Initialisierungs-Snippet aus der Firebase Console in Ihr Projekt, wie unter Firebase Ihrem JavaScript-Projekt hinzufügen beschrieben.

Sicherheitsbedenken

Die Authentifizierung ü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. 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.

Anmeldung per Telefonnummer für Ihr Firebase-Projekt aktivieren

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

1. Öffnen Sie in der Firebase Console den Bereich Authentifizierung.
2. Aktivieren Sie auf der Seite Anmeldemethode die Anmeldemethode Telefonnummer.
3. Falls die Domain, auf der Ihre App gehostet wird, auf derselben Seite nicht in der OAuth-Weiterleitungsdomains auf und fügen Sie Ihre Domain 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 sie einrichten reCAPTCHA-Verifizierung von Firebase. 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 reCAPTCHA-Client nicht manuell einrichten. wenn Sie die Funktion RecaptchaVerifier-Objekt des Firebase SDK, Firebase automatisch alle erforderlichen Clientschlüssel und -geheimnisse erstellt und verarbeitet.

Das RecaptchaVerifier-Objekt unterstützt unsichtbar reCAPTCHA, mit dem sich Nutzer oft bestätigen lassen, ohne dass ein Nutzer erforderlich ist. und das reCAPTCHA-Widget, das immer eine Nutzerinteraktion erfordert. abgeschlossen wird.

Das zugrunde liegende gerenderte reCAPTCHA kann nach den Vorgaben des Nutzers lokalisiert werden, indem das Sprachcode auf der Auth-Instanz vor dem Rendern des reCAPTCHA. Die oben genannte Lokalisierung gilt auch für die SMS mit dem Bestätigungscode, die an den Nutzer gesendet wird.

Web

Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

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 du ein unsichtbares reCAPTCHA verwenden möchtest, musst du ein RecaptchaVerifier-Objekt erstellen wobei der Parameter size auf invisible festgelegt ist und Folgendes angibt: Die ID der Schaltfläche, über die Ihr Anmeldeformular gesendet wird. Beispiel:

Web

Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

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, um das Widget enthalten und dann ein RecaptchaVerifier-Objekt erstellen, geben Sie dabei die ID des Containers an. Hier einige Beispiele:

Web

Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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

Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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

Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

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 von reCAPTCHA, die die Sie verwenden können, um die reCAPTCHA-API:

Web

Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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

Web

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

Bestätigungscode an die Telefonnummer des Nutzers senden

Wenn Sie die Anmeldung per Telefonnummer initiieren 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:

1. Telefonnummer des Nutzers abrufen

   Als Best Practice gelten unterschiedliche rechtliche Anforderungen. und die Erwartungen der Nutzenden zu definieren, sollten Sie sie informieren, erhalten sie zur Bestätigung per SMS fallen Gebühren an.

2. signInWithPhoneNumber aufrufen und an das Smartphone des Nutzers übergeben und die RecaptchaVerifier, die Sie zuvor erstellt haben.

   Web

   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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

   Hinweis: Unter Firebase Authentication finden Sie Informationen zu den geltenden Nutzungslimits und Kontingenten.

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.

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

Nutzer mit Bestätigungscode anmelden

Nach dem erfolgreichen Aufruf von signInWithPhoneNumber fordern Sie die Nutzer, den Bestätigungscode einzugeben, den sie per SMS erhalten haben. Nutzer anmelden indem Sie den Code an die confirm-Methode der ConfirmationResult-Objekt, das an übergeben wurde Der Auftragsausführungs-Handler von signInWithPhoneNumber (d. h. seine Block then). Beispiel:

Web

Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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.

AuthCredential-Zwischenobjekt abrufen

Wenn Sie ein AuthCredential-Objekt für das Objekt den Bestätigungscode aus dem Bestätigungsergebnis Bestätigungscode an PhoneAuthProvider.credential statt an confirm wird aufgerufen:

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

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

firebase.auth().signInWithCredential(credential);

Mit fiktiven Telefonnummern testen

Über die Firebase-Konsole können Sie fiktive Telefonnummern für die Entwicklung einrichten. Mit fiktivem Smartphone testen Zahlen bietet folgende Vorteile:

• Testen Sie die Authentifizierung der Telefonnummer, ohne Ihr Nutzungskontingent zu verbrauchen.
• Testen Sie die Authentifizierung per Telefonnummer, ohne eine SMS zu senden.
• Aufeinanderfolgende Tests mit derselben Telefonnummer ausführen, ohne dass dies gedrosselt wird. Dieses minimiert das Risiko einer Ablehnung während der Überprüfung im App-Shop, falls der Prüfer die App Telefonnummer für den Test.
• 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 die folgenden Anforderungen erfüllen:

1. Verwenden Sie Telefonnummern, 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.: [phone]
2. Telefonnummern müssen im Hinblick auf Länge und andere Einschränkungen. Sie werden jedoch genauso wie die Telefonnummer eines echten Nutzers überprüft.
3. Sie können bis zu zehn Telefonnummern für die Entwicklungszwecke hinzufügen.
4. Verwenden Sie Testtelefonnummern/-codes, die schwer zu erraten und zu ändern sind häufig verwendet wird.

Erstellen von fiktiven Telefonnummern und Bestätigungscodes

1. Öffnen Sie in der Firebase Console den Bereich Authentifizierung.
2. Aktivieren Sie auf dem Tab Anmeldemethode den Telefonanbieter, falls Sie das noch nicht getan haben.
3. Öffnen Sie das Akkordeonmenü Telefonnummern für Tests.
4. Geben Sie die Telefonnummer an, die Sie testen möchten, z. B. [phone].
5. Geben Sie den sechsstelligen Bestätigungscode für diese Nummer ein, z. B. 654321.
6. Fügen Sie die Nummer hinzu. Bei Bedarf können Sie die Telefonnummer und indem Sie mit der Maus auf die entsprechende Zeile zeigen und auf das Papierkorbsymbol klicken.

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

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

Eine weitere Möglichkeit 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. Bei diesen APIs wird die App-Überprüfung deaktiviert, indem das reCAPTCHA deaktiviert wird im Web und stille Push-Benachrichtigungen unter iOS. Dadurch werden automatisierte Tests in und einfacher zu implementieren. Außerdem können Sie damit Instant-Bestätigungsabläufe auf Android-Geräten testen.

Achten Sie darauf, dass die App-Bestätigung für Produktions-Apps und dass in Ihrer Produktions-App keine fiktiven Telefonnummern hartcodiert sind.

Im Web appVerificationDisabledForTesting festlegen auf true vor dem Rendern des firebase.auth.RecaptchaVerifier. 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 = "[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-Verifizierung verhalten sich bei der App-Überprüfung anders Deaktiviert:

• Sichtbares reCAPTCHA: Wenn das sichtbare reCAPTCHA über appVerifier.render() wird sie automatisch nach dem Bruchteil einer Sekunde aufgelöst. Verzögerung. 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 beim Rendern nicht automatisch aufgelöst, sondern im appVerifier.verify()oder wenn der Schaltflächenanker von reCAPTCHA die innerhalb einer Sekunde verzögert angeklickt wurden. Auch die Antwort läuft nach einiger Zeit ab wird erst nach dem appVerifier.verify()-Aufruf oder der Button-Anker des reCAPTCHA noch einmal angeklickt.

Jedes Mal, wenn ein simuliertes reCAPTCHA gelö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 nach Ablauf ausgelöst.

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und die mit den Anmeldedaten verknüpft sind, d. h. Nutzername und Passwort, oder Authentifizierungsanbieter-Informationen – also für den Nutzer, mit dem sich der Nutzer angemeldet hat. Diese neue -Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um in jeder App in Ihrem Projekt einen Nutzer erreichen, 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 mit Mehrfachauthentifizierung in Ihrer App anzumelden indem Sie die Anmeldedaten des Authentifizierungsanbieters mit einem eines bestehenden Nutzerkontos.

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

Web

Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

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