ویژگی های پیشرفته احراز هویت

1. راه اندازی کنید

کد منبع را دریافت کنید

در این لبه کد، شما با نسخه ای از برنامه نمونه چت دوستانه شروع می کنید که تقریباً کامل شده است، بنابراین اولین کاری که باید انجام دهید این است که کد منبع را شبیه سازی کنید:

$ 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 جایی است که شما از طریق Codelab کار خواهید کرد و چند بخش مهم از اجرای احراز هویت را از دست داده است. فایل ها و ویژگی های کلیدی در security-start/ and security-solution/ عبارتند از:

• functions/index.js حاوی کدهای Cloud Functions است و جایی است که توابع مسدودکننده auth را می نویسید.
• public/ - حاوی فایل های ثابت برای برنامه چت شما است
• public/scripts/main.js - جایی که کد JS برنامه چت شما ( src/index.js ) در آن کامپایل شده است
• src/firebase-config.js - حاوی شی پیکربندی Firebase است که برای مقداردهی اولیه برنامه چت شما استفاده می شود.
• src/index.js - کد JS برنامه چت شما

Firebase CLI را دریافت کنید

Emulator Suite بخشی از Firebase CLI (رابط خط فرمان) است که می تواند با دستور زیر بر روی دستگاه شما نصب شود:

$ npm install -g firebase-tools@latest

جاوا اسکریپت را با بسته وب بسازید که main.js را در دایرکتوری public/scripts/ ایجاد می کند.

webpack build

سپس، تأیید کنید که آخرین نسخه CLI را دارید. این کد لبه با نسخه 11.14 یا بالاتر کار می کند.

$ firebase --version
11.14.2

به پروژه Firebase خود متصل شوید

اگر پروژه Firebase ندارید، در کنسول Firebase ، یک پروژه Firebase جدید ایجاد کنید. شناسه پروژه انتخابی خود را یادداشت کنید، زیرا بعداً به آن نیاز خواهید داشت.

اکنون باید این کد را به پروژه Firebase خود متصل کنید. ابتدا دستور زیر را برای ورود به Firebase CLI اجرا کنید:

$ firebase login

سپس دستور زیر را برای ایجاد نام مستعار پروژه اجرا کنید. شناسه پروژه Firebase خود را جایگزین $YOUR_PROJECT_ID کنید.

$ firebase use $YOUR_PROJECT_ID

اکنون شما آماده اجرای برنامه هستید!

2. شبیه سازها را اجرا کنید

در این بخش، برنامه را به صورت محلی اجرا خواهید کرد. این بدان معناست که زمان راه‌اندازی Emulator Suite است.

شبیه سازها را راه اندازی کنید

از داخل پوشه منبع کد لبه، دستور زیر را برای راه اندازی شبیه سازها اجرا کنید:

$ 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

وزارت امور خارجه تا حدی در این مخزن پیاده سازی شده است. کد را اضافه می کنید تا ابتدا یک کاربر را در 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 ختم می شود دوباره امتحان کنید. حساب با موفقیت ایجاد خواهد شد.

با توابع مسدود کردن، می توانید هر محدودیتی را که در مورد احراز هویت نیاز دارید ایجاد کنید. برای کسب اطلاعات بیشتر، به اسناد مرجع مراجعه کنید.

خلاصه

کار عالی! شما احراز هویت چند عاملی را به یک برنامه وب اضافه کردید تا به کاربران کمک کند حساب خود را ایمن نگه دارند، و سپس شرایط سفارشی برای ثبت نام کاربران با استفاده از توابع مسدود کردن ایجاد کردید. شما قطعا یک گیف به دست آورده اید!