學習ASP.NET Core Blazor編程系列二十二——登錄（1） 學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程序（上）

學習ASP.NET Core Blazor編程系列文章之目錄

學習ASP.NET Core Blazor編程系列一——綜述

學習ASP.NET Core Blazor編程系列二——第一個Blazor應用程序（上）

學習ASP.NET Core Blazor編程系列三——實體

學習ASP.NET Core Blazor編程系列五——列表頁面

學習ASP.NET Core Blazor編程系列七——新增圖書

學習ASP.NET Core Blazor編程系列八——數據校驗

學習ASP.NET Core Blazor編程系列十三——路由（完）

學習ASP.NET Core Blazor編程系列十五——查詢

學習ASP.NET Core Blazor編程系列十六——排序

 學習ASP.NET Core Blazor編程系列十七——文件上傳（上）     

學習ASP.NET Core Blazor編程系列二十——文件上傳（完）

學習ASP.NET Core Blazor編程系列二十一——數據刷新

 

 

      通過前面的ASP.NET Core Blazor編程系列文章爲讀者介紹了Blazor及組件的相關基礎概念，以及我們已經實現了用Blazor實現對數據的增刪改查這四大基本功能，以及文件上傳的功能，通過這些功能的實現我們已經能用Blazor處理一些簡單的實際問題，特別是企業內部信息管理系統的相關問題。

     前面的ASP.NET Core Blazor編程系列文章中卻沒有講到信息管理系統中一個最基本功能——登錄，有關登錄功能的介紹

     通過搜索引擎你可以搜索到很多關於如何基於Blazor開發登錄頁面的文章，不過大部分的Blazor登錄示例是往往給出的是Identity Server的例子，包括微軟自己的文檔網站上的示例。

一、登錄界面

       要實現web系統的登錄功能，首先要考慮登錄的認證方式，Web系統常見的登錄機制有Cookie、Session或Token。對於Web 1.0時代的應用來說，最好用的就是Session；而對Web 2.0時代之後，隨着一些前端技術比如Vue、Angular、React、Blazor的興起，前後端分離技術的應用，單頁應用開始出現在各種項目中，後端採用Restful架構設計Web API接口，這些接口都是無狀態的，因此一般只選擇Cookie或Token，由前端持有自己的身份票據，後端做驗證而不存儲。

       微軟官方最推薦的方式是使用OAuth和OIDC。如果開發企業內部信息管理系統的後臺，還要另搞一個OAuth服務器，對絕大多數的企業內部IT開發者來說維護和部署成本過高。接下來我要介紹的登錄功能，不使用OAuth服務器，而是使用傳統的用戶名與密碼模式+後端生成JWT。對企業內部後臺應用來說，這麼做已經足夠安全。

       接下來介紹的登錄功能是基於JWT的企業內部應用登錄（用戶名/密碼）認證，本文中的代碼只是示例代碼，並不保證代碼在安全性，邏輯層的可靠性。

      1. 在Visual Studio 2022的解決方案資源管理器中，鼠標左鍵選中“Models”文件夾，右鍵單擊，在彈出菜單中選擇“添加—>類”，並將類命名爲“UserInfo”， 這個新增實體類作爲登錄表單用的Model。如下圖。並添加如下代碼： 

 

using System.ComponentModel.DataAnnotations;

 
namespace BlazorAppDemo.Models
{

    public class UserInfo
{

        [Key]
        [Display(Name = "用戶名")]
        [Required]
        [StringLength(30,MinimumLength =3)]
        public string UserName { get; set; }

        [Display(Name = "密碼")]
        [Required]
        [DataType(DataType.Password)]
        [StringLength(30,MinimumLength =4)]
        public string Password { get; set; }

        public DateTime LastLoginTime { get; set; }

        public DateTime ChangedPasswordTime { get; set; }  

    }
}

 

 

二、將 “UserInfo” 類生成數據庫表

   1.在Visual Studio 2022的解決方案資源管理器中找到BookContext (Models/BookContext.cs) 文件，使用鼠標左鍵雙擊在文本編輯器中打開，添加UserInfo表的相關代碼。代碼如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.EntityFrameworkCore;

namespace BlazorAppDemo.Models
{
    public class BookContext:DbContext
    {
        public BookContext(DbContextOptions<BookContext> options)
              : base(options)
        {
          
        }

        public DbSet<Book> Book { get; set; }

        public DbSet<FileDescribe> FileDescribe { get; set; }

        public DbSet<UserInfo> UserInfo { get; set; }

    }
}

 

2.在Visual Studio 2022中打開程序包管理器控制檯 (PMC)，“菜單欄>工具> NuGet 包管理器 > 程序包管理器控制檯”。

 

 

3.在 PMC 中分別執行以下兩條命令。這兩條命令將實現向數據庫中添加 UserInfo表，執行結果發下圖。

       Add-Migration AddUserInfoTable

       Update-Database

4.在執行以上指令之後，會在數據庫中添加UserInfo表，結果如下圖。