Wenn Sie ein Upgrade auf Firebase Authentication with Identity Platform ausgeführt haben, können Sie die Multi-Faktor-Authentifizierung per SMS hinzufügen für Ihre Webanwendung.
Die Multi-Faktor-Authentifizierung erhöht die Sicherheit Ihrer Anwendung. Während Angreifer häufig Passwörter und Konten bei sozialen Netzwerken missbrauchen, ist das Abfangen einer SMS schwieriger.
Hinweis
Aktivieren Sie mindestens einen Anbieter, der die Multi-Faktor-Authentifizierung unterstützt. Alle Anbieter unterstützen MFA, außer der Authentifizierung per Telefon, der anonymen Authentifizierung Apple Game Center.
Aktivieren Sie die Regionen, in denen Sie die SMS-Authentifizierung verwenden möchten. Firebase verwendet eine Richtlinie für SMS-Regionen, die SMS vollständig blockiert. So können Sie Ihre Projekte standardmäßig in einem sichereren Zustand erstellen.
Achten Sie darauf, dass die Anwendung die E-Mail-Adressen der Nutzer überprüft. Die Multi-Faktor-Authentifizierung erfordert eine E-Mail-Bestätigung. So wird verhindert, dass sich böswillige Akteure bei einem Dienst mit einer E-Mail-Adresse registrieren, die ihnen nicht gehört, und dann den echten Inhaber sperren, indem sie einen zweiten Faktor hinzufügen.
Mehrmandantenfähigkeit verwenden
Wenn Sie die Multi-Faktor-Authentifizierung für die Verwendung in einer Multi-Mandanten-Umgebung aktivieren, führen Sie die folgenden Schritte zusätzlich zum Rest der Anleitung in diesem Dokument aus:
Wählen Sie in der Google Cloud Console den Mandanten aus, mit dem Sie arbeiten möchten.
Setzen Sie in Ihrem Code das Feld
tenantId
in derAuth
-Instanz auf die ID Ihres Mandanten. Beispiel:Web
import { getAuth } from "firebase/auth"; const auth = getAuth(app); auth.tenantId = "myTenantId1";
Web
firebase.auth().tenantId = 'myTenantId1';
Multi-Faktor-Authentifizierung aktivieren
Öffnen Sie die Seite Authentifizierung > Anmeldemethode der Firebase-Konsole.
Aktivieren Sie im Abschnitt Erweitert die Option Multi-Faktor-Authentifizierung per SMS.
Sie sollten auch die Telefonnummern eingeben, mit denen Sie Ihre App testen möchten. Die Registrierung von Testtelefonnummern ist zwar optional, wird aber dringend empfohlen, eine Drosselung während der Entwicklung zu vermeiden.
Wenn Sie die Domain Ihrer App noch nicht autorisiert haben, fügen Sie sie auf der Zulassungsliste auf der Seite Authentifizierung > Einstellungen der Firebase-Konsole.
Registrierungsmuster auswählen
Sie können auswählen, ob Ihre Anwendung eine Multi-Faktor-Authentifizierung erfordert, und wie und wann Ihre Nutzer registriert werden sollen. Hier einige gängige Muster:
Bieten Sie den zweiten Faktor des Nutzers als Teil der Registrierung an. Verwenden Sie diese Methode, wenn Ihre Anwendung eine Multi-Faktor-Authentifizierung für alle Nutzer erfordert.
Bieten Sie bei der Registrierung eine überspringbare Option an, mit der ein zweiter Faktor registriert werden kann. Anwendungen, die zwar zur Multi-Faktor-Authentifizierung ermutigen möchten, diese aber nicht erfordern, bevorzugen möglicherweise diesen Ansatz.
Ermöglichen Sie, dass ein zweiter Faktor über die Konto- oder Profilverwaltungsseite des Nutzers hinzufügbar ist anstelle über den Anmeldebildschirm. Dadurch wird der Registrierungsprozess vereinfacht und gleichzeitig die Multi-Faktor-Authentifizierung für sicherheitsorientierte Nutzer verfügbar gemacht.
Das Hinzufügen eines zweiten Faktors ist erforderlich, wenn der Nutzer auf Features mit höheren Sicherheitsanforderungen zugreifen möchte.
reCAPTCHA-Verifizierung einrichten
Bevor Sie SMS-Codes senden können, müssen Sie einen reCAPTCHA-Verifizierer konfigurieren. Firebase verwendet reCAPTCHA, um Missbrauch zu verhindern, indem sichergestellt wird, dass Anfragen zur Bestätigung der Telefonnummer stammen von einer der zulässigen Domains Ihrer App.
Sie müssen reCAPTCHA-Client nicht manuell einrichten. der Client-SDKs
Das RecaptchaVerifier
-Objekt erstellt und initialisiert alle erforderlichen
Clientschlüsseln und Secrets.
Unsichtbares reCAPTCHA verwenden
Das RecaptchaVerifier
-Objekt unterstützt unsichtbares reCAPTCHA, das den Nutzer häufig ohne Interaktion überprüfen kann. Wenn Sie ein nicht sichtbares reCAPTCHA verwenden möchten, erstellen Sie einen RecaptchaVerifier
mit dem Parameter size
auf invisible
und geben Sie die ID des UI-Elements an, mit dem die Multi-Faktor-Registrierung gestartet wird:
Web
import { RecaptchaVerifier } from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier("sign-in-button", {
"size": "invisible",
"callback": function(response) {
// reCAPTCHA solved, you can proceed with
// phoneAuthProvider.verifyPhoneNumber(...).
onSolvedRecaptcha();
}
}, auth);
Web
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
onSolvedRecaptcha();
}
});
reCAPTCHA-Widget verwenden
Wenn Sie ein sichtbares reCAPTCHA-Widget verwenden möchten, erstellen Sie ein HTML-Element, das das Widget enthält, und erstellen Sie dann ein RecaptchaVerifier
-Objekt mit der ID des UI-Containers. Sie können optional auch Callbacks einrichten, die aufgerufen werden, wenn das reCAPTCHA aufgelöst wird oder abläuft:
Web
import { RecaptchaVerifier } from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier(
"recaptcha-container",
// Optional reCAPTCHA parameters.
{
"size": "normal",
"callback": function(response) {
// reCAPTCHA solved, you can proceed with
// phoneAuthProvider.verifyPhoneNumber(...).
onSolvedRecaptcha();
},
"expired-callback": function() {
// Response expired. Ask user to solve reCAPTCHA again.
// ...
}
}, auth
);
Web
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
'recaptcha-container',
// Optional reCAPTCHA parameters.
{
'size': 'normal',
'callback': function(response) {
// reCAPTCHA solved, you can proceed with phoneAuthProvider.verifyPhoneNumber(...).
// ...
onSolvedRecaptcha();
},
'expired-callback': function() {
// Response expired. Ask user to solve reCAPTCHA again.
// ...
}
});
reCAPTCHA vorab rendern
Optional können Sie das reCAPTCHA vorab rendern, bevor Sie die Zwei-Faktor-Registrierung starten:
Web
recaptchaVerifier.render()
.then(function (widgetId) {
window.recaptchaWidgetId = widgetId;
});
Web
recaptchaVerifier.render()
.then(function(widgetId) {
window.recaptchaWidgetId = widgetId;
});
Nachdem render()
aufgelöst wurde, erhalten Sie die Widget-ID des reCAPTCHAs, mit der Sie die reCAPTCHA API aufrufen können:
var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);
RecaptchaVerifier entfernt diese Logik mit der verify-Methode, sodass Sie die Variable grecaptcha
nicht direkt verarbeiten müssen.
Zweiten Faktor registrieren
So registrieren Sie einen neuen zweiten Faktor für einen Nutzer:
Authentifizieren Sie den Nutzer noch einmal.
Fordern Sie den Nutzer zur Eingabe seiner Telefonnummer auf.
Initialisieren Sie die reCAPTCHA-Verifizierung wie im vorherigen Abschnitt beschrieben. Überspringen Sie diesen Schritt, wenn bereits eine RecaptchaVerifier-Instanz konfiguriert wurde:
Web
import { RecaptchaVerifier } from "firebase/auth"; const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
Web
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
Starten Sie eine Multi-Faktor-Sitzung für den Nutzer:
Web
import { multiFactor } from "firebase/auth"; multiFactor(user).getSession().then(function (multiFactorSession) { // ... });
Web
user.multiFactor.getSession().then(function(multiFactorSession) { // ... })
Initialisieren Sie ein
PhoneInfoOptions
-Objekt mit der Telefonnummer des Nutzers und der Multi-Faktor-Sitzung:Web
// Specify the phone number and pass the MFA session. const phoneInfoOptions = { phoneNumber: phoneNumber, session: multiFactorSession };
Web
// Specify the phone number and pass the MFA session. var phoneInfoOptions = { phoneNumber: phoneNumber, session: multiFactorSession };
Senden Sie eine Bestätigungsnachricht an das Mobiltelefon des Nutzers:
Web
import { PhoneAuthProvider } from "firebase/auth"; const phoneAuthProvider = new PhoneAuthProvider(auth); phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier) .then(function (verificationId) { // verificationId will be needed to complete enrollment. });
Web
var phoneAuthProvider = new firebase.auth.PhoneAuthProvider(); // Send SMS verification code. return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier) .then(function(verificationId) { // verificationId will be needed for enrollment completion. })
Als Best Practice wird empfohlen, die Nutzer vorab darüber zu informieren, dass sie eine SMS erhalten und dabei die üblichen Gebühren anfallen.
Wenn die Anfrage fehlschlägt, setzen Sie das reCAPTCHA zurück und wiederholen Sie den vorherigen Schritt, damit der Nutzer es noch einmal versuchen kann. Beachten Sie, dass
verifyPhoneNumber()
das reCAPTCHA automatisch zurückgesetzt, wenn ein Fehler auftritt, da reCAPTCHA-Tokens nur einmalig verwendet werden.Web
recaptchaVerifier.clear();
Web
recaptchaVerifier.clear();
Nachdem der SMS-Code gesendet wurde, bitten Sie den Nutzer, den Code zu bestätigen:
Web
// Ask user for the verification code. Then: const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
Web
// Ask user for the verification code. Then: var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
Initialisieren Sie ein
MultiFactorAssertion
-Objekt mitPhoneAuthCredential
:Web
import { PhoneMultiFactorGenerator } from "firebase/auth"; const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
Web
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
Schließen Sie die Anmeldung ab. Optional können Sie einen Anzeigenamen für den zweiten Faktor angeben. Dies ist für Nutzer mit mehreren zweiten Faktoren hilfreich, da die Telefonnummer während des Authentifizierungsvorgangs maskiert wird (z. B. +1******1234).
Web
// Complete enrollment. This will update the underlying tokens // and trigger ID token change listener. multiFactor(user).enroll(multiFactorAssertion, "My personal phone number");
Web
// Complete enrollment. This will update the underlying tokens // and trigger ID token change listener. user.multiFactor.enroll(multiFactorAssertion, 'My personal phone number');
Der folgende Code zeigt ein vollständiges Beispiel für die Registrierung eines zweiten Faktors:
Web
import {
multiFactor, PhoneAuthProvider, PhoneMultiFactorGenerator,
RecaptchaVerifier
} from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
multiFactor(user).getSession()
.then(function (multiFactorSession) {
// Specify the phone number and pass the MFA session.
const phoneInfoOptions = {
phoneNumber: phoneNumber,
session: multiFactorSession
};
const phoneAuthProvider = new PhoneAuthProvider(auth);
// Send SMS verification code.
return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier);
}).then(function (verificationId) {
// Ask user for the verification code. Then:
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
// Complete enrollment.
return multiFactor(user).enroll(multiFactorAssertion, mfaDisplayName);
});
Web
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
user.multiFactor.getSession().then(function(multiFactorSession) {
// Specify the phone number and pass the MFA session.
var phoneInfoOptions = {
phoneNumber: phoneNumber,
session: multiFactorSession
};
var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
// Send SMS verification code.
return phoneAuthProvider.verifyPhoneNumber(
phoneInfoOptions, recaptchaVerifier);
})
.then(function(verificationId) {
// Ask user for the verification code.
var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
// Complete enrollment.
return user.multiFactor.enroll(multiFactorAssertion, mfaDisplayName);
});
Glückwunsch! Sie haben erfolgreich einen zweiten Authentifizierungsfaktor für einen Nutzer registriert.
Nutzer mit einem zweiten Faktor anmelden
So melden Sie einen Nutzer mit der SMS-Bestätigung in zwei Schritten an:
Melden Sie den Nutzer mit dessen ersten Faktor an. Dann rufen Sie den Fehler
auth/multi-factor-auth-required
ab. Dieser Fehler enthält einen Resolver, enthält Hinweise zu den registrierten zweiten Faktoren und einer zugrunde liegenden Sitzung, die bestätigt, dass der Nutzer mit dem ersten Faktor authentifiziert wurde.Wenn der erste Faktor des Nutzers beispielsweise eine E-Mail und ein Passwort war, tun Sie Folgendes:
Web
import { getAuth, getMultiFactorResolver} from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then(function (userCredential) { // User successfully signed in and is not enrolled with a second factor. }) .catch(function (error) { if (error.code == 'auth/multi-factor-auth-required') { // The user is a multi-factor user. Second factor challenge is required. resolver = getMultiFactorResolver(auth, error); // ... } else if (error.code == 'auth/wrong-password') { // Handle other errors such as wrong password. } });
Web
firebase.auth().signInWithEmailAndPassword(email, password) .then(function(userCredential) { // User successfully signed in and is not enrolled with a second factor. }) .catch(function(error) { if (error.code == 'auth/multi-factor-auth-required') { // The user is a multi-factor user. Second factor challenge is required. resolver = error.resolver; // ... } else if (error.code == 'auth/wrong-password') { // Handle other errors such as wrong password. } ... });
Wenn der erste Faktor des Nutzers ein föderierter Anbieter wie OAuth, SAML oder OIDC ist, wird der Fehler nach dem Aufruf von
signInWithPopup()
odersignInWithRedirect()
abgefangen.Wenn der Nutzer mehrere sekundäre Faktoren registriert hat, fragen Sie ihn, welchen er verwenden möchte:
Web
// Ask user which second factor to use. // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber // You can get the display name via resolver.hints[selectedIndex].displayName if (resolver.hints[selectedIndex].factorId === PhoneMultiFactorGenerator.FACTOR_ID) { // User selected a phone second factor. // ... } else if (resolver.hints[selectedIndex].factorId === TotpMultiFactorGenerator.FACTOR_ID) { // User selected a TOTP second factor. // ... } else { // Unsupported second factor. }
Web
// Ask user which second factor to use. // You can get the masked phone number via resolver.hints[selectedIndex].phoneNumber // You can get the display name via resolver.hints[selectedIndex].displayName if (resolver.hints[selectedIndex].factorId === firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) { // User selected a phone second factor. // ... } else if (resolver.hints[selectedIndex].factorId === firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) { // User selected a TOTP second factor. // ... } else { // Unsupported second factor. }
Initialisieren Sie die reCAPTCHA-Verifizierung wie im vorherigen Abschnitt beschrieben. Überspringen Sie diesen Schritt, wenn bereits eine RecaptchaVerifier-Instanz konfiguriert wurde:
Web
import { RecaptchaVerifier } from "firebase/auth"; recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
Web
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
Initialisieren Sie ein
PhoneInfoOptions
-Objekt mit der Telefonnummer des Nutzers und der Multi-Faktor-Sitzung. Diese Werte sind im Objektresolver
enthalten, das an den Fehlerauth/multi-factor-auth-required
übergeben wird:Web
const phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };
Web
var phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };
Senden Sie eine Bestätigungsnachricht an das Mobiltelefon des Nutzers:
Web
// Send SMS verification code. const phoneAuthProvider = new PhoneAuthProvider(auth); phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier) .then(function (verificationId) { // verificationId will be needed for sign-in completion. });
Web
var phoneAuthProvider = new firebase.auth.PhoneAuthProvider(); // Send SMS verification code. return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier) .then(function(verificationId) { // verificationId will be needed for sign-in completion. })
Wenn die Anfrage fehlschlägt, setzen Sie das reCAPTCHA zurück und wiederholen Sie den vorherigen Schritt, damit der Nutzer es noch einmal versuchen kann:
Web
recaptchaVerifier.clear();
Web
recaptchaVerifier.clear();
Nachdem der SMS-Code gesendet wurde, bitten Sie den Nutzer, den Code zu bestätigen:
Web
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
Web
// Ask user for the verification code. Then: var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
Initialisieren Sie ein
MultiFactorAssertion
-Objekt mitPhoneAuthCredential
:Web
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
Web
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
Rufen Sie
resolver.resolveSignIn()
auf, um die sekundäre Authentifizierung abzuschließen. Sie können dann auf das ursprüngliche Anmeldeergebnis zugreifen, das die anbieterspezifischen Daten und Anmeldedaten zur Authentifizierung enthält:Web
// Complete sign-in. This will also trigger the Auth state listeners. resolver.resolveSignIn(multiFactorAssertion) .then(function (userCredential) { // userCredential will also contain the user, additionalUserInfo, optional // credential (null for email/password) associated with the first factor sign-in. // For example, if the user signed in with Google as a first factor, // userCredential.additionalUserInfo will contain data related to Google // provider that the user signed in with. // - user.credential contains the Google OAuth credential. // - user.credential.accessToken contains the Google OAuth access token. // - user.credential.idToken contains the Google OAuth ID token. });
Web
// Complete sign-in. This will also trigger the Auth state listeners. resolver.resolveSignIn(multiFactorAssertion) .then(function(userCredential) { // userCredential will also contain the user, additionalUserInfo, optional // credential (null for email/password) associated with the first factor sign-in. // For example, if the user signed in with Google as a first factor, // userCredential.additionalUserInfo will contain data related to Google provider that // the user signed in with. // user.credential contains the Google OAuth credential. // user.credential.accessToken contains the Google OAuth access token. // user.credential.idToken contains the Google OAuth ID token. });
Der folgende Code zeigt ein vollständiges Beispiel für die Anmeldung eines Multi-Faktor-Nutzers:
Web
import {
getAuth,
getMultiFactorResolver,
PhoneAuthProvider,
PhoneMultiFactorGenerator,
RecaptchaVerifier,
signInWithEmailAndPassword
} from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
.then(function (userCredential) {
// User is not enrolled with a second factor and is successfully
// signed in.
// ...
})
.catch(function (error) {
if (error.code == 'auth/multi-factor-auth-required') {
const resolver = getMultiFactorResolver(auth, error);
// Ask user which second factor to use.
if (resolver.hints[selectedIndex].factorId ===
PhoneMultiFactorGenerator.FACTOR_ID) {
const phoneInfoOptions = {
multiFactorHint: resolver.hints[selectedIndex],
session: resolver.session
};
const phoneAuthProvider = new PhoneAuthProvider(auth);
// Send SMS verification code
return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
.then(function (verificationId) {
// Ask user for the SMS verification code. Then:
const cred = PhoneAuthProvider.credential(
verificationId, verificationCode);
const multiFactorAssertion =
PhoneMultiFactorGenerator.assertion(cred);
// Complete sign-in.
return resolver.resolveSignIn(multiFactorAssertion)
})
.then(function (userCredential) {
// User successfully signed in with the second factor phone number.
});
} else if (resolver.hints[selectedIndex].factorId ===
TotpMultiFactorGenerator.FACTOR_ID) {
// Handle TOTP MFA.
// ...
} else {
// Unsupported second factor.
}
} else if (error.code == 'auth/wrong-password') {
// Handle other errors such as wrong password.
}
});
Web
var resolver;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(userCredential) {
// User is not enrolled with a second factor and is successfully signed in.
// ...
})
.catch(function(error) {
if (error.code == 'auth/multi-factor-auth-required') {
resolver = error.resolver;
// Ask user which second factor to use.
if (resolver.hints[selectedIndex].factorId ===
firebase.auth.PhoneMultiFactorGenerator.FACTOR_ID) {
var phoneInfoOptions = {
multiFactorHint: resolver.hints[selectedIndex],
session: resolver.session
};
var phoneAuthProvider = new firebase.auth.PhoneAuthProvider();
// Send SMS verification code
return phoneAuthProvider.verifyPhoneNumber(phoneInfoOptions, recaptchaVerifier)
.then(function(verificationId) {
// Ask user for the SMS verification code.
var cred = firebase.auth.PhoneAuthProvider.credential(
verificationId, verificationCode);
var multiFactorAssertion =
firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
// Complete sign-in.
return resolver.resolveSignIn(multiFactorAssertion)
})
.then(function(userCredential) {
// User successfully signed in with the second factor phone number.
});
} else if (resolver.hints[selectedIndex].factorId ===
firebase.auth.TotpMultiFactorGenerator.FACTOR_ID) {
// Handle TOTP MFA.
// ...
} else {
// Unsupported second factor.
}
} else if (error.code == 'auth/wrong-password') {
// Handle other errors such as wrong password.
} ...
});
Glückwunsch! Sie haben sich erfolgreich mit einer Multi-Faktor-Authentifizierung für einen Nutzer angemeldet.