احراز هویت
پروژهٔ اولیه
فایل پروژه را میتوانید از طریق این این لینک دانلود کنید.
ساختار پروژه به شکل زیر است:
initital_project/
├─ css/
│ └─ styles.css
├─ app.js
├─ dashboard.html
├─ index.html
├─ login.html
└─ register.html
جزئیات پیادهسازی
اقدامات لازم برای app.js
- همانطور که مشاهده میکنید، در ابتدای فایل کامنتی با عنوان
Validation
و در پایین آن تابعی با نامisAuthentication
وجود دارد که شما باید آن را طوری کامل کنید که بررسی کند کاربر احراز هویت (authentication) را انجام داده است یا خیر. پس باید مقداری را بر اساس مقادیر موجود در لوکالاستورج به ما برگرداند.
تابع registerUser
:
-
ورودی این تابع یک آبجکت به نام
user
است که باید دارای سه مقدار باشد:username
،password
وrole
. -
این تابع یک Promise برمیگرداند که ممکن است با موفقیت اجرا شود (resolve) یا با خطا مواجه شود (reject)، بنابراین هر دو حالت باید در نظر گرفته شوند.
-
در تابع، مقدار
username
را پاکسازی و استاندارد میکنیم تا مقایسهای دقیق و یکسان برای بررسی تکراری بودن انجام شود. -
سپس لیست کاربران موجود از
localStorage
خوانده میشود و در آرایهای به نامusers
قرار میگیرد. اگر مقدار موجود درlocalStorage
آرایه نبود یا خطایی رخ داد، آرایه خالی در نظر گرفته میشود. -
بررسی میشود که آیا کاربری با همین
username
(پس از پاکسازی) قبلاً ثبت شده یا خیر. اگر چنین کاربری وجود داشت، عملیات با پیام زیر رد میشود: "این نام کاربری قبلاً ثبت شده. لطفاً نام دیگری انتخاب کنید." -
اگر نام کاربری تکراری نبود، اطلاعات کاربر جدید (شامل
username
،password
وrole
) به آرایهusers
اضافه میشود. -
سپس آرایه بهروزرسانیشده دوباره در
localStorage
ذخیره میشود. در صورتی که عملیات ذخیرهسازی با خطا مواجه شود، تابع با پیام زیر رد میشود: "خطا در ذخیرهسازی. دوباره تلاش کنید." -
در نهایت، اگر همه مراحل با موفقیت انجام شد، Promise با موفقیت (resolve) پایان مییابد.
تابع loginUser
- ورودی تابع یک آبجکت به نام
creds
است که شامل مقادیرusername
وpassword
ازloginForm
میباشد. - خروجی تابع، یک پرامیس است که در صورت موفقیت، آبجکتی شامل سه مقدار
accessToken
،refreshToken
وrole
را بازمیگرداند. این مقادیر باید درlocalStorage
ذخیره شوند. - مانند تابع ثبتنام (
registerUser
)، در ابتدا بایدusername
را پالایش کنید (حذف فاصلهها و تبدیل به حروف کوچک). سپس لیست کاربران (users
) ازlocalStorage
خوانده میشود. در صورت بروز خطا یا نبود لیست معتبر، یک آرایه خالی جایگزین میشود. - سپس بررسی میکنید که آیا کاربری با
username
برابر وpassword
منطبق وجود دارد یا خیر. اگر چنین کاربری یافت نشد،reject
با پیام زیر صدا زده میشود و تابع خاتمه مییابد: "نام کاربری یا رمز عبور اشتباه است." - در صورت تطابق اطلاعات، باید مقادیر
accessToken
وrefreshToken
را با این فرمت تولید کنید:
const accessToken = "access-" + Date.now() + "-" + Math.random().toString(36).substr(2);
const refreshToken = "refresh-" + Date.now() + "-" + Math.random().toString(36).substr(2);
- سپس این مقادیر به همراه
role
کاربر، درlocalStorage
ذخیره میشوند. - مرحله ۶ باید در یک بلوک
try/catch
انجام شود. در صورت بروز خطا هنگام ذخیرهسازی، تابع باreject
و پیام زیر خاتمه مییابد: "خطا در فرآیند ورود. دوباره تلاش کنید." - در نهایت، اگر تمام مراحل با موفقیت انجام شود،
resolve
فراخوانی میشود و آبجکت زیر بازگردانده میشود:
{ accessToken, refreshToken, role: found.role }
رویداد سابمیت برای LoginForm
- ابتدا باید از رفتار پیشفرض فرم جلوگیری شود تا از بارگذاری مجدد صفحه جلوگیری شود.
- مقادیر ورودی مربوط به نام کاربری (
loginUsername
) و رمز عبور (loginPassword
) از عناصر HTML دریافت میشوند. - بررسی میشود که هر دو فیلد مقدار داشته باشند. در صورتی که یکی از آنها خالی باشد، پیام خطای «لطفاً همهٔ فیلدها را کامل کنید.» با استفاده از تابع
showToast
نمایش داده شده و ادامهی اجرای تابع متوقف میشود. - اگر هر دو فیلد مقدار داشته باشند، یک شیء شامل
username
وpassword
ساخته شده و به تابعloginUser
ارسال میشود. - در صورتی که عملیات ورود موفقیتآمیز باشد، پیام «ورود با موفقیت انجام شد!» با استفاده از
showToast
نمایش داده میشود و پس از گذشت یک ثانیه کاربر به صفحهیdashboard.html
هدایت میشود. - اگر عملیات ورود با شکست مواجه شود، پیام خطای مربوطه از طریق
showToast(err, "error")
نمایش داده میشود.
رویداد سابمیت برای RegisterForm
فرایند ثبتنام بسیار مشابه ورود است با تفاوتهایی جزئی:
- مقدارهای نام کاربری (
registerUsername
)، رمز عبور (registerPassword
) و نقش (role
) از عناصر HTML گرفته میشوند. - بررسی میشود که هر سه فیلد مقدار داشته باشند. در غیر این صورت، پیام «لطفاً همهٔ فیلدها را کامل کنید.» نمایش داده شده و روند ارسال متوقف میشود.
- اگر فیلدها کامل باشند، یک شیء شامل
username
،password
وrole
ساخته میشود و به تابعregisterUser
ارسال میگردد. - در صورت موفقیت، پیام «ثبتنام با موفقیت انجام شد!» نمایش داده شده و پس از یک ثانیه کاربر به صفحهی
login.html
منتقل میشود. - در صورت بروز خطا در ثبتنام، پیام خطا با استفاده از
showToast(err, "error")
نمایش داده خواهد شد.
بررسی و نمایش محتوای داشبورد (Dashboard)
- در ابتدا، مقادیر
accessToken
،refreshToken
وrole
ازlocalStorage
خوانده میشوند. - اگر هر یک از این مقادیر در دسترس نباشند، یعنی کاربر احراز هویت نشده یا اطلاعات ناقص است، کاربر باید به صفحهی اصلی (
index.html
) هدایت شود. - اگر مقادیر مورد نیاز وجود داشته باشند، بسته به مقدار
role
، محتوای مناسب برای داشبورد انتخاب و در عنصرdashboard-content
نمایش داده میشود:- در صورتی که مقدار نقش
admin
باشد، محتوای مدیریتی (adminContent
) نمایش داده میشود. - در غیر این صورت، محتوای مخصوص کاربر عادی (
userContent
) قرار داده خواهد شد.
- در صورتی که مقدار نقش
- پس از نمایش محتوای مناسب، عنصر مربوط به دکمه خروج با شناسه
logout-btn
پیدا میشود. در صورتی که وجود داشته باشد، یک رویداد کلیک برای آن تعریف میشود که هنگام کلیک:- مقادیر
accessToken
،refreshToken
وrole
را ازlocalStorage
حذف میکند. - سپس کاربر را به صفحهی اصلی (
index.html
) بازمیگرداند.
- مقادیر
کنترل مسیرهای دسترسی بر اساس وضعیت احراز هویت
برای هدایت صحیح کاربر به صفحات مجاز، بر اساس مسیر فعلی و وضعیت احراز هویت، شرایط زیر بررسی میشود:
- اگر کاربر در مسیر
dashboard.html
باشد ولی احراز هویت نشده باشد، باید به صفحهیlogin.html
منتقل شود. - اگر کاربر در صفحهی
login.html
یاregister.html
باشد ولی قبلاً احراز هویت شده باشد، باید مستقیماً به صفحهیdashboard.html
منتقل شود. - اگر کاربر در صفحهی اصلی (
index.html
یا ریشه/
) باشد:- در صورت احراز هویت، به داشبورد هدایت میشود.
- در غیر این صورت، به صفحهی ورود (
login.html
) منتقل میشود.
هدف از این کنترلها، جلوگیری از دسترسی غیرمجاز به بخشهای محافظتشدهی سایت و همچنین جلوگیری از ورود کاربران لاگینشده به صفحات ورود و ثبتنام است. این کار تجربهی کاربری را بهبود میدهد و ساختار امنیتی سمت کلاینت را تقویت میکند.
نکات پیادهسازی
- چهار صفحه اچتیامال داریم که به صورت کامل نوشته شدهاند و نیازی نیست که چیزی در آنها بنویسید.
- همه صفحات به
app.js
متصل هستند. - مقادیری که باید در لوکالاستورج ذخیره بشوند :
- accessToken
- refreshToken
- role
- در ابتدای فایل تابعی مشاهده میکنید به نام showToast که به صورت کامل نوشته شده است و لازم نیست که چیزی را در آن بنوسید و در آیندهی نزدیک باید از آن استفاده بکنید.
- تمام فرایندها به طور کامل در ویدئوها نشان داده شده است.
- برای استانداردسازی یوزنیم در واقع باید به حروف و فاصلهها توجه بکنید.
آنچه باید آپلود بکنید
فایلی که آپلود خواهید کرد باید دارای فرمت .Zip باشد و دارای ساختار زیر باشد:
answer/
├─ app.js
موفق باشید 🌟
ارسال پاسخ برای این سؤال