Jx.Cms開發筆記（二）-系統登錄

界面

此界面完全抄了BootstrapAdmin

css隔離

由於登錄頁面的css與其他頁面沒有什么關系，所以為了防止其他界面的css被污染，我們需要使用css隔離。

css隔離需要在_Host.cshtml中添加一條css引用。此引用如果使用Blazor模板創建項目時會自帶，如果自己添加新的Area，則需要自己加入。

格式為

<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">

如果是在RCL中使用，則需要添加

<link href="_content/{ASSEMBLY NAME}/{ASSEMBLY NAME}.bundle.scp.css" rel="stylesheet">

這里我們創建一個Login.razor.css來啟用css隔離。

內容見Login.razor.css

Blazor Server登錄

在Blazor 組件庫 BootstrapBlazor中 Ajax 組件的使用中我們提到過，當BlazorServer連接上以后，我們就無法在進行cookie操作了，所以這里需要使用瀏覽器端進行Ajax處理。

這里就需要我們的Ajax組件登場了。

我們首先添加<Ajax></Ajax>標簽，然后在登錄按鈕的DoLogin中編寫代碼。

private async Task DoLogin()
    {
        if (LoginVo.UserName.IsNullOrEmpty())
        {
            await MessageService.Show(new MessageOption()
            {
                Color = Color.Danger,
                Content = "用戶名不能為空"
            });
            return;
        }
        
        if (LoginVo.Password.IsNullOrEmpty())
        {
            await MessageService.Show(new MessageOption()
            {
                Color = Color.Danger,
                Content = "密碼不能為空"
            });
            return;
        }
        
        var ajaxOption = new AjaxOption
        {
            Url = "/api/Admin/User/Login",
            Data = LoginVo
        };
        var str = await AjaxService.GetMessage(ajaxOption);
        if (str.IsNullOrEmpty())
        {
            await MessageService.Show(new MessageOption()
            {
                Color = Color.Danger,
                Content = "登錄失敗"
            });
        }
        else
        {
            dynamic ret = Clay.Parse(str);
            if (ret.code != 20000)
            {
                await MessageService.Show(new MessageOption()
                {
                    Color = Color.Danger,
                    Content = ret.message
                });
            }
            else
            {
                await MessageService.Show(new MessageOption()
                {
                    Color = Color.Success,
                    Content = "登錄成功"
                });
                ReturnUrl ??= "/Admin";
                await AjaxService.Goto(ReturnUrl);
            }
        }
    }

這里我們統統使用Message組件來做信息提示。

首先判斷用戶名密碼不為空，這個就不說了。

后面的

var ajaxOption = new AjaxOption
        {
            Url = "/api/Admin/User/Login",
            Data = LoginVo
        };
        var str = await AjaxService.GetMessage(ajaxOption);

即為主要代碼，發送LoginVo到Webapi的Controller。

Controller代碼如下：

        [HttpPost]
        public async Task<object> Login([FromBody]LoginVo loginVo)
        {
            if (loginVo.UserName.IsNullOrEmpty())
            {
                return new { code = 50000, message = "用戶名不能為空" };
            }
            if (loginVo.Password.IsNullOrEmpty())
            {
                return new { code = 50000, message = "密碼不能為空" };
            }

            var entity = _adminUserService.Login(loginVo.UserName, loginVo.Password);
            if (entity != null)
            {
                var identity = new ClaimsIdentity(CookieAuthenticationDefaults.AuthenticationScheme);
                identity.AddClaim(new Claim(ClaimTypes.Name, entity.UserName));
                await Furion.App.HttpContext.SignInAsync(new ClaimsPrincipal(identity), new AuthenticationProperties(){IsPersistent = true, ExpiresUtc = loginVo.RememberMe? DateTimeOffset.Now.AddDays(5): DateTimeOffset.Now.AddMinutes(30)});

                return new { code = 20000, message = "登錄成功" };
            }
            return new { code = 50000, message = "用戶名或密碼錯誤" };
        }

這里也是首先驗證用戶名密碼是否正確，然后調用關鍵語句

                var identity = new ClaimsIdentity(CookieAuthenticationDefaults.AuthenticationScheme);
                identity.AddClaim(new Claim(ClaimTypes.Name, entity.UserName));
                await Furion.App.HttpContext.SignInAsync(new ClaimsPrincipal(identity), new AuthenticationProperties(){IsPersistent = true, ExpiresUtc = loginVo.RememberMe? DateTimeOffset.Now.AddDays(5): DateTimeOffset.Now.AddMinutes(30)});

這里我們使用微軟自帶的Claim的方式來進行身份驗證，這也是BlaozrSrever里最簡單的辦法。

使用HttpContext.SignInAsync即可登錄。

另外的配置

我們需要在Startup中增加身份驗證的配置，這里我們用cookie，在ConfigureServices中添加

            services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie(op =>
            {
                op.LoginPath = "/Admin/Login";
            });

另外需要在Configure中添加

            app.UseAuthentication();
            app.UseAuthorization();

登錄成功后跳轉

由於BlazorServer建立連接后並不會再傳輸cookie，所以我們必須重新刷新一下頁面，重新讓Blazor建立連接，所以Ajax組件特意增加了一個Goto方法從瀏覽器進行跳轉。

await AjaxService.Goto(ReturnUrl);

跳轉后即可正常使用權限系統了。

結束

這樣，我們的登錄就完成了。