אם שדרגתם ל-Firebase Authentication with Identity Platform, אתם יכולים להוסיף לאפליקציית האינטרנט שלכם אימות דו-שלבי באמצעות SMS.
אימות רב-שלבי משפר את האבטחה של האפליקציה. אמנם תוקפים מצליחים לעיתים קרובות לפרוץ לסיסמאות ולחשבונות ברשתות החברתיות, אבל קשה יותר ליירט הודעת טקסט.
לפני שמתחילים
מפעילים לפחות ספק אחד שתומך באימות רב-שלבי. כל הספקים תומכים באימות רב-שלבי, חוץ מאימות באמצעות הטלפון, אימות אנונימי ו-Apple Game Center.
מפעילים את האזורים שבהם מתכננים להשתמש באימות באמצעות SMS. Firebase משתמש במדיניות אזור חסימה מלאה של SMS, שעוזרת ליצור את הפרויקטים שלכם במצב מאובטח יותר כברירת מחדל.
מוודאים שהאפליקציה מאמתת את כתובות האימייל של המשתמשים. כדי להשתמש באימות רב-שלבי, צריך לאמת את כתובת האימייל. כך אפשר למנוע מגורמים זדוניים להירשם לשירות באמצעות כתובת אימייל שלא שייכת להם, ואז לנעול את הבעלים האמיתי של הכתובת על ידי הוספת אמצעי אימות נוסף.
שימוש ב-multi-tenancy
אם אתם מפעילים אימות רב-גורמי לשימוש בסביבת multi-tenant, הקפידו לבצע את השלבים הבאים (בנוסף לשאר ההוראות במסמך הזה):
במסוף Google Cloud, בוחרים את הדייר שאיתו רוצים לעבוד.
בקוד, מגדירים את השדה
tenantIdבמופעAuthלמזהה הדייר. לדוגמה:Web
import { getAuth } from "firebase/auth"; const auth = getAuth(app); auth.tenantId = "myTenantId1";Web
firebase.auth().tenantId = 'myTenantId1';
הפעלת אימות רב-גורמי
פותחים את הדף אימות > שיטת כניסה במסוף Firebase.
בקטע Advanced, מפעילים את האפשרות SMS Multi-factor Authentication (אימות רב-גורמי באמצעות SMS).
כדאי גם להזין את מספרי הטלפון שבהם תשתמשו לבדיקת האפליקציה. אמנם לא חובה לרשום מספרי טלפון לבדיקה, אבל מומלץ מאוד לעשות זאת כדי למנוע הגבלת קצב העברת נתונים במהלך הפיתוח.
אם עדיין לא אישרתם את הדומיין של האפליקציה, מוסיפים אותו לרשימת ההיתרים בדף אימות > הגדרות במסוף Firebase.
בחירת דפוס הרשמה
אתם יכולים לבחור אם האפליקציה שלכם דורשת אימות רב-שלבי, ואיך ומתי לרשום את המשתמשים. דוגמאות לדפוסים נפוצים:
רושמים את הגורם השני לאימות של המשתמש כחלק מההרשמה. כדאי להשתמש בשיטה הזו אם האפליקציה שלכם דורשת אימות רב-שלבי מכל המשתמשים.
להציע אפשרות דילוג על ההרשמה לאימות דו-שלבי במהלך ההרשמה. אפליקציות שרוצות לעודד אימות רב-גורמי, אבל לא מחייבות אותו, עשויות להעדיף את הגישה הזו.
אפשרות להוסיף אימות דו-שלבי מדף ניהול החשבון או הפרופיל של המשתמש, במקום ממסך ההרשמה. כך מצמצמים את החיכוך במהלך תהליך ההרשמה, ועדיין מאפשרים אימות רב-שלבי למשתמשים שחשוב להם לשמור על אבטחה.
הוספה הדרגתית של שלב שני לאימות כשמשתמש רוצה לגשת לתכונות עם דרישות אבטחה מוגברות.
הגדרת כלי האימות של reCAPTCHA
כדי לשלוח קודי SMS, צריך להגדיר מאמת reCAPTCHA. Firebase משתמש ב-reCAPTCHA כדי למנוע התנהלות פוגעת. לשם כך, הוא מוודא שבקשות לאימות מספר טלפון מגיעות מאחד מהדומיינים המורשים של האפליקציה.
לא צריך להגדיר לקוח reCAPTCHA באופן ידני. האובייקט RecaptchaVerifier של ה-SDK של הלקוח יוצר ומפעיל באופן אוטומטי את כל המפתחות והסודות הנדרשים של הלקוח.
שימוש ב-reCAPTCHA בלתי נראה
אובייקט RecaptchaVerifier תומך בreCAPTCHA בלתי נראה, שלרוב יכול לאמת את המשתמש בלי לדרוש אינטראקציה כלשהי. כדי להשתמש ב-reCAPTCHA בלתי נראה, יוצרים RecaptchaVerifier עם הפרמטר size שמוגדר ל-invisible, ומציינים את המזהה של רכיב ממשק המשתמש שמתחיל את ההרשמה לאימות רב-שלבי:
Web
import { RecaptchaVerifier, getAuth } from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier(getAuth(), "sign-in-button", {
"size": "invisible",
"callback": function(response) {
// reCAPTCHA solved, you can proceed with
// phoneAuthProvider.verifyPhoneNumber(...).
onSolvedRecaptcha();
}
});
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
כדי להשתמש בווידג'ט reCAPTCHA גלוי, צריך ליצור רכיב HTML שיכיל את הווידג'ט, ואז ליצור אובייקט RecaptchaVerifier עם המזהה של מאגר ממשק המשתמש. אפשר גם להגדיר אופציונלית קריאות חוזרות (callback) שמופעלות כש-reCAPTCHA נפתר או כשפג התוקף שלו:
Web
import { RecaptchaVerifier, getAuth } from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier(
getAuth(),
"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.
// ...
}
}
);
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
אפשרות נוספת: אפשר לבצע רינדור מראש של reCAPTCHA לפני שמתחילים את ההרשמה לאימות דו-שלבי:
Web
recaptchaVerifier.render()
.then(function (widgetId) {
window.recaptchaWidgetId = widgetId;
});
Web
recaptchaVerifier.render()
.then(function(widgetId) {
window.recaptchaWidgetId = widgetId;
});
אחרי ש-render() נפתר, מקבלים את מזהה הווידג'ט של reCAPTCHA, שאפשר להשתמש בו כדי לבצע קריאות אל reCAPTCHA API:
var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);
הלוגיקה הזו מופשטת על ידי RecaptchaVerifier באמצעות השיטה verify, כך שלא צריך לטפל במשתנה grecaptcha ישירות.
רישום של גורם שני
כדי לרשום גורם משני חדש למשתמש:
מאמתים מחדש את המשתמש.
מבקשים מהמשתמש להזין את מספר הטלפון שלו.
מפעילים את מאמת ה-reCAPTCHA כמו שמוסבר בקטע הקודם. אם כבר הגדרתם מופע של RecaptchaVerifier, אפשר לדלג על השלב הזה:
Web
import { RecaptchaVerifier, getAuth } from "firebase/auth"; const recaptchaVerifier = new RecaptchaVerifier( getAuth(),'recaptcha-container-id', undefined);Web
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');קבלת סשן עם אימות רב-שלבי עבור המשתמש:
Web
import { multiFactor } from "firebase/auth"; multiFactor(user).getSession().then(function (multiFactorSession) { // ... });Web
user.multiFactor.getSession().then(function(multiFactorSession) { // ... })מאתחלים אובייקט
PhoneInfoOptionsעם מספר הטלפון של המשתמש והסשן הרב-גורמי: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 };שליחת הודעת אימות לטלפון של המשתמש:
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. })מומלץ ליידע את המשתמשים מראש שהם יקבלו הודעת SMS, ושהם יחויבו בתעריפים הרגילים.
אם הבקשה נכשלת, מאפסים את ה-reCAPTCHA וחוזרים על השלב הקודם כדי שהמשתמש יוכל לנסות שוב. הערה:
verifyPhoneNumber()יאפס אוטומטית את ה-reCAPTCHA אם תתרחש שגיאה, כי אסימוני reCAPTCHA הם לשימוש חד-פעמי בלבד.Web
recaptchaVerifier.clear();Web
recaptchaVerifier.clear();אחרי שקוד ה-SMS נשלח, מבקשים מהמשתמש לאמת את הקוד:
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);מפעילים אובייקט
MultiFactorAssertionבאמצעותPhoneAuthCredential:Web
import { PhoneMultiFactorGenerator } from "firebase/auth"; const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);Web
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);משלימים את ההרשמה. אפשר גם לציין שם מוצג לאימות הדו-שלבי. האפשרות הזו שימושית למשתמשים עם כמה אמצעי אימות, כי מספר הטלפון מוסתר במהלך תהליך האימות (לדוגמה, +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');
בדוגמה הבאה מוצג קוד מלא להוספת אימות דו-שלבי:
Web
import {
multiFactor, PhoneAuthProvider, PhoneMultiFactorGenerator,
RecaptchaVerifier, getAuth
} from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier(getAuth(),
'recaptcha-container-id', undefined);
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);
});
כל הכבוד! הוספתם בהצלחה אמצעי אימות שני למשתמש.
כניסת משתמשים באמצעות גורם אימות שני
כדי להכניס משתמש באמצעות אימות דו-שלבי ב-SMS:
מכניסים את המשתמש באמצעות הגורם הראשון, ואז מאתרים את השגיאה
auth/multi-factor-auth-required. השגיאה הזו מכילה רכיב לפתרון בעיות, רמזים לגבי אמצעי האימות הדו-שלבי שנרשמו ונתוני סשן בסיסיים שמוכיחים שהמשתמש עבר אימות בהצלחה באמצעות אמצעי האימות הראשון.לדוגמה, אם האמצעי הראשון לאימות של המשתמש היה כתובת אימייל וסיסמה:
Web
import { getAuth, signInWithEmailAndPassword, 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. } ... });אם הגורם הראשון של המשתמש הוא ספק מאוחד, כמו OAuth, SAML או OIDC, צריך לזהות את השגיאה אחרי הקריאה ל-
signInWithPopup()או ל-signInWithRedirect().אם המשתמש רשום עם כמה גורמים משניים, צריך לשאול אותו באיזה גורם הוא רוצה להשתמש:
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. }מפעילים את מאמת ה-reCAPTCHA כמו שמוסבר בקטע הקודם. אם כבר הגדרתם מופע של RecaptchaVerifier, אפשר לדלג על השלב הזה:
Web
import { RecaptchaVerifier, getAuth } from "firebase/auth"; recaptchaVerifier = new RecaptchaVerifier(getAuth(), 'recaptcha-container-id', undefined);Web
var recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container-id');מאתחלים אובייקט
PhoneInfoOptionsעם מספר הטלפון של המשתמש והסשן עם אימות רב-שלבי. הערכים האלה כלולים באובייקטresolverשמועבר לשגיאהauth/multi-factor-auth-required:Web
const phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };Web
var phoneInfoOptions = { multiFactorHint: resolver.hints[selectedIndex], session: resolver.session };שליחת הודעת אימות לטלפון של המשתמש:
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. })אם הבקשה נכשלת, מאפסים את ה-reCAPTCHA וחוזרים על השלב הקודם כדי שהמשתמש יוכל לנסות שוב:
Web
recaptchaVerifier.clear();Web
recaptchaVerifier.clear();אחרי שקוד ה-SMS נשלח, מבקשים מהמשתמש לאמת את הקוד:
Web
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);Web
// Ask user for the verification code. Then: var cred = firebase.auth.PhoneAuthProvider.credential(verificationId, verificationCode);מפעילים אובייקט
MultiFactorAssertionבאמצעותPhoneAuthCredential:Web
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);Web
var multiFactorAssertion = firebase.auth.PhoneMultiFactorGenerator.assertion(cred);מתקשרים אל
resolver.resolveSignIn()כדי להשלים את האימות המשני. אחרי מכן תוכלו לגשת לתוצאת הכניסה המקורית, שכוללת את הנתונים הספציפיים של הספק ואת פרטי האימות: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. });
בדוגמה הבאה מוצג קוד מלא של כניסה של משתמש עם אימות רב-שלבי:
Web
import {
getAuth,
getMultiFactorResolver,
PhoneAuthProvider,
PhoneMultiFactorGenerator,
RecaptchaVerifier,
signInWithEmailAndPassword
} from "firebase/auth";
const recaptchaVerifier = new RecaptchaVerifier(getAuth(),
'recaptcha-container-id', undefined);
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.
} ...
});
כל הכבוד! התחברתם בהצלחה כמשתמש באמצעות אימות רב-שלבי.
המאמרים הבאים
- ניהול משתמשים עם אימות רב-שלבי באופן פרוגרמטי באמצעות Admin SDK.