ABP 如何为MVC / Razor页面应用程序自定义登录页面（干货）

使用应用程序启动模板创建新应用程序时，登录页面的源代码将不在您的解决方案内部，因此您无法直接对其进行更改。登录页面来自使用NuGet软件包参考的帐户模块。

本文档说明了如何为您自己的应用程序自定义登录页面。

创建一个新类，该类继承自Account模块的LoginModel。

public class CustomLoginModel : LoginModel
{
    public CustomLoginModel(
    Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider schemeProvider,
    Microsoft.Extensions.Options.IOptions<Volo.Abp.Account.Web.AbpAccountOptions> accountOptions)
        : base(schemeProvider, accountOptions)
        {
        }
}

命名约定在这里很重要。如果您的类名不以结尾LoginModel，则需要LoginModel使用依赖项注入系统手动替换。

然后，您可以覆盖所需的任何方法，并添加UI所需的新方法和属性。

override OnPostAsync方法，详情见：https://github.com/abpframework/abp/blob/dev/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml.cs

在Pages目录下创建一个名为Account的文件夹，并在此文件夹下创建一个Login.cshtml。它将自动覆盖“帐户模块”中定义的文件。Login.cshtml

定制页面的一种好方法是复制其源代码。单击此处获取登录页面的源代码。在编写本文档时，源代码如下：

@page
@using Volo.Abp.Account.Settings
@using Volo.Abp.Settings
@using Volo.Abp.Account.Localization
@model AuthServer.Host.Pages.CustomLoginModel
@inject Volo.Abp.Settings.ISettingProvider SettingProvider
@inject Microsoft.AspNetCore.Mvc.Localization.IHtmlLocalizer<AccountResource > L


@if (Model.EnableLocalLogin)
{
    <div class="card mt-3 shadow-sm rounded">
        <div class="card-body p-5">
            <h4>@L["Login"]</h4>
            @if (await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled))
            {
                <strong>
                    @L["AreYouANewUser"]
                    <a href="@Url.Page("./Register", new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})" class="text-decoration-none">@L["Register"]</a>
                </strong>
            }
            <form method="post" class="mt-4">
                <input asp-for="ReturnUrl" />
                <input asp-for="ReturnUrlHash" />
                <div class="form-group">
                    <label asp-for="LoginInput.UserNameOrEmailAddress"></label>
                    <input asp-for="LoginInput.UserNameOrEmailAddress" class="form-control" />
                    <span asp-validation-for="LoginInput.UserNameOrEmailAddress" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="LoginInput.Password"></label>
          <input asp-for="LoginInput.Password" class="form-control" /><span asp-validation-for="LoginInput.Password" class="text-danger"></span></div><div class="form-check"><label asp-for="LoginInput.RememberMe" class="form-check-label"><input asp-for="LoginInput.RememberMe" class="form-check-input" /> @Html.DisplayNameFor(m => m.LoginInput.RememberMe)</label></div><abp-button type="submit" button-type="Primary" name="Action" value="Login" class="btn-block btn-lg mt-3">@L["Login"]</abp-button></form></div><div class="card-footer text-center border-0"><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 *@</div></div>
}
@if (Model.VisibleExternalProviders.Any())
{<div class="col-md-6"><h4>@L["UseAnotherServiceToLogIn"]</h4><form asp-page="./Login" asp-page-handler="ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" asp-route-returnUrlHash="@Model.ReturnUrlHash" method="post"><input asp-for="ReturnUrl" /><input asp-for="ReturnUrlHash" /> @foreach (var provider in Model.VisibleExternalProviders) { <button type="submit" class="btn btn-primary" name="provider" "value="@provider.AuthenticationScheme title="@L["GivenTenantIsNotAvailable",provider.DisplayName]">@provider.DisplayName</button> }</form></div>
}
@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any())
{<div class="alert alert-warning"><strong>@L["InvalidLoginRequest"]</strong> @L["ThereAreNoLoginSchemesConfiguredForThisClient"]</div>
}