简单服务器端Blazor Cookie身份验证的演示

为了演示身份验证如何在服务器端 Blazor 应用程序中工作，我们将把身份验证简化为最基本的元素。我们将简单地设置一个 cookie，然后读取应用程序中的 cookie。

应用程序身份验证

大多数商业 web 应用程序都要求用户登录到应用程序中。

用户输入他们的用户名和密码，对照成员资格数据库进行检查。

一旦通过身份验证，该应用程序即可识别用户，并且现在可以安全地传递内容。

理解了服务器端 Blazor 应用程序的身份验证过程，我们就可以实现一个满足我们需要的身份验证和成员资格管理系统(例如，一个允许用户创建和管理其用户帐户的系统)。

注意：此示例代码不会检查是否有人使用了合法的用户名和密码！您将需要添加正确的代码进行检查。这段代码只是对授权用户的过程的演示。

创建应用程序

打开Visual Studio 2019。

创建没有身份验证的 Blazor 服务器应用程序。

添加Nuget软件包

在解决方案资源管理器中，右键单击项目名称并选择 Manage NuGet Packages。

添加对以下库的引用：

Microsoft.AspNetCore.Authorization
Microsoft.AspNetCore.Http
Microsoft.AspNetCore.Identity

另外还有

Microsoft.AspNetCore.Blazor.HttpClient

添加Cookie身份验证

打开Startup.cs文件。

在文件顶部添加以下using语句：

 // ******

 // BLAZOR COOKIE Auth Code (begin)

 using Microsoft.AspNetCore.Authentication.Cookies;

 using Microsoft.AspNetCore.Http;

 using System.Net.Http;

 // BLAZOR COOKIE Auth Code (end)

 // ******

将Start 类改为如下，添加注释标记为 BLAZOR COOKIE Auth Code 的部分:

 public class Startup

     {

         public Startup(IConfiguration configuration)

         {

             Configuration = configuration;

         }

         public IConfiguration Configuration { get; }

         // This method gets called by the runtime. Use this method to

         // add services to the container.

         // For more information on how to configure your application,

         // visit https://go.microsoft.com/fwlink/?LinkID=398940

         public void ConfigureServices(IServiceCollection services)

         {

             // ******

             // BLAZOR COOKIE Auth Code (begin)

             services.Configure<CookiePolicyOptions>(options =>

             {

                 options.CheckConsentNeeded = context => true;

                 options.MinimumSameSitePolicy = SameSiteMode.None;

             });

             services.AddAuthentication(

                 CookieAuthenticationDefaults.AuthenticationScheme)

                 .AddCookie();

             // BLAZOR COOKIE Auth Code (end)

             // ******

             services.AddRazorPages();

             services.AddServerSideBlazor();

             services.AddSingleton<WeatherForecastService>();

             // ******

             // BLAZOR COOKIE Auth Code (begin)

             // From: https://github.com/aspnet/Blazor/issues/1554

             // HttpContextAccessor

             services.AddHttpContextAccessor();

             services.AddScoped<HttpContextAccessor>();

             services.AddHttpClient();

             services.AddScoped<HttpClient>();

             // BLAZOR COOKIE Auth Code (end)

             // ******

         }

         // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

         public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

         {

             if (env.IsDevelopment())

             {

                 app.UseDeveloperExceptionPage();

             }

             else

             {

                 app.UseExceptionHandler("/Error");

                 // The default HSTS value is 30 days.

                 // You may want to change this for production scenarios,

                 // see https://aka.ms/aspnetcore-hsts.

                 app.UseHsts();

             }

             app.UseHttpsRedirection();

             app.UseStaticFiles();

             app.UseRouting();

             // ******

             // BLAZOR COOKIE Auth Code (begin)

             app.UseHttpsRedirection();

             app.UseStaticFiles();

             app.UseCookiePolicy();

             app.UseAuthentication();

             // BLAZOR COOKIE Auth Code (end)

             // ******

             app.UseEndpoints(endpoints =>

             {

                 endpoints.MapBlazorHub();

                 endpoints.MapFallbackToPage("/_Host");

             });

         }

     }

首先，代码添加了对cookie的支持。 Cookie由应用程序创建，并在用户登录时传递到用户的Web浏览器。Web浏览器将Cookie传递回应用程序以指示用户已通过身份验证。当用户“注销”时，cookie被删除。

这段代码还添加了:

HttpContextAccessor
HttpClient

在代码中使用依赖注入访问的服务。

查看这个链接可以获得关于 httpcontexcessor 如何让我们确定登录用户是谁的完整解释。

添加登录/注销页面

添加以下Razor页面和代码：

Login.cshtml

 @page

 @model BlazorCookieAuth.Server.Pages.LoginModel

 @{

     ViewData["Title"] = "Log in";

 }

 <h2>Login</h2>

Login.cshtml.cs

 using System;

 using System.Collections.Generic;

 using System.Security.Claims;

 using System.Threading.Tasks;

 using Microsoft.AspNetCore.Authentication;

 using Microsoft.AspNetCore.Authentication.Cookies;

 using Microsoft.AspNetCore.Authorization;

 using Microsoft.AspNetCore.Mvc;

 using Microsoft.AspNetCore.Mvc.RazorPages;

 namespace BlazorCookieAuth.Server.Pages

 {

     [AllowAnonymous]

     public class LoginModel : PageModel

     {

         public string ReturnUrl { get; set; }

         public async Task<IActionResult>

             OnGetAsync(string paramUsername, string paramPassword)

         {

             string returnUrl = Url.Content("~/");

             try

             {

                 // 清除现有的外部Cookie

                 await HttpContext

                     .SignOutAsync(

                     CookieAuthenticationDefaults.AuthenticationScheme);

             }

             catch { }

             // *** !!! 在这里您可以验证用户 !!! ***

             // 在此示例中，我们仅登录用户（此示例始终登录用户）

             //

             var claims = new List<Claim>

             {

                 new Claim(ClaimTypes.Name, paramUsername),

                 new Claim(ClaimTypes.Role, "Administrator"),

             };

             var claimsIdentity = new ClaimsIdentity(

                 claims, CookieAuthenticationDefaults.AuthenticationScheme);

             var authProperties = new AuthenticationProperties

             {

                 IsPersistent = true,

                 RedirectUri = this.Request.Host.Value

             };

             try

             {

                 await HttpContext.SignInAsync(

                 CookieAuthenticationDefaults.AuthenticationScheme,

                 new ClaimsPrincipal(claimsIdentity),

                 authProperties);

             }

             catch (Exception ex)

             {

                 string error = ex.Message;

             }

             return LocalRedirect(returnUrl);

         }

     }

 }

Logout.cshtml

 @page

 @model BlazorCookieAuth.Server.Pages.LogoutModel

 @{

     ViewData["Title"] = "Logout";

 }

 <h2>Logout</h2>

Logout.cshtml.cs

 using System;

 using System.Threading.Tasks;

 using Microsoft.AspNetCore.Authentication;

 using Microsoft.AspNetCore.Authentication.Cookies;

 using Microsoft.AspNetCore.Mvc;

 using Microsoft.AspNetCore.Mvc.RazorPages;

 namespace BlazorCookieAuth.Server.Pages

 {

     public class LogoutModel : PageModel

     {

         public async Task<IActionResult> OnGetAsync()

         {

             // 清除现有的外部Cookie

             await HttpContext

                 .SignOutAsync(

                 CookieAuthenticationDefaults.AuthenticationScheme);

             return LocalRedirect(Url.Content("~/"));

         }

     }

 }

添加客户代码

使用以下代码将一个名为 LoginControl.razor 的页面添加到 Shared 文件夹:

 @page "/loginControl"

 @using System.Web;

 <AuthorizeView>

     <Authorized>

         <b>Hello, @context.User.Identity.Name!</b>

         <a class="ml-md-auto btn btn-primary"

            href="/logout?returnUrl=/"

            target="_top">Logout</a>

     </Authorized>

     <NotAuthorized>

         <input type="text"

                placeholder="User Name"

                @bind="@Username" />

         &nbsp;&nbsp;

         <input type="password"

                placeholder="Password"

                @bind="@Password" />

         <a class="ml-md-auto btn btn-primary"

            href="/login?paramUsername=@encode(@Username)&paramPassword=@encode(@Password)"

            target="_top">Login</a>

     </NotAuthorized>

 </AuthorizeView>

 @code {

     string Username = "";

     string Password = "";

     private string encode(string param)

     {

         return HttpUtility.UrlEncode(param);

     }

 }

此代码创建一个登录组件，该组件使用AuthorizeView组件根据用户当前的身份验证包装标记代码。

如果用户已登录，我们将显示其姓名和一个“注销”按钮（可将用户导航到之前创建的注销页面）。

如果未登录，我们会显示用户名和密码框以及一个登录按钮（将用户导航到之前创建的登录页面）。

最后，我们将MainLayout.razor页面（在Shared文件夹中）更改为以下内容：

 @inherits LayoutComponentBase

 <div class="sidebar">

     <NavMenu />

 </div>

 <div class="main">

     <div class="top-row px-4">

         <!-- BLAZOR COOKIE Auth Code (begin) -->

         <LoginControl />

         <!-- BLAZOR COOKIE Auth Code (end) -->

     </div>

     <div class="content px-4">

         @Body

     </div>

 </div>

这会将登录组件添加到Blazor应用程序中每个页面的顶部。

打开App.razor页面，并将所有现有代码包含在 CascadingAuthenticationState 标记中。

现在我们可以按F5键运行该应用程序。

我们可以输入用户名和密码，然后单击“登录”按钮…

然后我们可以在 Google Chrome 浏览器 DevTools 中看到 cookie 已经被创建。

当我们单击注销...

Cookie被删除。

调用服务器端控制器方法

此时，所有.razor页面将正确检测用户是否已通过身份验证，并按预期运行。但是，如果我们向服务器端控制器发出http请求，则将无法正确检测到经过身份验证的用户。

为了演示这一点，我们首先打开startup.cs页面，并将以下代码添加到app.UseEndpoints方法的末尾（在endpoints.MapFallbackToPage（“/ _ Host”）行下），以允许对控制器的http请求正确路由：

  // ******

  // BLAZOR COOKIE Auth Code (begin)

     endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}/{id?}");

  // BLAZOR COOKIE Auth Code (end)

  // ******

接下来，我们创建一个Controllers文件夹，并使用以下代码添加UserController.cs文件：

 using Microsoft.AspNetCore.Mvc;

 namespace BlazorCookieAuth.Controllers

 {

     [Route("api/[controller]")]

     [ApiController]

     public class UserController : Controller

     {

         // /api/User/GetUser

         [HttpGet("[action]")]

         public UserModel GetUser()

         {

             // Instantiate a UserModel

             var userModel = new UserModel

             {

                 UserName = "[]",

                 IsAuthenticated = false

             };

             // Detect if the user is authenticated

             if (User.Identity.IsAuthenticated)

             {

                 // Set the username of the authenticated user

                 userModel.UserName =

                     User.Identity.Name;

                 userModel.IsAuthenticated =

                     User.Identity.IsAuthenticated;

             };

             return userModel;

         }

     }

     // Class to hold the UserModel

     public class UserModel

     {

         public string UserName { get; set; }

         public bool IsAuthenticated { get; set; }

     }

 }

我们使用以下代码添加一个新的.razor页面CallServerSide.razor：

 @page "/CallServerSide"

 @using BlazorCookieAuth.Controllers

 @using System.Net.Http

 @inject HttpClient Http

 @inject NavigationManager UriHelper

 @inject Microsoft.AspNetCore.Http.IHttpContextAccessor HttpContextAccessor

 <h3>Call Server Side</h3>

 <p>Current User: @CurrentUser.UserName</p>

 <p>IsAuthenticated: @CurrentUser.IsAuthenticated</p>

 <button class="btn btn-primary" @onclick="GetUser">Get User</button>

 @code {

     UserModel CurrentUser = new UserModel();

     async Task GetUser()

     {

         // Call the server side controller

         var url = UriHelper.ToAbsoluteUri("/api/User/GetUser");

         var result = await Http.GetJsonAsync<UserModel>(url.ToString());

         // Update the result

         CurrentUser.UserName = result.UserName;

         CurrentUser.IsAuthenticated = result.IsAuthenticated;

     }

 }

最后，我们使用以下代码在Shared / NavMenu.razor中添加指向页面的链接：

 <li class="nav-item px-3">

       <NavLink class="nav-link" href="CallServerSide">

             <span class="oi oi-list-rich" aria-hidden="true"></span> Call Server Side

       </NavLink>

 </li>

我们运行该应用程序并登录。

我们导航到新的Call Server Side控件，然后单击Get User按钮（该按钮将调用刚刚添加的UserController.cs），并且它不会检测到已登录的用户。

要解决此问题，请将CallServerSide.razor页面中的GetUser方法更改为以下内容：

 async Task GetUser()

     {

         // Code courtesy from Oqtane.org (@sbwalker)

         // We must pass the authentication cookie in server side requests

         var authToken =

         HttpContextAccessor.HttpContext.Request.Cookies[".AspNetCore.Cookies"];

         if (authToken != null)

         {

             Http.DefaultRequestHeaders

             .Add("Cookie", ".AspNetCore.Cookies=" + authToken);

             // Call the server side controller

             var url = UriHelper.ToAbsoluteUri("/api/User/GetUser");

             var result = await Http.GetJsonAsync<UserModel>(url.ToString());

             // Update the result

             CurrentUser.UserName = result.UserName;

             CurrentUser.IsAuthenticated = result.IsAuthenticated;

         }

     }

我们有一个身份验证cookie，我们只需要在DefaultRequestHeaders中传递它即可。

现在，当我们登录并单击“获取用户”按钮时，控制器方法便能够检测到已登录的用户。