本節源碼

https://gitee.com/densen2014/Blazor100/tree/Blazor-教程15-5/b16blazorIDS2

拉取IDS源碼到本地

自定義字段

自定義字段參考 https://www.cnblogs.com/densen2014/p/17083937.html
如果沒有做上一個步驟,要重新來一遍: 把項目其他的 Identity 也替換為新的 WebAppIdentityUser 類
如果接着教程弄的,就已經生成完整的代碼了.

本地化資源

安利一個小工具https://git删hub.com/Kerwin1202/VsTranslator

開啟自動翻譯後, 滑鼠停留就自動翻譯, 點選翻譯語句直接替換原字元串,太解放生産力了!

選幾個常用的處理一下

1. 本地化登入頁面

檔案 Areas\Identity\Pages\Account\Login.cshtml

@page
@model LoginModel

@{
    ViewData["Title"] = "登入";
}

<h1>@ViewData["Title"]</h1>
<div class="row">
    <div class="col-md-4">
        <section>
            <form id="account" method="post">
                <h2>使用本地賬号登入.</h2>
                <hr />
                <div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
                <div class="form-floating mb-3">
                    <input asp-for="Input.Email" class="form-control" autocomplete="使用者名" aria-required="true" placeholder="[email protected]" />
                    <label asp-for="Input.Email" class="form-label">Email</label>
                    <span asp-validation-for="Input.Email" class="text-danger"></span>
                </div>
                <div class="form-floating mb-3">
                    <input asp-for="Input.Password" class="form-control" autocomplete="目前密碼" aria-required="true" placeholder="密碼" />
                    <label asp-for="Input.Password" class="form-label">密碼</label>
                    <span asp-validation-for="Input.Password" class="text-danger"></span>
                </div>
                <div class="checkbox mb-3">
                    <label asp-for="Input.RememberMe" class="form-label">
                        <input class="form-check-input" asp-for="Input.RememberMe" />
                        @Html.DisplayNameFor(m => m.Input.RememberMe)
                    </label>
                </div>
                <div>
                    <button id="login-submit" type="submit" class="w-100 btn btn-lg btn-primary">登入</button>
                </div>
                <div>
                    <p>
                        <a id="forgot-password" asp-page="./ForgotPassword">忘記密碼了嗎?</a>
                    </p>
                    <p>
                        <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">注冊為新使用者</a>
                    </p>
                    <p>
                        <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">重新發送電子郵件确認</a>
                    </p>
                </div>
            </form>
        </section>
    </div>
    <div class="col-md-6 col-md-offset-2">
        <section>
            <h3>使用其他服務登入.</h3>
            <hr />
            @{
                if ((Model.ExternalLogins?.Count ?? 0) == 0)
                {
                    <div>
                        <p>
                            沒有配置外部身份驗證服務。檢視連結 <a href="https://go.microsoft.com/fwlink/?LinkID=532715">文章
                            關于設定此 ASP.NET 應用程式以支援通過外部服務登入</a>.
                        </p>
                    </div>
                }
                else
                {
                    <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
                        <div>
                            <p>
                                @foreach (var provider in Model.ExternalLogins!)
                                {
                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="使用您的 @provider.DisplayName 帳戶登入">@provider.DisplayName</button>
                                }
                            </p>
                        </div>
                    </form>
                }
            }
        </section>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

後置代碼Login.cshtml.cs裡面的InputModel也處理一下

public class InputModel
    {
        /// <summary>
        /// 此 API 支援 ASP.NET Core Identity 預設 UI 基礎結構，不打算使用
        /// 直接來自您的代碼。此 API 可能會在未來的版本中更改或删除。
        /// </summary>
        [Required]
        [EmailAddress]
        public string Email { get; set; }

        /// <summary>
        /// 此 API 支援 ASP.NET Core Identity 預設 UI 基礎結構，不打算使用
        /// 直接來自您的代碼。此 API 可能會在未來的版本中更改或删除。
        /// </summary>
        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "密碼")]
        public string Password { get; set; }

        /// <summary>
        /// 此 API 支援 ASP.NET Core Identity 預設 UI 基礎結構，不打算使用
        /// 直接來自您的代碼。此 API 可能會在未來的版本中更改或删除。
        /// </summary>
        [Display(Name = "記住賬号?")]
        public bool RememberMe { get; set; }
    }

運作截圖

2. 本地化注冊頁面

檔案 Areas\Identity\Pages\Account\Register.cshtml

注冊密碼預設長度有兩個地方設定

1.Program.cs 設定

builder.Services.AddDefaultIdentity<WebAppIdentityUser>(o =>
 {   // Password settings.
     o.Password.RequiredLength = 1;
 }
)

修改 StringLength 特性, 順便添加 Display 特性

[Required]
        [StringLength(100, MinimumLength=1, ErrorMessage = "{0} 的長度必須至少為 {2}，最多為 {1} 個字元.")]
        [DataType(DataType.Password)]
        [Display(Name = "密碼")]
        public string Password { get; set; }

運作截圖

3. 本地化資料頁面, 添加全名

檔案 Areas\Identity\Pages\Account\Manage\Index.cshtml

添加代碼

<div class="form-floating mb-3">
  <input asp-for="Input.Name" class="form-control" placeholder="請輸入您的全名." />
  <label asp-for="Input.Name" class="form-label"></label>
  <span asp-validation-for="Input.Name" class="text-danger"></span>
</div>

後置代碼檔案 Index.cshtml.cs

在 public string PhoneNumber { get; set; } 後加入代碼

public class InputModel
    {
        ...
        [Display(Name = "名稱")]
        public string Name { get; set; }
    }

在 LoadAsync() 裡加入 Name 字段相關代碼

private async Task LoadAsync(WebAppIdentityUser user)
    {
        var userName = await _userManager.GetUserNameAsync(user);
        var phoneNumber = await _userManager.GetPhoneNumberAsync(user);
        var name = user.Name;

        Username = userName;

        Input = new InputModel
        {
            PhoneNumber = phoneNumber,
            Name = name
        };
    }

在 OnPostAsync() 裡加入 Name 字段相關代碼

public async Task<IActionResult> OnPostAsync()
    {
        var user = await _userManager.GetUserAsync(User);
        if (user == null)
        {
            return NotFound(#34;無法加載具有 ID 的使用者 '{_userManager.GetUserId(User)}'.");
        }

        if (!ModelState.IsValid)
        {
            await LoadAsync(user);
            return Page();
        }

        var phoneNumber = await _userManager.GetPhoneNumberAsync(user);
        if (Input.PhoneNumber != phoneNumber)
        {
            var setPhoneResult = await _userManager.SetPhoneNumberAsync(user, Input.PhoneNumber);
            if (!setPhoneResult.Succeeded)
            {
                StatusMessage = "嘗試設定電話号碼時出現意外錯誤.";
                return RedirectToPage();
            }
        }

        var name = user.Name;
        if (Input.Name != name)
        {
            user.Name = Input.Name;
            await _userManager.UpdateAsync(user);
        }

        await _signInManager.RefreshSignInAsync(user);
        StatusMessage = "你的個人資料已經更新";
        return RedirectToPage();
    }

運作截圖

本節源碼

https://gitee.com/densen2014/Blazor100/tree/Blazor-教程15-5/b16blazorIDS2

源代碼

https://gitee.com/densen2014/Blazor100 (鏡像/非最新版)

關聯項目

FreeSql

BA & Blazor

知識共享許可協定

本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協定進行許可。歡迎轉載、使用、重新釋出，但務必保留文章署名AlexChow（包含連結： https://github.com/densen2014 ），不得用于商業目的，基于本文修改後的作品務必以相同的許可釋出。如有任何疑問，請與我聯系。

轉載聲明

本文來自部落格園，作者：周創琳 AlexChow，轉載請注明原文連結：https://www.cnblogs.com/densen2014/p/17083938.html

AlexChow

今日頭條 | 部落格園 | 知乎 | Gitee | GitHub

分類: Blazor, BootstrapBlazor

Blazor入門100天 : 身份驗證和授權 (5) - 本地化資源

目錄

本節源碼

拉取IDS源碼到本地

自定義字段

本地化資源

安利一個小工具https://git删hub.com/Kerwin1202/VsTranslator

選幾個常用的處理一下

1. 本地化登入頁面

後置代碼Login.cshtml.cs裡面的InputModel也處理一下

運作截圖

2. 本地化注冊頁面

運作截圖

3. 本地化資料頁面, 添加全名

運作截圖

本節源碼

源代碼

關聯項目

知識共享許可協定

轉載聲明

AlexChow

繼續閱讀

Spring Security 初識（五）--spring security 和jwt整合實作安全的resutful api

sql server2005 隻能通過windows身份驗證通過 sa使用者不可用

net core内置身份驗證功能（未登入自動跳轉到登入頁面）

跟進 .NET 8 Blazor 之 ReuseTabs 支援 Query 屬性綁定

HTTP狀态碼有哪些？HTTP狀态碼是由Web伺服器向用戶端浏覽器傳回的一個三位數字的代碼，用于表示伺服器對請求的處理結

C# Blazor Server 圖形驗證簡單示例

IIS的各種身份驗證詳細測試一、 IIS的身份驗證概述二、匿名通路

asp.net中常用的幾種身份驗證方式

部署以太坊2.0

使用Entity Framework和Web API的ASP.NET Core Blazor CRUD介紹背景使用代碼

Android 9 新特性

WCF安全-令牌服務

WIF, Windows 身份驗證基礎

身份驗證失敗：修複無法連接配接到 WordPress SFTP 伺服器的嚴重錯誤

win 2012 iis 401 - 未授權: 由于憑據無效,通路被拒絕。您無權使用所提供的憑據檢視此目錄或頁面，百度編輯器等圖檔無法顯示

21種Web應用程式中處理密碼的最佳做法