新文章 网摘 文章 随笔 日记

如何自定义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 ("./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", 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" " title="@L["GivenTenantIsNotAvailable",</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项目以运行该应用程序

等等!这就是结果。

Blazor启动并通过自定义登录页面运行

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

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

在GitHub上获取源代码

尽情享受吧!

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

posted @ 2021-03-30 16:21  岭南春  阅读(1291)  评论(0编辑  收藏  举报