Firebase Authentication with Identity Platform'a yükselttiyseniz, web uygulamanıza SMS çok faktörlü kimlik doğrulaması ekleyebilirsiniz.
Çok faktörlü kimlik doğrulama, uygulamanızın güvenliğini artırır. Saldırganlar genellikle parolaları ve sosyal hesapları tehlikeye atsa da, bir metin mesajını ele geçirmek daha zordur.
Sen başlamadan önce
Çok faktörlü kimlik doğrulamayı destekleyen en az bir sağlayıcıyı etkinleştirin. Telefonla kimlik doğrulama, anonim kimlik doğrulama ve Apple Game Center dışında her sağlayıcı MFA'yı destekler.
Uygulamanızın kullanıcı e-postalarını doğruladığından emin olun. MFA, e-posta doğrulaması gerektirir. Bu, kötü niyetli aktörlerin sahip olmadıkları bir e-posta ile bir hizmete kaydolmalarını ve ardından ikinci bir faktör ekleyerek gerçek sahibi kilitlemelerini önler.
çoklu kiracılığı kullanma
Çok kiracılı bir ortamda kullanım için çok faktörlü kimlik doğrulamayı etkinleştiriyorsanız, aşağıdaki adımları tamamladığınızdan emin olun (bu belgedeki diğer talimatlara ek olarak):
GCP Konsolunda, birlikte çalışmak istediğiniz kiracıyı seçin.
Kodunuzda,
Auth
örneğindekitenantId
alanını kiracınızın kimliğine ayarlayın. Örneğin:Web modüler API
import { getAuth } from "firebase/auth"; const auth = getAuth(app); auth.tenantId = "myTenantId1";
Web ad alanlı API
firebase.auth().tenantId = 'myTenantId1';
Çok faktörlü kimlik doğrulamayı etkinleştirme
Firebase konsolunun Kimlik Doğrulama > Oturum açma yöntemi sayfasını açın.
Gelişmiş bölümünde, SMS Çok Faktörlü Kimlik Doğrulamayı etkinleştirin.
Uygulamanızı test edeceğiniz telefon numaralarını da girmelisiniz. İsteğe bağlı olsa da, geliştirme sırasında kısıtlamayı önlemek için test telefon numaralarının kaydedilmesi şiddetle tavsiye edilir.
Uygulamanızın alanını henüz yetkilendirmediyseniz Firebase konsolunun Kimlik Doğrulama > Ayarlar sayfasındaki izin verilenler listesine ekleyin.
Bir kayıt modeli seçme
Uygulamanızın çok faktörlü kimlik doğrulama gerektirip gerektirmediğini ve kullanıcılarınızı nasıl ve ne zaman kaydettireceğinizi seçebilirsiniz. Bazı yaygın modeller şunları içerir:
Kaydın bir parçası olarak kullanıcının ikinci faktörünü kaydedin. Uygulamanız tüm kullanıcılar için çok faktörlü kimlik doğrulama gerektiriyorsa bu yöntemi kullanın.
Kayıt sırasında ikinci bir faktörü kaydetmek için atlanabilir bir seçenek sunun. Çok faktörlü kimlik doğrulamayı teşvik etmek isteyen ancak gerektirmeyen uygulamalar bu yaklaşımı tercih edebilir.
Kayıt ekranı yerine kullanıcının hesap veya profil yönetimi sayfasından ikinci bir faktör ekleme olanağı sağlayın. Bu, güvenlik açısından hassas kullanıcılar için çok faktörlü kimlik doğrulamayı mümkün kılarken, kayıt işlemi sırasındaki sorunları en aza indirir.
Kullanıcı, artan güvenlik gereksinimleri olan özelliklere erişmek istediğinde, ikinci bir faktörün kademeli olarak eklenmesini gerektir.
reCAPTCHA doğrulayıcıyı ayarlama
SMS kodlarını gönderebilmeniz için önce bir reCAPTCHA doğrulayıcı yapılandırmanız gerekir. Firebase, telefon numarası doğrulama isteklerinin uygulamanızın izin verilen alanlarından birinden gelmesini sağlayarak kötüye kullanımı önlemek için reCAPTCHA kullanır.
Manuel olarak bir reCAPTCHA istemcisi kurmanız gerekmez; istemci SDK'sının RecaptchaVerifier
nesnesi, gerekli tüm istemci anahtarlarını ve sırlarını otomatik olarak oluşturur ve başlatır.
Görünmez reCAPTCHA kullanma
RecaptchaVerifier
nesnesi, genellikle herhangi bir etkileşim gerektirmeden kullanıcıyı doğrulayabilen görünmez reCAPTCHA'yı destekler. Görünmez bir reCAPTCHA kullanmak için size
parametresi invisible
olarak ayarlanmış bir RecaptchaVerifier
oluşturun ve çok faktörlü kaydı başlatan kullanıcı arabirimi öğesinin kimliğini belirtin:
Web modüler API
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 ad alanlı API
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'ını kullanma
Görünür bir reCAPTCHA widget'ı kullanmak için, widget'ı içerecek bir HTML öğesi oluşturun, ardından UI kapsayıcısının kimliğiyle bir RecaptchaVerifier
nesnesi oluşturun. İsteğe bağlı olarak, reCAPTCHA çözüldüğünde veya süresi dolduğunda çağrılan geri aramaları da ayarlayabilirsiniz:
Web modüler API
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 ad alanlı API
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'yı önceden oluşturma
İsteğe bağlı olarak, iki faktörlü kayda başlamadan önce reCAPTCHA'yı önceden oluşturabilirsiniz:
Web modüler API
recaptchaVerifier.render()
.then(function (widgetId) {
window.recaptchaWidgetId = widgetId;
});
Web ad alanlı API
recaptchaVerifier.render()
.then(function(widgetId) {
window.recaptchaWidgetId = widgetId;
});
render()
çözüldükten sonra, reCAPTCHA'nın reCAPTCHA API'sine çağrı yapmak için kullanabileceğiniz pencere öğesi kimliğini alırsınız:
var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);
RecaptchaVerifier, doğrulama yöntemiyle bu mantığı ortadan kaldırır, böylece doğrudan grecaptcha
değişkenini kullanmanıza gerek kalmaz.
İkinci bir faktörün kaydedilmesi
Bir kullanıcı için yeni bir ikincil faktör kaydetmek için:
Kullanıcının kimliğini yeniden doğrulayın.
Kullanıcıdan telefon numarasını girmesini isteyin.
Önceki bölümde gösterildiği gibi reCAPTCHA doğrulayıcıyı başlatın. Bir RecaptchaVerifier örneği zaten yapılandırılmışsa bu adımı atlayın:
Web modüler API
import { RecaptchaVerifier } from "firebase/auth"; const recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
Web ad alanlı API
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
Kullanıcı için çok faktörlü bir oturum alın:
Web modüler API
import { multiFactor } from "firebase/auth"; multiFactor(user).getSession().then(function (multiFactorSession) { // ... });
Web ad alanlı API
user.multiFactor.getSession().then(function(multiFactorSession) { // ... })
Kullanıcının telefon numarası ve çok faktörlü oturum ile bir
PhoneInfoOptions
nesnesi başlatın:Web modüler API
// Specify the phone number and pass the MFA session. const phoneInfoOptions = { phoneNumber: phoneNumber, session: multiFactorSession };
Web ad alanlı API
// Specify the phone number and pass the MFA session. var phoneInfoOptions = { phoneNumber: phoneNumber, session: multiFactorSession };
Kullanıcının telefonuna bir doğrulama mesajı gönderin:
Web modüler API
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 ad alanlı API
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. })
Zorunlu olmamakla birlikte, kullanıcılara bir SMS mesajı alacaklarını ve standart ücretlerin geçerli olduğunu önceden bildirmek en iyi uygulamadır.
İstek başarısız olursa reCAPTCHA'yı sıfırlayın, ardından kullanıcının tekrar deneyebilmesi için önceki adımı tekrarlayın. reCAPTCHA belirteçleri yalnızca bir kerelik kullanım olduğundan, bir hata verdiğinde
verifyPhoneNumber()
işlevinin reCAPTCHA'yı otomatik olarak sıfırlayacağını unutmayın.Web modüler API
recaptchaVerifier.clear();
Web ad alanlı API
recaptchaVerifier.clear();
SMS kodu gönderildikten sonra kullanıcıdan kodu doğrulamasını isteyin:
Web modüler API
// Ask user for the verification code. Then: const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
Web ad alanlı API
// Ask user for the verification code. Then: var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
PhoneAuthCredential
ile birMultiFactorAssertion
nesnesi başlatın:Web modüler API
import { PhoneMultiFactorGenerator } from "firebase/auth"; const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
Web ad alanlı API
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
Kaydı tamamlayın. İsteğe bağlı olarak, ikinci faktör için bir görünen ad belirleyebilirsiniz. Kimlik doğrulama akışı sırasında telefon numarası maskelendiğinden (örneğin, +1******1234) bu, birden çok saniye faktörü olan kullanıcılar için kullanışlıdır.
Web modüler API
// Complete enrollment. This will update the underlying tokens // and trigger ID token change listener. multiFactor(user).enroll(multiFactorAssertion, "My personal phone number");
Web ad alanlı API
// Complete enrollment. This will update the underlying tokens // and trigger ID token change listener. user.multiFactor.enroll(multiFactorAssertion, 'My personal phone number');
Aşağıdaki kod, ikinci bir faktörü kaydetmenin eksiksiz bir örneğini gösterir:
Web modüler API
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 ad alanlı API
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);
});
Tebrikler! Bir kullanıcı için ikinci bir kimlik doğrulama faktörünü başarıyla kaydettiniz.
Kullanıcıları ikinci bir faktörle oturum açma
Bir kullanıcıyı iki faktörlü SMS doğrulaması ile oturum açmak için:
Kullanıcıyı ilk faktörü ile oturum açın, ardından
auth/multi-factor-auth-required
hatasını yakalayın. Bu hata, bir çözümleyici, kaydedilen ikinci faktörlerle ilgili ipuçları ve kullanıcının birinci faktörle başarılı bir şekilde kimliğini doğruladığını kanıtlayan temel bir oturum içerir.Örneğin, kullanıcının ilk faktörü bir e-posta ve şifre ise:
Web modüler API
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 ad alanlı API
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. } ... });
Kullanıcının ilk faktörü, OAuth, SAML veya OIDC gibi birleşik bir sağlayıcıysa,
signInWithPopup()
veyasignInWithRedirect()
çağırdıktan sonra hatayı yakalayın.Kullanıcının kayıtlı birden fazla ikincil faktörü varsa hangisini kullanacağını sorun:
Web modüler API
// 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 ad alanlı API
// 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. }
Önceki bölümde gösterildiği gibi reCAPTCHA doğrulayıcıyı başlatın. Bir RecaptchaVerifier örneği zaten yapılandırılmışsa bu adımı atlayın:
Web modüler API
import { RecaptchaVerifier } from "firebase/auth"; recaptchaVerifier = new RecaptchaVerifier('recaptcha-container-id', undefined, auth);
Web ad alanlı API
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');
Kullanıcının telefon numarası ve çok faktörlü oturum ile bir
PhoneInfoOptions
nesnesi başlatın. Bu değerlerauth/multi-factor-auth-required
hatasına iletilenresolver
nesnesinde bulunur:Web modüler API
const phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };
Web ad alanlı API
var phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };
Kullanıcının telefonuna bir doğrulama mesajı gönderin:
Web modüler API
// 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 ad alanlı API
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. })
İstek başarısız olursa reCAPTCHA'yı sıfırlayın, ardından kullanıcının tekrar deneyebilmesi için önceki adımı tekrarlayın:
Web modüler API
recaptchaVerifier.clear();
Web ad alanlı API
recaptchaVerifier.clear();
SMS kodu gönderildikten sonra kullanıcıdan kodu doğrulamasını isteyin:
Web modüler API
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
Web ad alanlı API
// Ask user for the verification code. Then: var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);
PhoneAuthCredential
ile birMultiFactorAssertion
nesnesi başlatın:Web modüler API
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
Web ad alanlı API
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);
İkincil kimlik doğrulamasını tamamlamak için
resolver.resolveSignIn()
öğesini çağırın. Ardından, standart sağlayıcıya özgü verileri ve kimlik doğrulama bilgilerini içeren orijinal oturum açma sonucuna erişebilirsiniz:Web modüler API
// 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 ad alanlı API
// 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. });
Aşağıdaki kod, çok faktörlü bir kullanıcıda oturum açmanın eksiksiz bir örneğini gösterir:
Web modüler API
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 ad alanlı API
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.
} ...
});
Tebrikler! Çok faktörlü kimlik doğrulama kullanarak bir kullanıcıda başarıyla oturum açtınız.
Sıradaki ne
- Admin SDK ile çok faktörlü kullanıcıları programatik olarak yönetin .