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

1. הגדר

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

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

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

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

$ cd codelab-friendlychat-web/security-start

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

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

הכירו את המאגר הזה

ספריית security-solution/ מכילה את הקוד המלא עבור האפליקציה לדוגמה. ספריית security-start היא המקום שבו תעבוד דרך מעבדת הקוד, וחסרים בה כמה חלקים חשובים ביישום האימות. הקבצים והתכונות העיקריות ב- 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, במסוף Firebase צור פרויקט 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

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

3. יישום MFA

MFA יושם חלקית בריפו זה. אתה תוסיף את הקוד כדי לרשום משתמש תחילה ל-MFA ולאחר מכן כדי לבקש ממשתמשים שנרשמו ל-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 והוסף את זרימת הבקרה הבאה שמנחה משתמשים שנרשמו ל-MFA להזין את הגורם השני שלהם:

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 באמולטורים

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

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

למידע נוסף על יישום MFA, עיין במסמכי העזר שלנו.

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

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

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

כדי ליצור פונקציית חסימה, פתח 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 . החשבון ייווצר בהצלחה.

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

לסכם

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