如何为MVC / Razor页面应用程序自定义登录页面

当你使用应用程序启动模板创建了一个新的应用程序, 登录页面的源代码并不在你的解决方案中,所以你不能直接更改. 它来自账户模块,使用NuGet包引用.

本文介绍了如何为自己的应用程序自定义登录页面.

创建登录 PageModel

创建一个新的类继承账户模块的LoginModel.

  1. public class CustomLoginModel : LoginModel
  2. {
  3.     public CustomLoginModel(
  4.     Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider schemeProvider,
  5.     Microsoft.Extensions.Options.IOptions<Volo.Abp.Account.Web.AbpAccountOptions> accountOptions)
  6.         : base(schemeProvider, accountOptions)
  7.         {
  8.         }
  9. }

在这里命令约定很重要. 如果你的类名不是以 LoginModel 结束,你需要手动在依赖注入系统替换 LoginModel.

然后你可以覆盖任何方法并添加用户界面需要的新方法和属性.

重写登录页面UI

在 Pages 目录下创建名为 Account 的文件夹,并在这个文件夹中创建 Login.cshtml , 它会自动覆盖账户模块的页面文件.

自定义页面一个很好的开始是复制它的源代码. 点击这里找到登录页面的源码. 在编写本文档时,源代码如下:

  1. @page
  2. @using Volo.Abp.Account.Settings
  3. @using Volo.Abp.Settings
  4. @model Acme.BookStore.Web.Pages.Account.CustomLoginModel
  5. @inject Volo.Abp.Settings.ISettingProvider SettingProvider
  6. @if (Model.EnableLocalLogin)
  7. {
  8.     <div class="card mt-3 shadow-sm rounded">
  9.         <div class="card-body p-5">
  10.             <h4>@L["Login"]</h4>
  11.             @if (await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled))
  12.             {
  13.                 <strong>
  14.                     @L["AreYouANewUser"]
  15.                     [@L["Register"]](/zh-Hans/abp/latest/How-To/@Url.Page()
  16.                 </strong>
  17.             }
  18.             <form method="post" class="mt-4">
  19.                 <input asp-for="ReturnUrl" />
  20.                 <input asp-for="ReturnUrlHash" />
  21.                 <div class="form-group">
  22.                     <label asp-for="LoginInput.UserNameOrEmailAddress"></label>
  23.                     <input asp-for="LoginInput.UserNameOrEmailAddress" class="form-control" />
  24.                     <span asp-validation-for="LoginInput.UserNameOrEmailAddress" class="text-danger"></span>
  25.                 </div>
  26.                 <div class="form-group">
  27.                     <label asp-for="LoginInput.Password"></label>
  28.                     <input asp-for="LoginInput.Password" class="form-control" />
  29.                     <span asp-validation-for="LoginInput.Password" class="text-danger"></span>
  30.                 </div>
  31.                 <div class="form-check">
  32.                     <label asp-for="LoginInput.RememberMe" class="form-check-label">
  33.                         <input asp-for="LoginInput.RememberMe" class="form-check-input" />
  34.                         @Html.DisplayNameFor(m => m.LoginInput.RememberMe)
  35.                     </label>
  36.                 </div>
  37.                 <abp-button type="submit" button-type="Primary" name="Action" value="Login" class="btn-block btn-lg mt-3">@L["Login"]</abp-button>
  38.             </form>
  39.         </div>
  41.         <div class="card-footer text-center border-0">
  42.             <abp-button type="button" button-type="Link" name="Action" value="Cancel" class="px-2 py-0">@L["Cancel"]</abp-button> @* TODO: Only show if identity server is used *@
  43.         </div>
  44.     </div>
  45. }
  47. @if (Model.VisibleExternalProviders.Any())
  48. {
  49.     <div class="col-md-6">
  50.         <h4>@L["UseAnotherServiceToLogIn"]</h4>
  51.         <form asp-page="./Login" asp-page-handler="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" asp-route-returnUrlHash="@Model.ReturnUrlHash" method="post">
  52.             <input asp-for="ReturnUrl" />
  53.             <input asp-for="ReturnUrlHash" />
  54.             @foreach (var provider in Model.VisibleExternalProviders)
  55.             {
  56.                 <button type="submit" class="btn btn-primary" name="provider" value="@provider.AuthenticationScheme" title="@L["GivenTenantIsNotAvailable", provider.DisplayName]">@provider.DisplayName</button>
  57.             }
  58.         </form>
  59.     </div>
  60. }
  62. @if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
  63. {
  64.     <div class="alert alert-warning">
  65.         <strong>@L["InvalidLoginRequest"]</strong>
  66.         @L["ThereAreNoLoginSchemesConfiguredForThisClient"]
  67.     </div>
  68. }

只需更改 @model 为 Acme.BookStore.Web.Pages.Account.CustomLoginModel 使用自定义的 PageModel 类. 你可以做任何应用程序需要的更改.

本文的源代码

你可以在这里找到已完成的示例源码.

另请参阅