תכונות אימות מתקדמות

1. הגדרה

קבלת קוד המקור

ב-codelab הזה מתחילים עם גרסה כמעט מלאה של אפליקציית הדוגמה Friendly Chat, ולכן הדבר הראשון שצריך לעשות הוא לשכפל את קוד המקור:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

לאחר מכן, עוברים לספרייה security-start, שבה תעבדו בשאר ה-codelab הזה:

$ cd codelab-friendlychat-web/security-start

עכשיו מתקינים את יחסי התלות כדי להריץ את הקוד. אם החיבור לאינטרנט איטי, יכול להיות שהפעולה תימשך דקה או שתיים:

$ npm install && (cd functions && npm install)

מידע על המאגר הזה

הספרייה security-solution/ מכילה את הקוד המלא של האפליקציה לדוגמה. בספרייה security-start תעבדו על ה-codelab, וחסרים בה כמה חלקים חשובים של הטמעת האימות. הקבצים והתכונות העיקריים ב-security-start/ וב-security-solution/ הם:

  • ‫functions/index.js מכיל קוד של Cloud Functions, ושם תכתבו פונקציות לחסימת הרשאות.
  • ‫public/ – מכיל את הקבצים הסטטיים של אפליקציית הצ'אט
  • ‫public/scripts/main.js – המקום שבו קוד ה-JS של אפליקציית הצ'אט (src/index.js) עובר קומפילציה
  • ‫src/firebase-config.js – מכיל את אובייקט ההגדרה של Firebase שמשמש לאתחול אפליקציית הצ'אט
  • ‫src/index.js – קוד ה-JS של אפליקציית הצ'אט

קבלת Firebase CLI

חבילת הכלים לאמולטור היא חלק מ-Firebase CLI (ממשק שורת הפקודה), שאפשר להתקין במחשב באמצעות הפקודה הבאה:

$ npm install -g firebase-tools@latest

בונים את ה-JavaScript באמצעות webpack, שייצור את main.js בתוך הספרייה public/scripts/.

webpack build

לאחר מכן, מוודאים שמותקנת הגרסה העדכנית של ה-CLI. ה-codelab הזה פועל עם גרסה 11.14 ומעלה.

$ firebase --version
11.14.2

קישור לפרויקט Firebase

יצירת פרויקט חדש ב-Firebase

  1. נכנסים למסוף Firebase באמצעות חשבון Google.
  2. לוחצים על הלחצן כדי ליצור פרויקט חדש, ואז מזינים שם לפרויקט (לדוגמה, Authentication MFA Codelab).
  3. לוחצים על המשך.
  4. אם מוצגת בקשה לעשות זאת, קוראים ומאשרים את התנאים של Firebase, ואז לוחצים על המשך.
  5. (אופציונלי) מפעילים את העזרה מבוססת-AI במסוף Firebase (שנקראת Gemini ב-Firebase).
  6. ב-codelab הזה לא צריך להשתמש ב-Google Analytics, ולכן משביתים את האפשרות Google Analytics.
  7. לוחצים על יצירת פרויקט, מחכים שהפרויקט יוקצה ולוחצים על המשך.

קישור הקוד לפרויקט Firebase

עכשיו צריך לקשר את הקוד הזה לפרויקט Firebase. קודם מריצים את הפקודה הבאה כדי להיכנס ל-Firebase CLI:

$ firebase login

לאחר מכן מריצים את הפקודה הבאה כדי ליצור כינוי לפרויקט. מחליפים את $YOUR_PROJECT_ID במזהה פרויקט Firebase.

$ firebase use $YOUR_PROJECT_ID

עכשיו אפשר להפעיל את האפליקציה.

2. הפעלת האמולטורים

בקטע הזה מפעילים את האפליקציה באופן מקומי. המשמעות היא שהגיע הזמן להפעיל את חבילת האמולטורים.

הפעלת האמולטורים

מתוך ספריית המקור של ה-codelab, מריצים את הפקודה הבאה כדי להפעיל את האמולטורים:

$ firebase emulators:start

האפליקציה תפעל בכתובת http://127.0.0.1:5170 וקוד המקור ייבנה מחדש באופן רציף כשמבצעים שינויים. כדי לראות את השינויים, צריך לבצע רענון מלא (Ctrl+Shift+R) בדפדפן.

הפלט אמור להיראות כך:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

אחרי שמופיעה ההודעה All emulators ready (כל האמולטורים מוכנים), האפליקציה מוכנה לשימוש.

3. הטמעה של MFA

אימות רב-שלבי הוטמע באופן חלקי במאגר הזה. תצטרכו להוסיף את הקוד כדי לרשום משתמש לאימות דו-שלבי, ואז כדי לבקש ממשתמשים שרשומים לאימות דו-שלבי להזין גורם שני.

בכלי העריכה, פותחים את הקובץ src/index.js ומחפשים את השיטה startEnrollMultiFactor(). מוסיפים את הקוד הבא כדי להגדיר את מאמת reCAPTCHA שימנע שימוש לרעה בטלפון (מאמת reCAPTCHA מוגדר כנסתר ולא יוצג למשתמשים):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

לאחר מכן, מאתרים את השיטה finishEnrollMultiFactor() ומוסיפים את הפרטים הבאים כדי להירשם לשלב השני:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

לאחר מכן, מוצאים את הפונקציה signIn ומוסיפים את זרימת הבקרה הבאה שמבקשת ממשתמשים שנרשמו לאימות דו-שלבי להזין את הגורם השני:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .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") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

שאר ההטמעה, כולל הפונקציות שמופעלות כאן, כבר הושלמה. כדי לראות איך הם פועלים, אפשר לעיין בשאר הקובץ.

4. איך מנסים להיכנס באמצעות אימות רב-שלבי באמולטורים

עכשיו אפשר לנסות את ההטמעה של MFA. מוודאים שהאמולטורים עדיין פועלים ועוברים לאפליקציה שמתארחת באופן מקומי בכתובת localhost:5170. נסו להיכנס לחשבון, וכשתתבקשו לספק את קוד האימות הרב-שלבי, קוד האימות הרב-שלבי יופיע בחלון הטרמינל.

מכיוון שהאמולטורים תומכים באופן מלא באימות רב-שלבי, סביבת הפיתוח יכולה להיות עצמאית לחלוטין.

מידע נוסף על הטמעת MFA זמין במסמכי העיון שלנו.

5. יצירת פונקציית חסימה

חלק מהאפליקציות מיועדות לשימוש רק על ידי קבוצה ספציפית של משתמשים. במקרים כאלה, כדאי ליצור דרישות מותאמות אישית כדי שהמשתמש יוכל להירשם לאפליקציה או להתחבר אליה.

פונקציות חסימה מאפשרות ליצור דרישות אימות בהתאמה אישית. הן פונקציות של Cloud Functions, אבל בניגוד לרוב הפונקציות, הן פועלות באופן סינכרוני כשמשתמש מנסה להירשם או להיכנס לחשבון.

כדי ליצור פונקציית חסימה, פותחים את functions/index.js בעורך ומחפשים את הפונקציה beforecreated שהוסף לה הערה.

מחליפים אותו בקוד הבא שמאפשר רק למשתמשים עם הדומיין example.com ליצור חשבון:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. התנסות בפונקציית החסימה באמולטורים

כדי לנסות את פונקציית החסימה, מוודאים שהאמולטורים פועלים, ובאפליקציית האינטרנט בכתובת localhost:5170, יוצאים מהחשבון.

אחר כך מנסים ליצור חשבון עם כתובת אימייל שלא מסתיימת ב-example.com. פונקציית החסימה תמנע את השלמת הפעולה.

עכשיו, נסה שוב עם כתובת אימייל שמסתיימת ב-example.com. החשבון ייווצר בהצלחה.

פונקציות חסימה מאפשרות ליצור הגבלות שנדרשות לגבי אימות. מידע נוסף זמין במאמרי העזרה.

סיכום

מעולה! הוספתם אימות רב-שלבי לאפליקציית אינטרנט כדי לעזור למשתמשים לשמור על אבטחת החשבון שלהם, ואז יצרתם דרישות מותאמות אישית למשתמשים כדי להירשם באמצעות פונקציות חסימה. מגיע לך GIF!

‫GIF של אנשים מהמשרד שעושים את הריקוד 'הרמת הגג'