簡單服務器端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 =>
 { 18                 options.CheckConsentNeeded = context => true; 19                 options.MinimumSameSitePolicy = SameSiteMode.None; 20  }); 21  services.AddAuthentication( 22  CookieAuthenticationDefaults.AuthenticationScheme) 23  .AddCookie(); 24             // 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(); 34             services.AddScoped<HttpContextAccessor>(); 35  services.AddHttpClient(); 36             services.AddScoped<HttpClient>(); 37             // 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(); 61  app.UseStaticFiles(); 62  app.UseCookiePolicy(); 63  app.UseAuthentication(); 64             // BLAZOR COOKIE Auth Code (end)
            // ******
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
                endpoints.MapFallbackToPage("/_Host");
            });
        }
    }

首先，代碼添加了對cookie的支持。 Cookie由應用程序創建，並在用戶登錄時傳遞到用戶的Web瀏覽器。Web瀏覽器將Cookie傳遞回應用程序以指示用戶已通過身份驗證。 當用戶“注銷”時，cookie被刪除。

這段代碼還添加了:

• HttpContextAccessor
• HttpClient

在代碼中使用依賴注入訪問的服務。

查看這個鏈接可以獲得關於 httpcontexcessor 如何讓我們確定登錄用戶是誰的完整解釋。

 

添加登錄/注銷頁面

登錄（和注銷）由.cshtml頁面執行。

添加以下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中傳遞它即可。

現在，當我們登錄並單擊“獲取用戶”按鈕時，控制器方法便能夠檢測到已登錄的用戶。