EndPoint.Site => Models => ViewModels => AuthenticationViewModel => SignupViewModel.cs بیایید کد SignupViewModel را بررسی کنیم. این کلاس نمایشی (ViewModel) برای فرم ثبت‌نام کاربران در سیستم شما است. توضیحات کد: Namespace: namespace EndPoint.Site.Models.ViewModels.AuthenticationViewModel: نام‌فضا برای سازماندهی کدهای مرتبط با مدل‌های نمایشی احراز هویت. Class SignupViewModel: این کلاس برای نگهداری داده‌های ورودی فرم ثبت‌نام کاربران استفاده می‌شود. Properties: public string FullName { get; set; } = "";: نام کامل کاربر. این ویژگی یک مقدار پیش‌فرض خالی (رشته‌ی خالی) دارد. public string Email { get; set; }: ایمیل کاربر. public string Password { get; set; }: رمز عبور کاربر. public string RePassword { get; set; }: تکرار رمز عبور برای تأیید صحت رمز عبور. نتیجه‌گیری: این کلاس SignupViewModel به شما امکان می‌دهد تا داده‌های ورودی فرم ثبت‌نام کاربران را به صورت منظم و ساختاریافته نگهداری کنید. ویژگی‌های این کلاس شامل نام کامل، ایمیل، رمز عبور، و تکرار رمز عبور است که همه برای ثبت‌نام کاربران ضروری هستند.

بخشی از کد Layout می باشد <div class="col-lg-3 col-md-3 col-xs-12 pl"> <div class="header-left"> <div class="header-account text-left"> <div class="d-block"> <div class="account-box"> @if (User.Identity.IsAuthenticated) { <div class="nav-account d-block pl"> <span class="icon-account"> <img src="~/sitetemplate/img/man.png" class="avator" /> </span> <span class="title-account">@User.Identity.Name</span> <div class="dropdown-menu"> <ul class="account-uls mb-0"> <li class="account-item"> <a href="#" class="account-link">پنل کاربری</a> </li> <li class="account-item"> <a href="#" class="account-link">سفارشات من</a> </li> <li class="account-item"> <a href="#" class="account-link">تنظیمات</a> </li> <li class="account-item"> <a href="~/authentication/SignOut" class="account-link">خروج</a> </li> </ul> </div> </div> } else { <div class="nav-account d-block pl"> <a href="~/authentication/signup"> <span class="title-account">ثبت نام</span> </a> <a href="~/authentication/signin"> <span class="title-account">ورود</span> </a> </div> } بیایید بخشی کد layout که برای مدیریت نمایش اطلاعات کاربری و لینک‌های ورود و ثبت‌نام استفاده می‌شود را بررسی کنیم. این کد به منظور نمایش اطلاعات مختلف بر اساس وضعیت احراز هویت کاربر استفاده می‌شود. توضیحات کد: ساختار اصلی: کد داخل یک div با کلاس‌های col-lg-3 col-md-3 col-xs-12 pl قرار دارد که به کمک کلاس‌های Bootstrap برای طراحی واکنش‌گرا (responsive) استفاده می‌شود. قسمت‌های اصلی: div.header-left: بخش چپ هدر. div.header-account: بخش مربوط به حساب کاربری با متنی به سمت چپ. div.d-block: بخش با نمایش بلوکی (block). بررسی وضعیت احراز هویت: کد @if (User.Identity.IsAuthenticated) برای بررسی وضعیت احراز هویت کاربر استفاده می‌شود. اگر کاربر احراز هویت شده باشد: div.nav-account: نمایش اطلاعات حساب کاربری. span.icon-account: نمایش تصویر پروفایل کاربر. تصویر پروفایل از مسیر ~/sitetemplate/img/man.png بارگذاری می‌شود و کلاس avator برای آن تنظیم شده است. span.title-account: نمایش نام کاربر با استفاده از @User.Identity.Name. div.dropdown-menu: منوی کشویی برای نمایش لینک‌های مختلف. ul.account-uls: لیست لینک‌های حساب کاربری. li.account-item: آیتم‌های لیست. a.account-link: لینک‌های پنل کاربری، سفارشات من، تنظیمات و خروج. اگر کاربر احراز هویت نشده باشد: div.nav-account: نمایش لینک‌های ثبت‌نام و ورود. a: لینک برای نمایش فرم ثبت‌نام. span.title-account: متن لینک ثبت‌نام. a: لینک برای نمایش فرم ورود. span.title-account: متن لینک ورود. نتیجه‌گیری: این کد به صورت پویا وضعیت احراز هویت کاربر را بررسی می‌کند و بر اساس آن، اطلاعات حساب کاربری یا لینک‌های ثبت‌نام و ورود را نمایش می‌دهد. در صورتی که کاربر احراز هویت شده باشد، تصویر پروفایل، نام کاربر و لینک‌های پنل کاربری، سفارشات من، تنظیمات و خروج نمایش داده می‌شود. در غیر این صورت، لینک‌های ثبت‌نام و ورود نمایش داده می‌شوند.

EndPoint.Site => Views => Authentication => Signin.cshtml بیایید کد صفحه ورود (Signin) را بررسی کنیم. این کد به منظور نمایش فرم ورود کاربران و مدیریت عملیات ورود استفاده می‌شود. توضیحات کد: ViewData و Layout: csharp @{ ViewData["Title"] = "Signin"; Layout = null; } ViewData["Title"]: عنوان صفحه را به "Signin" تنظیم می‌کند. Layout = null: استفاده از layout پیش‌فرض را غیرفعال می‌کند و صفحه را به عنوان یک صفحه مستقل نمایش می‌دهد. HTML ساختار اصلی: html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>پنل مدیریت | صفحه ورود</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="~/sweetalert2/sweetalert2.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="~/AdminTemplate/dist/css/adminlte.min.css"> <link rel="stylesheet" href="~/AdminTemplate/plugins/iCheck/square/blue.css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"> <link rel="stylesheet" href="~/AdminTemplate/dist/css/bootstrap-rtl.min.css"> <link rel="stylesheet" href="~/AdminTemplate/dist/css/custom-style.css"> </head> تنظیم متا تگ‌ها برای اطمینان از واکنش‌گرایی (responsive) صفحه. لینک به فایل‌های CSS مختلف از جمله Font Awesome, Ionicons, AdminLTE، و bootstrap-rtl. بدنه صفحه: html <body class="hold-transition login-page"> <div class="login-box"> <div class="login-logo"> <a href="#"><b>ورود به سایت</b></a> </div> <div class="card"> <div class="card-body login-card-body"> <p class="login-box-msg">فرم زیر را تکمیل کنید و ورود بزنید</p> <form method="post"> <div class="input-group mb-3"> <input type="email" class="form-control" id="Email" placeholder="ایمیل"> <div class="input-group-append"> <span class="fa fa-envelope input-group-text"></span> </div> </div> <div class="input-group mb-3"> <input type="password" class="form-control" id="Password" placeholder="رمز عبور"> <div class="input-group-append"> <span class="fa fa-lock input-group-text"></span> </div> </div> <div class="row"> <div class="col-8"> <div class="checkbox icheck"> <label> <input type="checkbox" value="1" name="login" id="remember"> مرا به خاطر بسپار </label> </div> </div> <div class="col-4"> <button type="button" onclick="Login()" class="btn btn-primary btn-block btn-flat">ورود</button> </div> </div> </form> <p class="mb-1"> <a href="#">رمز عبورم را فراموش کرده ام.</a> </p> <p class="mb-0"> <a href="~/authentication/signup" class="text-center">ورود به ثبت نام</a> </p> </div> </div> </div> فرم ورود با فیلدهای ایمیل و رمز عبور. گزینه "مرا به خاطر بسپار". دکمه ورود که با کلیک بر روی آن، تابع Login فراخوانی می‌شود.

JavaScript: html <script src="~/AdminTemplate/plugins//jquery/jquery.min.js"></script> <script src="~/AdminTemplate/plugins//bootstrap/js/bootstrap.bundle.min.js"></script> <script src="~/AdminTemplate/plugins//iCheck/icheck.min.js"></script> <link href="~/Sweetalert2/sweetalert2.min.css" rel="stylesheet" /> <script src="~/Sweetalert2/sweetalert2.min.js"></script> <script> function Login() { var Email = $("#Email").val(); var Password = $("#Password").val(); var postData = { 'Email': Email, 'Password': Password, }; $.ajax({ contentType: 'application/x-www-form-urlencoded', dataType: 'json', type: "POST", url: "Signin", data: postData, success: function (data) { if (data.isSuccess == true) { swal.fire( 'موفق!', data.message, 'success' ).then(function (isConfirm) { window.location.replace("/"); }); } else { swal.fire( 'هشدار!', data.message, 'warning' ); } }, error: function (request, status, error) { swal.fire( 'هشدار!', request.responseText, 'warning' ); } }); } </script> </body> </html> استفاده از jQuery, Bootstrap, iCheck, و Sweetalert2 برای بهبود عملکرد و ظاهر صفحه. تابع Login که با استفاده از AJAX درخواست ورود را به سرور ارسال می‌کند و بر اساس پاسخ سرور، پیام‌های مناسب را نمایش می‌دهد. نتیجه‌گیری: این صفحه ورود به کاربران اجازه می‌دهد تا اطلاعات ورود خود را وارد کنند و عملیات ورود را انجام دهند. همچنین در صورت موفقیت یا خطا در ورود، پیام‌های مناسبی نمایش داده می‌شود. استفاده از AJAX برای ارسال درخواست ورود به سرور و مدیریت پاسخ‌ها باعث بهبود تجربه کاربری می‌شود.

EndPoint.Site => Views => Authentication => Signup.cshtml بیایید کد صفحه ثبت‌نام (Signup) را بررسی کنیم. این کد به منظور نمایش فرم ثبت‌نام کاربران و مدیریت عملیات ثبت‌نام استفاده می‌شود. توضیحات کد: ViewData و Layout: csharp @{ ViewData["Title"] = "ثبت نام"; Layout = null; } ViewData["Title"]: عنوان صفحه را به "ثبت نام" تنظیم می‌کند. Layout = null: استفاده از layout پیش‌فرض را غیرفعال می‌کند و صفحه را به عنوان یک صفحه مستقل نمایش می‌دهد. HTML ساختار اصلی: html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>پنل مدیریت | صفحه ثبت نام</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="~/sweetalert2/sweetalert2.min.css" rel="stylesheet" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="~/AdminTemplate/dist/css/adminlte.min.css"> <link rel="stylesheet" href="~/AdminTemplate/plugins/iCheck/square/blue.css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"> <link rel="stylesheet" href="~/AdminTemplate/dist/css/bootstrap-rtl.min.css"> <link rel="stylesheet" href="~/AdminTemplate/dist/css/custom-style.css"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> </head> تنظیم متا تگ‌ها برای اطمینان از واکنش‌گرایی (responsive) صفحه. لینک به فایل‌های CSS مختلف از جمله Font Awesome, Ionicons, AdminLTE, bootstrap-rtl، و SweetAlert2.

بدنه صفحه: html <body class="hold-transition register-page"> <div class="register-box"> <div class="register-logo"> <b>ثبت نام در سایت</b> </div> <div class="card"> <div class="card-body register-card-body"> <p class="login-box-msg">ثبت نام کاربر جدید</p> <form method="post"> <div class="input-group mb-3"> <input type="text" class="form-control" id="FullName" placeholder="نام و نام خانوادگی"> <div class="input-group-append"> <span class="fa fa-user input-group-text"></span> </div> </div> <div class="input-group mb-3"> <input type="email" class="form-control" id="Email" placeholder="ایمیل"> <div class="input-group-append"> <span class="fa fa-envelope input-group-text"></span> </div> </div> <div class="input-group mb-3"> <input type="password" class="form-control" placeholder="رمز عبور" id="Password"> <div class="input-group-append"> <span class="fa fa-lock input-group-text"></span> </div> </div> <div class="input-group mb-3"> <input type="password" class="form-control" placeholder="تکرار رمز عبور" id="RePassword"> <div class="input-group-append"> <span class="fa fa-lock input-group-text"></span> </div> </div> <div class="row"> <div class="col-8"> <div class="checkbox icheck"> <label> <input type="checkbox" value="1" name="login" id="remember"> با <a href="#">شرایط</a> موافق هستم </label> </div> </div> <div class="col-4"> <button onclick="Registeruser()" type="button" class="btn btn-primary btn-block btn-flat">ثبت نام</button> </div> </div> </form> <a href="~/authentication/signin" class="text-center">من قبلا ثبت نام کرده ام</a> </div> </div> </div> فرم ثبت‌نام با فیلدهای نام کامل، ایمیل، رمز عبور، و تکرار رمز عبور. گزینه "با شرایط موافق هستم". دکمه ثبت‌نام که با کلیک بر روی آن، تابع Registeruser فراخوانی می‌شود. لینک به صفحه ورود برای کاربران که قبلاً ثبت‌نام کرده‌اند.

JavaScript: html <script src="~/AdminTemplate/plugins/jquery/jquery.min.js"></script> <script src="~/AdminTemplate/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="~/AdminTemplate/plugins//iCheck/icheck.min.js"></script> <link href="~/Sweetalert2/sweetalert2.min.css" rel="stylesheet" /> <script src="~/sweetalert2/sweetalert2.min.js"></script> <script> function Registeruser() { var FullName = $("#FullName").val(); var Email = $("#Email").val(); var Password = $("#Password").val(); var RePassword = $("#RePassword").val(); var postData = { 'FullName': FullName, 'Email': Email, 'Password': Password, 'RePassword': RePassword, }; $.ajax({ contentType: 'application/x-www-form-urlencoded', dataType: 'json', type: "POST", url: "Signup", data: postData, success: function (data) { if (data.isSuccess == true) { swal.fire( 'موفق!', data.message, 'success' ).then(function (isConfirm) { window.location.replace("/"); }); } else { swal.fire( 'هشدار!', data.message, 'warning' ); } }, error: function (request, status, error) { swal.fire( 'هشدار!', request.responseText, 'warning' ); } }); } </script> </body> </html> استفاده از jQuery, Bootstrap, iCheck, و SweetAlert2 برای بهبود عملکرد و ظاهر صفحه. تابع Registeruser که با استفاده از AJAX درخواست ثبت‌نام را به سرور ارسال می‌کند و بر اساس پاسخ سرور، پیام‌های مناسب را نمایش می‌دهد. نتیجه‌گیری: این صفحه ثبت‌نام به کاربران اجازه می‌دهد تا اطلاعات خود را وارد کرده و عملیات ثبت‌نام را انجام دهند. همچنین در صورت موفقیت یا خطا در ثبت‌نام، پیام‌های مناسبی نمایش داده می‌شود. استفاده از AJAX برای ارسال درخواست ثبت‌نام به سرور و مدیریت پاسخ‌ها باعث بهبود تجربه کاربری می‌شود.

در packing manager console عبارت Add-Migration Test یا هر نامی که قابل فهم باشد و بعد Update-Database وارد کنید نکته ای که نگفتم این هست که : لیست را در قسمت Test_Store.Persistence باشد تا مایگریشن ساخته شود

بیایید کد Program.cs را بررسی کنیم. این کد به منظور راه‌اندازی و پیکربندی برنامه ASP.NET Core شما استفاده می‌شود. توضیحات کد: Import های مورد نیاز: using Microsoft.AspNetCore.Authentication.Cookies; using Microsoft.EntityFrameworkCore; و دیگر using ها برای سرویس‌ها و کانتکست‌های مورد نیاز. ایجاد و پیکربندی وب اپلیکیشن: var builder = WebApplication.CreateBuilder(args);: این خط کد یک سازنده اپلیکیشن وب ایجاد می‌کند. افزودن سرویس‌ها به کانتینر: احراز هویت: csharp builder.Services.AddAuthentication(options => { options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme; }).AddCookie(options => { options.LoginPath = new PathString("/"); options.ExpireTimeSpan = TimeSpan.FromMinutes(5.0); }); این بخش تنظیمات احراز هویت با کوکی‌ها را اضافه می‌کند و مسیر ورود و زمان انقضای کوکی را تنظیم می‌کند. سرویس‌های سفارشی: csharp builder.Services.AddScoped<IDataBaseContext, DataBaseContext>(); builder.Services.AddScoped<IGetUsersService, GetUsersService>(); builder.Services.AddScoped<IGetRolesService, GetRolesService>(); builder.Services.AddScoped<IRegisterUserService, RegisterUserService>(); builder.Services.AddScoped<IRemoveUserService, RemoveUserService>(); builder.Services.AddScoped<IUserLoginService, UserLoginService>(); builder.Services.AddScoped<IUserSatusChangeService, UserSatusChangeService>(); builder.Services.AddScoped<IEditUserService, EditUserService>(); تزریق وابستگی‌ها برای الگوهای فاساد: csharp builder.Services.AddScoped<IProductFacad, ProductFacad>(); افزودن کانتکست دیتابیس: csharp string connectionString = @"Server=.\SQLEXPRESS; Database=Test_StoreDb; Integrated Security=True; TrustServerCertificate=True;"; builder.Services.AddDbContext<DataBaseContext>(options => options.UseSqlServer(connectionString)); افزودن کنترلرها با ویوها: csharp builder.Services.AddControllersWithViews(); ساختن وب اپلیکیشن: var app = builder.Build(); پیکربندی پایپ‌لاین درخواست‌های HTTP: بررسی محیط توسعه: csharp if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } Middlewareها: csharp app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.UseAuthentication(); تنظیمات مسیرها: csharp app.MapControllerRoute( name: "areas", pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}"); app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); اجرای اپلیکیشن: app.Run(); نتیجه‌گیری: این کد به شما امکان می‌دهد تا برنامه ASP.NET Core خود را راه‌اندازی و پیکربندی کنید. شامل پیکربندی سرویس‌های احراز هویت، کانتکست دیتابیس، سرویس‌های سفارشی، و تعریف مسیرهای مختلف است. همچنین میان‌افزارها (Middleware) برای مدیریت درخواست‌های HTTP و خطاها تنظیم شده‌اند.

کد app.UseAuthentication(); بخشی از پیکربندی پایپ‌لاین درخواست‌های HTTP در برنامه ASP.NET Core شما است. توضیحات کد: کاربرد اصلی: این خط کد میان‌افزار (Middleware) احراز هویت را به پایپ‌لاین درخواست‌های HTTP اضافه می‌کند. این میان‌افزار مسئول مدیریت احراز هویت کاربران در درخواست‌های ورودی به برنامه شما است. نحوه عملکرد: وقتی که درخواست به برنامه شما وارد می‌شود، این میان‌افزار بررسی می‌کند که آیا کاربر احراز هویت شده است یا خیر. اگر کاربر احراز هویت نشده باشد و به منابع محافظت شده دسترسی داشته باشد، به صفحه ورود یا هر مسیر تعیین شده دیگر هدایت می‌شود. محل قرارگیری: این خط کد باید قبل از app.UseAuthorization(); قرار گیرد. به این ترتیب، ابتدا احراز هویت کاربر انجام می‌شود و سپس مجوز‌های دسترسی بررسی می‌شوند. مثال: در این مثال، app.UseAuthentication(); به عنوان بخشی از پیکربندی پایپ‌لاین درخواست‌های HTTP قرار دارد: csharp var app = builder.Build(); // Configure the HTTP request pipeline. if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Home/Error"); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); // فعال‌سازی میان‌افزار احراز هویت app.UseAuthorization(); // فعال‌سازی میان‌افزار مجوزها app.MapControllerRoute( name: "default", pattern: "{controller=Home}/{action=Index}/{id?}"); app.Run(); نتیجه‌گیری: این خط کد به برنامه شما کمک می‌کند تا کاربران را احراز هویت کند و اطمینان حاصل شود که تنها کاربران احراز هویت شده به منابع محافظت شده دسترسی دارند.

بیایید این بخش از کد را که مربوط به پیکربندی سرویس‌های احراز هویت در ASP.NET Core است بررسی کنیم. توضیحات کد: افزودن سرویس احراز هویت: csharp builder.Services.AddAuthentication(options => { options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme; options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme; }) AddAuthentication: این متد، احراز هویت را به کانتینر سرویس‌ها اضافه می‌کند. options.DefaultSignInScheme: تعیین طرح پیش‌فرض برای ورود به سیستم (sign-in). در اینجا از کوکی‌ها استفاده شده است. options.DefaultAuthenticateScheme: تعیین طرح پیش‌فرض برای احراز هویت. options.DefaultChallengeScheme: تعیین طرح پیش‌فرض برای چالش‌های احراز هویت. پیکربندی تنظیمات کوکی: csharp .AddCookie(options => { options.LoginPath = new PathString("/"); options.ExpireTimeSpan = TimeSpan.FromMinutes(5.0); }); AddCookie: این متد پیکربندی احراز هویت با کوکی را به احراز هویت اضافه می‌کند. options.LoginPath: مسیر ورود به سیستم را تعیین می‌کند. در اینجا مسیر ریشه (/) تعیین شده است. options.ExpireTimeSpan: زمان انقضای کوکی‌ها را تعیین می‌کند. در اینجا 5 دقیقه تنظیم شده است. نتیجه‌گیری: این کد احراز هویت با کوکی را در برنامه ASP.NET Core شما پیکربندی می‌کند. با تنظیم گزینه‌های مختلف مانند طرح‌های پیش‌فرض برای ورود، احراز هویت و چالش‌های احراز هویت، و همچنین پیکربندی تنظیمات کوکی مانند مسیر ورود و زمان انقضا، این کد به شما اطمینان می‌دهد که کاربران به درستی احراز هویت می‌شوند و دسترسی به منابع محافظت شده کنترل می‌شود.

مدیریت دسته بندی ها