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

۱. راه‌اندازی

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

در این آزمایشگاه کد، شما با نسخه‌ای از برنامه نمونه 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 جایی است که شما با codelab کار خواهید کرد و چند بخش مهم از پیاده‌سازی احراز هویت را ندارد. فایل‌ها و ویژگی‌های کلیدی در security-start/ و security-solution/ عبارتند از:

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

دریافت رابط خط فرمان فایربیس

مجموعه شبیه‌ساز بخشی از رابط خط فرمان (CLI) فایربیس است که می‌تواند با دستور زیر روی دستگاه شما نصب شود:

$ npm install -g firebase-tools@latest

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

webpack build

سپس، تأیید کنید که آخرین نسخه CLI را دارید. این codelab با نسخه ۱۱.۱۴ یا بالاتر کار می‌کند.

$ firebase --version
11.14.2

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

ایجاد یک پروژه جدید فایربیس

  1. با استفاده از حساب گوگل خود وارد کنسول فایربیس شوید.
  2. برای ایجاد یک پروژه جدید، روی دکمه کلیک کنید و سپس نام پروژه را وارد کنید (برای مثال، Authentication MFA Codelab ).
  3. روی ادامه کلیک کنید.
  4. در صورت درخواست، شرایط Firebase را مرور و قبول کنید و سپس روی ادامه کلیک کنید.
  5. (اختیاری) دستیار هوش مصنوعی را در کنسول Firebase (با نام "Gemini در Firebase") فعال کنید.
  6. برای این codelab، به گوگل آنالیتیکس نیاز ندارید ، بنابراین گزینه گوگل آنالیتیکس را غیرفعال کنید .
  7. روی ایجاد پروژه کلیک کنید، منتظر بمانید تا پروژه شما آماده شود و سپس روی ادامه کلیک کنید.

کد خود را به پروژه Firebase خود وصل کنید

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

$ firebase login

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

$ firebase use $YOUR_PROJECT_ID

حالا آماده‌ی اجرای برنامه هستید!

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

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

شروع شبیه‌سازها

از داخل دایرکتوری منبع 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

به محض اینکه پیام « همه شبیه‌سازها آماده هستند» را مشاهده کردید، برنامه آماده استفاده است.

۳. اجرای 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}`);
      }
    });
}

بقیه پیاده‌سازی، شامل توابعی که اینجا فراخوانی شده‌اند، از قبل کامل شده است. برای دیدن نحوه کار آنها، بقیه فایل را مرور کنید.

۴. ورود به سیستم با MFA را در شبیه‌سازها امتحان کنید

حالا پیاده‌سازی MFA را امتحان کنید! مطمئن شوید که شبیه‌سازهای شما هنوز در حال اجرا هستند و از برنامه‌ی میزبان محلی در localhost:5170 بازدید کنید. وارد سیستم شوید و وقتی از شما خواسته شد کد MFA را وارد کنید، کد MFA را در پنجره‌ی ترمینال خود مشاهده خواهید کرد.

از آنجایی که شبیه‌سازها کاملاً از احراز هویت چندعاملی پشتیبانی می‌کنند، محیط توسعه شما می‌تواند کاملاً مستقل باشد.

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

۵. یک تابع مسدودکننده ایجاد کنید

برخی از برنامه‌ها فقط برای استفاده گروه خاصی از کاربران طراحی شده‌اند. در این موارد، شما می‌خواهید بتوانید الزامات سفارشی برای ثبت نام یا ورود کاربر به برنامه خود ایجاد کنید.

این چیزی است که توابع مسدودکننده ارائه می‌دهند: راهی برای ایجاد الزامات احراز هویت سفارشی. آن‌ها توابع ابری هستند، اما برخلاف اکثر توابع، وقتی کاربر سعی در ثبت نام یا ورود به سیستم دارد، به صورت همزمان اجرا می‌شوند.

برای ایجاد یک تابع مسدودکننده، 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");
  }
});

۶. عملکرد مسدود کردن را در شبیه‌سازها امتحان کنید

برای امتحان کردن عملکرد مسدود کردن، مطمئن شوید که شبیه‌سازهای شما در حال اجرا هستند و در برنامه وب با آدرس localhost:5170 ، از سیستم خارج شوید.

سپس، سعی کنید یک حساب کاربری با آدرس ایمیلی که به example.com ختم نمی‌شود، ایجاد کنید. تابع مسدودکننده مانع از موفقیت عملیات خواهد شد.

حالا، دوباره با آدرس ایمیلی که به example.com ختم می‌شود امتحان کنید. حساب با موفقیت ایجاد خواهد شد.

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

خلاصه

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

یک گیف از افرادی که در دفتر کار مشغول رقص «بالا بردن سقف» هستند