Blazor入门100天 : 身份验证和授权 (5) - 本地化资源

目录

1. 建立默认带身份验证 Blazor 程序
2. 角色/组件/特性/过程逻辑
3. DB 改 Sqlite
4. 将自定义字段添加到用户表
5. 脚手架拉取IDS文件,本地化资源
6. freesql 生成实体类,freesql 管理ids数据表
7. 初始化 Roles,freesql 外键 => 导航属性
8. 完善 freesql 和 bb 特性

本节源码

https://github.com/densen2014/Blazor100/tree/Blazor-%E6%95%99%E7%A8%8B15-5/b16blazorIDS2

拉取IDS源码到本地

自定义字段

1. 自定义字段参考 https://www.cnblogs.com/densen2014/p/17083937.html
2. 如果没有做上一个步骤,要重新来一遍: 把项目其他的 Identity 也替换为新的 WebAppIdentityUser 类
3. 如果接着教程弄的,就已经生成完整的代码了.

本地化资源

安利一个小工具 https://github.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="name@example.com" />
                    <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;
 }
)

2. Register.cshtml.cs 的 InputModel

修改 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($"无法加载具有 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://github.com/densen2014/Blazor100/tree/Blazor-%E6%95%99%E7%A8%8B15-5/b16blazorIDS2

源代码

https://github.com/densen2014/Blazor100

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

关联项目

FreeSql QQ群：4336577

BA & Blazor QQ群：795206915

Maui Blazor 中文社区 QQ群：645660665

知识共享许可协议

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布，但务必保留文章署名AlexChow，不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 。

转载声明

本文来自博客园，作者：周创琳 AlexChow，转载请注明原文链接.

AlexChow

今日头条 | 博客园 | 知乎 | Gitee | GitHub