احراز هویت

پروژه‌ٔ اولیه

فایل پروژه را ‌می‌توانید از طریق این این لینک دانلود کنید.

ساختار پروژه به شکل زیر است:

initital_project/
├─ css/
│  └─ styles.css
├─ app.js
├─ dashboard.html
├─ index.html
├─ login.html
└─ register.html

جزئیات پیاده‌سازی

اقدامات لازم برای app.js

1. همان‌طور که مشاهده می‌کنید، در ابتدای فایل کامنتی با عنوان Validation و در پایین آن تابعی با نام isAuthentication وجود دارد که شما باید آن را طوری کامل کنید که بررسی کند کاربر احراز هویت (authentication) را انجام داده است یا خیر. پس باید مقداری را بر اساس مقادیر موجود در لوکال‌استورج به ما برگرداند.

تابع registerUser:

1. ورودی این تابع یک آبجکت به نام user است که باید دارای سه مقدار باشد: username، password و role.

2. این تابع یک Promise برمی‌گرداند که ممکن است با موفقیت اجرا شود (resolve) یا با خطا مواجه شود (reject)، بنابراین هر دو حالت باید در نظر گرفته شوند.

3. در تابع، مقدار username را پاک‌سازی و استاندارد می‌کنیم تا مقایسه‌ای دقیق و یکسان برای بررسی تکراری بودن انجام شود.

4. سپس لیست کاربران موجود از localStorage خوانده می‌شود و در آرایه‌ای به نام users قرار می‌گیرد. اگر مقدار موجود در localStorage آرایه نبود یا خطایی رخ داد، آرایه خالی در نظر گرفته می‌شود.

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

6. اگر نام کاربری تکراری نبود، اطلاعات کاربر جدید (شامل username، password و role) به آرایه users اضافه می‌شود.

7. سپس آرایه به‌روزرسانی‌شده دوباره در localStorage ذخیره می‌شود. در صورتی که عملیات ذخیره‌سازی با خطا مواجه شود، تابع با پیام زیر رد می‌شود: "خطا در ذخیره‌سازی. دوباره تلاش کنید."

8. در نهایت، اگر همه مراحل با موفقیت انجام شد، Promise با موفقیت (resolve) پایان می‌یابد.

تابع loginUser

1. ورودی تابع یک آبجکت به نام creds است که شامل مقادیر username و password از loginForm می‌باشد.
2. خروجی تابع، یک پرامیس است که در صورت موفقیت، آبجکتی شامل سه مقدار accessToken، refreshToken و role را بازمی‌گرداند. این مقادیر باید در localStorage ذخیره شوند.
3. مانند تابع ثبت‌نام (registerUser)، در ابتدا باید username را پالایش کنید (حذف فاصله‌ها و تبدیل به حروف کوچک). سپس لیست کاربران (users) از localStorage خوانده می‌شود. در صورت بروز خطا یا نبود لیست معتبر، یک آرایه خالی جایگزین می‌شود.
4. سپس بررسی می‌کنید که آیا کاربری با username برابر و password منطبق وجود دارد یا خیر. اگر چنین کاربری یافت نشد، reject با پیام زیر صدا زده می‌شود و تابع خاتمه می‌یابد: "نام کاربری یا رمز عبور اشتباه است."
5. در صورت تطابق اطلاعات، باید مقادیر accessToken و refreshToken را با این فرمت تولید کنید:

const accessToken = "access-" + Date.now() + "-" + Math.random().toString(36).substr(2);
const refreshToken = "refresh-" + Date.now() + "-" + Math.random().toString(36).substr(2);

6. سپس این مقادیر به همراه role کاربر، در localStorage ذخیره می‌شوند.
7. مرحله ۶ باید در یک بلوک try/catch انجام شود. در صورت بروز خطا هنگام ذخیره‌سازی، تابع با reject و پیام زیر خاتمه می‌یابد: "خطا در فرآیند ورود. دوباره تلاش کنید."
8. در نهایت، اگر تمام مراحل با موفقیت انجام شود، resolve فراخوانی می‌شود و آبجکت زیر بازگردانده می‌شود:

{ accessToken, refreshToken, role: found.role }

رویداد سابمیت برای LoginForm

1. ابتدا باید از رفتار پیش‌فرض فرم جلوگیری شود تا از بارگذاری مجدد صفحه جلوگیری شود.
2. مقادیر ورودی مربوط به نام کاربری (loginUsername) و رمز عبور (loginPassword) از عناصر HTML دریافت می‌شوند.
3. بررسی می‌شود که هر دو فیلد مقدار داشته باشند. در صورتی که یکی از آن‌ها خالی باشد، پیام خطای «لطفاً همهٔ فیلدها را کامل کنید.» با استفاده از تابع showToast نمایش داده شده و ادامه‌ی اجرای تابع متوقف می‌شود.
4. اگر هر دو فیلد مقدار داشته باشند، یک شیء شامل username و password ساخته شده و به تابع loginUser ارسال می‌شود.
5. در صورتی که عملیات ورود موفقیت‌آمیز باشد، پیام «ورود با موفقیت انجام شد!» با استفاده از showToast نمایش داده می‌شود و پس از گذشت یک ثانیه کاربر به صفحه‌ی dashboard.html هدایت می‌شود.
6. اگر عملیات ورود با شکست مواجه شود، پیام خطای مربوطه از طریق showToast(err, "error") نمایش داده می‌شود.

رویداد سابمیت برای RegisterForm

فرایند ثبت‌نام بسیار مشابه ورود است با تفاوت‌هایی جزئی:

1. مقدارهای نام کاربری (registerUsername)، رمز عبور (registerPassword) و نقش (role) از عناصر HTML گرفته می‌شوند.
2. بررسی می‌شود که هر سه فیلد مقدار داشته باشند. در غیر این صورت، پیام «لطفاً همهٔ فیلدها را کامل کنید.» نمایش داده شده و روند ارسال متوقف می‌شود.
3. اگر فیلدها کامل باشند، یک شیء شامل username، password و role ساخته می‌شود و به تابع registerUser ارسال می‌گردد.
4. در صورت موفقیت، پیام «ثبت‌نام با موفقیت انجام شد!» نمایش داده شده و پس از یک ثانیه کاربر به صفحه‌ی login.html منتقل می‌شود.
5. در صورت بروز خطا در ثبت‌نام، پیام خطا با استفاده از showToast(err, "error") نمایش داده خواهد شد.

بررسی و نمایش محتوای داشبورد (Dashboard)

1. در ابتدا، مقادیر accessToken، refreshToken و role از localStorage خوانده می‌شوند.
2. اگر هر یک از این مقادیر در دسترس نباشند، یعنی کاربر احراز هویت نشده یا اطلاعات ناقص است، کاربر باید به صفحه‌ی اصلی (index.html) هدایت شود.
3. اگر مقادیر مورد نیاز وجود داشته باشند، بسته به مقدار role، محتوای مناسب برای داشبورد انتخاب و در عنصر dashboard-content نمایش داده می‌شود:
   • در صورتی که مقدار نقش admin باشد، محتوای مدیریتی (adminContent) نمایش داده می‌شود.
   • در غیر این صورت، محتوای مخصوص کاربر عادی (userContent) قرار داده خواهد شد.
4. پس از نمایش محتوای مناسب، عنصر مربوط به دکمه خروج با شناسه logout-btn پیدا می‌شود. در صورتی که وجود داشته باشد، یک رویداد کلیک برای آن تعریف می‌شود که هنگام کلیک:
   • مقادیر accessToken، refreshToken و role را از localStorage حذف می‌کند.
   • سپس کاربر را به صفحه‌ی اصلی (index.html) بازمی‌گرداند.

کنترل مسیرهای دسترسی بر اساس وضعیت احراز هویت

برای هدایت صحیح کاربر به صفحات مجاز، بر اساس مسیر فعلی و وضعیت احراز هویت، شرایط زیر بررسی می‌شود:

1. اگر کاربر در مسیر dashboard.html باشد ولی احراز هویت نشده باشد، باید به صفحه‌ی login.html منتقل شود.
2. اگر کاربر در صفحه‌ی login.html یا register.html باشد ولی قبلاً احراز هویت شده باشد، باید مستقیماً به صفحه‌ی dashboard.html منتقل شود.
3. اگر کاربر در صفحه‌ی اصلی (index.html یا ریشه /) باشد:
   • در صورت احراز هویت، به داشبورد هدایت می‌شود.
   • در غیر این صورت، به صفحه‌ی ورود (login.html) منتقل می‌شود.

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

نکات پیاده‌سازی

1. چهار صفحه اچ‌تی‌ام‌ال داریم که به صورت کامل نوشته شده‌اند و نیازی نیست که چیزی در آن‌ها بنویسید.
2. همه صفحات به app.js متصل هستند.
3. مقادیری که باید در لوکال‌استورج ذخیره بشوند :

• accessToken
• refreshToken
• role

4. در ابتدای فایل تابعی مشاهده می‌کنید به نام showToast که به صورت کامل نوشته شده است و لازم نیست که چیزی را در آن بنوسید و در آینده‌ی نزدیک باید از آن استفاده بکنید.
5. تمام فرایند‌ها به طور کامل در ویدئو‌ها نشان داده شده است.
6. برای استانداردسازی یوزنیم در واقع باید به حروف و فاصله‌ها توجه بکنید.

آنچه باید آپلود بکنید

فایلی که آپلود خواهید کرد باید دارای فرمت .Zip باشد و دارای ساختار زیر باشد:

answer/
├─ app.js

موفق باشید 🌟