如何自定义ABP Blazor应用程序的登录页面

介绍

在本文中，我将向您展示如何自定义Blazor APB应用程序的登录页面。

该示例应用程序已使用Blazor作为UI框架并且使用SQL Server作为数据库提供程序进行了开发。

源代码

完整的应用程序的源代码可在GitHub上找到。

要求

需要以下工具才能运行解决方案。

• .NET 5.0 SDK
• VsCode，Visual Studio 2019 16.8.0+或其他兼容的IDE

发展

创建一个新的应用程序

• 安装或更新ABP CLI：

dotnet tool install -g Volo.Abp.Cli || dotnet tool update -g Volo.Abp.Cli

重击

复制

• 使用以下ABP CLI命令创建新的Blazor ABP应用程序：

abp new AbpBlazorCustomizeLoginPage -u blazor

重击

复制

打开并运行应用程序

• 在Visual Studio（或您喜欢的IDE）中打开解决方案。
• 运行AbpBlazorCustomizeLoginPage.DbMigrator应用程序以应用迁移并播种初始数据。
• 运行该AbpBlazorCustomizeLoginPage.HttpApi.Host应用程序以启动服务器端。
• 运行该AbpBlazorCustomizeLoginPage.Blazor应用程序以启动Blazor UI项目。

创建一个CustomLoginModel

• 在应用程序的HttpApi.Host项目中创建一个文件夹结构Pages / Account。
• 将CustomLoginModel.cs类添加到Account文件夹中。

using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Identity;
using Microsoft.Extensions.Options;
using Volo.Abp.Account.Web;
using Volo.Abp.Account.Web.Pages.Account;

namespace AbpBlazorCustomizeLoginPage.HttpApi.Host.Pages.Account
{
  public class CustomLoginModel : LoginModel
  {
    public CustomLoginModel(IAuthenticationSchemeProvider schemeProvider, IOptions<AbpAccountOptions> accountOptions, IOptions<IdentityOptions> identityOptions)
        : base(schemeProvider, accountOptions, identityOptions) { }
  }
}

C＃

复制

• 将Login.cshtml文件添加到Account文件夹。

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
@addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling

@using Microsoft.AspNetCore.Mvc.Localization
@using Volo.Abp.Account.Localization
@using Volo.Abp.Account.Settings
@using Volo.Abp.Settings

@model AbpBlazorCustomizeLoginPage.HttpApi.Host.Pages.Account.CustomLoginModel

@inject IHtmlLocalizer<AccountResource> L
@inject Volo.Abp.Settings.ISettingProvider SettingProvider

<div class="card text-center mt-3 shadow-sm rounded">
    <div class="card-body abp-background p-5">
        <img class="mb-4" src="~/assets/images/abp-logo-light.svg" alt="ABP logo" width="115" height="55">
        <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>
        }
        @if (Model.EnableLocalLogin)
        {
            <form method="post" class="mt-4 text-left">
                <input asp-for="ReturnUrl" />
                <input asp-for="ReturnUrlHash" />
                <div class="form-group">
                    @*<label asp-for="LoginInput.UserNameOrEmailAddress"></label>*@
                    <label>Username</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><abp-row><abp-column><abp-input asp-for="LoginInput.RememberMe" class="mb-4" /></abp-column><abp-column class="text-right"> <a ("./ForgotPassword",href="@Url.Page new {returnUrl = Model.ReturnUrl, returnUrlHash = Model.ReturnUrlHash})">@L["ForgotPassword"]</a></abp-column></abp-row><abp-button type="submit" button-type="Primary" name="Action" value="Login" class="btn-block btn-lg mt-3">@L["Login"]</abp-button> @if (Model.ShowCancelButton) {<abp-button type="submit" button-type="Secondary" formnovalidate="formnovalidate" name="Action" value="Cancel" class="btn-block btn-lg mt-3">@L["Cancel"]</abp-button> }</form> } @if (Model.VisibleExternalProviders.Any()) {<div class="mt-2"><h5>@L["OrLoginWith"]</h5><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 m-1" 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> }</div></div>

的HTML

复制

向HttpApi.Host项目添加一些自定义样式和图像

• 将文件login.css添加到HttpApi.Host项目的wwwroot文件夹中。

.abp-background {
    background-color:  #e90052 !important;
}

的CSS

复制

• 打开文件AbpBlazorCustomizeLoginPageHttpApiHostModule.cs并更新ConfigureBundles（）方法。

private void ConfigureBundles()
   {
     Configure<AbpBundlingOptions>(options =>
     {
       options.StyleBundles.Configure(
                 BasicThemeBundles.Styles.Global,
                 bundle =>
             {
               bundle.AddFiles("/global-styles.css");
               bundle.AddFiles("/login.css");
             }
             );
     });
   }

C＃

复制

• 将资产/图像文件夹添加到HttpApi.Host项目的wwwroot文件夹，然后将abp徽标复制/粘贴到图像文件夹中。您可以在此处找到徽标的副本。

启动Blazor和HttpApi.Host项目以运行该应用程序

等等！这就是结果。

现在，您可以修改登录页面，添加自定义样式或自定义图像等。

在此处查找有关ASP.NET Core（MVC / Razor页面）用户界面自定义指南的更多信息。

在GitHub上获取源代码。

尽情享受吧！

https://community.abp.io/articles/how-to-customize-the-login-page-of-an-abp-blazor-application-by4o9yms