Bước 1: Tạo Project ASP.NET MVC Core
Trước tiên, bạn cần tạo một dự án ASP.NET MVC Core mới trong Visual Studio hoặc bằng cách sử dụng các công cụ dòng lệnh như dotnet CLI.
Chọn phiên bản Net 6.0 hoặc 7.0 để được Project như hình bên dưới:
Bước 2: Xây dựng Form Giao diện Login để thực hiện đăng nhập
- Tạo Areas cho Admin (sử dụng để vào trang quản trị)
Chuột phải lên Project, chọn Add > New Scaffolded Item...
Chọn MVC Area, nhấn Add và đặt tên "Admin"
Chờ hệ thống thực thi việc tạo MVC Area tự động.
- Thêm định tuyến cho Areas mới tạo, nằm trên định tuyến mặc định trong Program.cs
app.MapAreaControllerRoute(
name: "admin",
areaName: "Admin",
pattern: "Admin/{controller=Account}/{action=Index}/{id?}");
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");- Tại Area Admin mới được tạo, tạo AccountController
- Tại AccountController, tạo Action Login với phương thức Get và View tương ứng(chú ý thêm [Area("Admin")] phía trên Controller để xác nhận đây là Controller thuộc Ares là Admin)
- Tạo thư mục Admin trong wwwroot và copy các thư mục trong giao diện đã chia sẻ
- Tạo View Login từ LoginController
@model MyCodeFirstApproach.Models.LoginModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="~/Admin/images/favicon.png">
<title>Đăng nhập</title>
<!--Core CSS -->
<link href="~/Admin/bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="~/Admin/css/bootstrap-reset.css" rel="stylesheet">
<link href="~/Admin/font-awesome/css/font-awesome.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="~/Admin/css/style.css" rel="stylesheet">
<link href="~/Admin/css/style-responsive.css" rel="stylesheet" />
</head>
<body class="login-body">
<div class="container">
<form asp-action="Login" method="post">
<div class="form-signin">
<h2 class="form-signin-heading">Đăng nhập</h2>
<div class="login-wrap">
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="user-login-info">
@Html.TextBoxFor(model => model.UserName, new { @class = "form-control", @placeholder = "Tên đăng nhập", @autofocus = "autofocus" })
@Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
@Html.TextBoxFor(model => model.Password, new { @class = "form-control", @placeholder = "Mật khẩu", @type="password" })
@Html.ValidationMessageFor(model => model.Password, "", new { @class = "text-danger" })
</div>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Nhớ tôi không?
<span class="pull-right">
<a data-toggle="modal" href="#myModal"> Quên mật khẩu?</a>
</span>
</label>
<button class="btn btn-lg btn-login btn-block" type="submit">Đăng nhập</button>
</form>
<div class="registration">
Bạn không có tài khoản à?
<a class="" href="registration.html">
Tạo tài khoản
</a>
</div>
</div>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Quên mật khẩu ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success" type="button">Submit</button>
</div>
</div>
</div>
</div>
<!-- modal -->
</div>
</div>
<!-- Placed js at the end of the document so the pages load faster -->
<!--Core js-->
<script src="~/Admin/js/jquery.js"></script>
<script src="~/Admin/bs3/js/bootstrap.min.js"></script>
</body>
</html>- Tạo Model LoginModel.cs để lưu thông tin đăng nhập
using System.ComponentModel.DataAnnotations;
using System.Xml.Linq;
namespace DemoNet7.Models
{
public class LoginModel
{
[Required]
[Display(Name = "Username")]
public string UserName { get; set; }
[Required]
[DataType(DataType.Password)]
public string Password { get; set; }
public bool RememberLogin { get; set; }
public string ReturnUrl { get; set; }
}
}Bước 3: Lưu Cookie và cấp quyền
- Tạo Action Login với phương thức Post trong AccountController
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Login(LoginModel model)
{
if (ModelState.IsValid)
{
var username = model.UserName;
var password = model.Password;
if (!string.IsNullOrEmpty(username) && string.IsNullOrEmpty(password))
{
return RedirectToAction("Login");
}
if (!(username.Contains("admin") && password.Contains("admin")))
{
//TempData["Error"] = "Tên đăng nhập hoặc mật khẩu không đúng.";
ModelState.AddModelError("", "Tên đăng nhập hoặc mật khẩu không đúng.");
return View(model);
}
//A claim is a statement about a subject by an issuer and
//represent attributes of the subject that are useful in the context of authentication and authorization operations.
var claims = new List<Claim>() {
new Claim(ClaimTypes.Name, username),
new Claim(ClaimTypes.Role, "Admin"),
};
//Initialize a new instance of the ClaimsIdentity with the claims and authentication scheme
var identity = new ClaimsIdentity(claims, "Admin");
//Initialize a new instance of the ClaimsPrincipal with ClaimsIdentity
var principal = new ClaimsPrincipal(identity);
//SignInAsync is a Extension method for Sign in a principal for the specified scheme.
await HttpContext.SignInAsync("Admin", principal, new AuthenticationProperties()
{
IsPersistent = model.RememberLogin
});
TempData["Message"] = "Đăng nhập thành công";
var routeValues = new RouteValueDictionary
{
{"area","Admin" },
{"claimType","AdminClaim" },
{"claimValue","true" }
};
return RedirectToAction("Index", "Home", routeValues);// RedirectToAction("Index", "Home");
}
ModelState.AddModelError("", "Tên đăng nhập hoặc mật khẩu không đúng.");
return View(model);
}Ở đây việc lưu trữ thông tin người dùng khi đăng nhập bằng Claims
Claims (các quyền) được sử dụng trong hệ thống xác thực và phân quyền để đại diện cho thông tin và quyền hạn của người dùng. Dưới đây là một số lợi ích của việc sử dụng claims trong quá trình xác thực:
- Chứng minh danh tính: Claims cho phép xác thực người dùng bằng cách cung cấp thông tin như tên người dùng, email, số điện thoại, v.v. Điều này giúp đảm bảo rằng người dùng đang truy cập vào hệ thống là người thật và được xác minh.
- Phân quyền: Claims cung cấp thông tin về vai trò, quyền hạn và các thuộc tính khác của người dùng. Khi người dùng được xác thực, hệ thống có thể sử dụng claims để kiểm tra quyền truy cập của người dùng đối với các tài nguyên và chức năng khác nhau trong ứng dụng. Điều này giúp giới hạn quyền truy cập và bảo vệ các phần của ứng dụng chỉ dành cho các người dùng có quyền truy cập tương ứng.
- Truyền thông tin: Claims có thể chứa bất kỳ thông tin nào về người dùng mà hệ thống cần để thực hiện các chức năng cụ thể. Ví dụ, claims có thể chứa thông tin về ngôn ngữ ưa thích của người dùng, thông tin về địa chỉ, v.v. Các thông tin này có thể được sử dụng để cung cấp trải nghiệm cá nhân hóa hoặc tuỳ chỉnh trong ứng dụng.
- Dễ dàng mở rộng: Việc sử dụng claims trong quá trình xác thực cho phép dễ dàng mở rộng hệ thống bằng cách thêm các thông tin và quyền hạn mới cho người dùng. Thay vì phải thay đổi cấu trúc cơ sở dữ liệu hoặc mã nguồn, chỉ cần thêm các claims mới và cập nhật cách xử lý xác thực để hỗ trợ các thông tin và quyền hạn mới này.
await HttpContext.SignInAsync("Admin", principal, new AuthenticationProperties()HttpContext.SignInAsync được sử dụng để đăng nhập người dùng và tạo một phiên làm việc cho người dùng đã xác thực. Các tham số của phương thức này bao gồm:
- "Admin": Tên của scheme xác thực được sử dụng. Trong ví dụ này, scheme có tên "Admin" được sử dụng để xác thực người dùng.
- principal: Đối tượng ClaimsPrincipal đại diện cho người dùng đã xác thực.
- AuthenticationProperties(): Một đối tượng AuthenticationProperties chứa các thuộc tính xác thực, trong đó IsPersistent được thiết lập dựa trên model.RememberLogin để xác định xem phiên làm việc có được lưu trữ vĩnh viễn hay không.
Nếu đăng nhập thành công, điều hướng đến Action Index của Controller Home với Area là Admin tương ứng:
return RedirectToAction("Index", "Home", routeValues);- Tuy nhiên Cookie vẫn chưa được lưu, do đó hãy vào Program.cs để điều chỉnh Services
// Add services to the container.
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie(options =>
{
options.LoginPath = "/Admin/Account/Login"; // Đường dẫn đến trang đăng nhập
options.ReturnUrlParameter = "returnUrl";
}).AddCookie("Admin", options =>
{
options.LoginPath = new PathString("/Admin/Account/Login");
});
vào trước:
builder.Services.AddControllersWithViews();
Mã trên là một phương thức ConfigureServices trong ASP.NET Core. Phương thức này được sử dụng để cấu hình các dịch vụ được sử dụng trong ứng dụng web.
Dòng đầu tiên services.AddAuthentication được sử dụng để cấu hình xác thực trong ứng dụng. Trong ví dụ này, xác thực được cấu hình sử dụng CookieAuthentication. CookieAuthenticationDefaults.AuthenticationScheme chỉ định việc sử dụng phương thức xác thực dựa trên cookie.
Tiếp theo, AddCookie được sử dụng để cấu hình tùy chọn cho việc xác thực dựa trên cookie. Trong ví dụ này, tùy chọn được cấu hình bao gồm:
- options.LoginPath: Đường dẫn đến trang đăng nhập. Khi người dùng không được xác thực, họ sẽ được chuyển hướng đến đường dẫn này để đăng nhập.
- options.ReturnUrlParameter: Đường dẫn mặc định sau khi xác thực thành công. Tham số này được sử dụng để chuyển hướng người dùng đến trang ban đầu mà họ yêu cầu trước khi yêu cầu xác thực.
Sau đó, AddCookie được sử dụng một lần nữa với tên "Admin" để cấu hình tùy chọn riêng cho việc xác thực dựa trên cookie đối với quyền quản trị.
Cuối cùng, services.AddControllersWithViews() được sử dụng để đăng ký dịch vụ điều khiển và chế độ xem trong ứng dụng.
- Thêm app.UseAuthentication() vào trước app.UseAuthorization();
Mã app.UseAuthentication() và app.UseAuthorization() được sử dụng để cấu hình và kích hoạt middleware xác thực và phân quyền trong ứng dụng ASP.NET Core.
- app.UseAuthentication() là một middleware được sử dụng để xác thực các yêu cầu từ người dùng. Nó đảm bảo rằng các yêu cầu được xác thực trước khi điều hướng đến các middleware và điều khiển tiếp theo. Nếu người dùng chưa xác thực hoặc phiên làm việc hết hạn, middleware này sẽ chuyển hướng người dùng đến trang đăng nhập được xác định trong cấu hình.
- app.UseAuthorization() là một middleware được sử dụng để kiểm tra và xác định quyền truy cập của người dùng đối với các phương thức và tài nguyên trong ứng dụng. Nếu người dùng không có quyền truy cập, middleware này sẽ chuyển hướng người dùng đến trang truy cập bị từ chối hoặc thực hiện các hành động khác tương ứng.
Thứ tự sử dụng của hai middleware này quan trọng. app.UseAuthentication() nên được đặt trước app.UseAuthorization() để đảm bảo rằng việc xác thực xảy ra trước khi kiểm tra phân quyền truy cập.
Thông qua việc sử dụng cả hai middleware này, ứng dụng có thể xác thực người dùng và kiểm tra quyền truy cập trước khi cho phép truy cập vào các tài nguyên và phương thức trong ứng dụng.
Bước 4: Xây dựng trang Home
- Tạo HomeController trong Areas Admin
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
namespace DemoNet7.Areas.Admin.Controllers
{
[Area("Admin")]
[Authorize(Roles = "Admin")]
[Authorize(AuthenticationSchemes = "Admin")]
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}- Tạo View tương ứng với Action Index của HomeController để hiển thị nội dung sau khi đăng nhập thành công
- Bổ sung thêm Action Logout trong AccountController
Trên đây là hướng dẫn cơ bản về cách xây dựng ứng dụng đăng nhập ASP.NET MVC Core với chứng thực Claim. Bạn có thể tùy chỉnh và mở rộng theo yêu cầu cụ thể của ứng dụng của mình.
Xem Video Youtube: