diff --git a/docs/en/Blog-Posts/2020-04-03/Post.md b/docs/en/Blog-Posts/2020-04-03/Post.md new file mode 100644 index 0000000000..3ac5d212c2 --- /dev/null +++ b/docs/en/Blog-Posts/2020-04-03/Post.md @@ -0,0 +1,122 @@ +# Custom Login PageModel in **ABP** ASP.NET Core MVC application + +ABP Framework uses Microsoft Identity underneath hence supports customization as much as Microsoft Identity does. + +### Creating Login PageModel + +To create your own custom Login PageModel, you need to inherit [Abp LoginModel](https://github.com/abpframework/abp/blob/037ef9abe024c03c1f89ab6c933710bcfe3f5c93/modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml.cs). + +````xml +public class CustomLoginModel : LoginModel +{ + public CustomLoginModel( + Microsoft.AspNetCore.Authentication.IAuthenticationSchemeProvider schemeProvider, + Microsoft.Extensions.Options.IOptions accountOptions) + : base(schemeProvider, accountOptions) + { + } +} +```` + +### Overriding Methods + +Afterwards you can override a method like `CreateExternalUserAsync`: + +````xml +protected override async Task CreateExternalUserAsync(ExternalLoginInfo info) +{ + var emailAddress = info.Principal.FindFirstValue(AbpClaimTypes.Email); + + var user = new IdentityUser(GuidGenerator.Create(), emailAddress, emailAddress, CurrentTenant.Id); + + CheckIdentityErrors(await UserManager.CreateAsync(user)); + CheckIdentityErrors(await UserManager.SetEmailAsync(user, emailAddress)); + CheckIdentityErrors(await UserManager.AddLoginAsync(user, info)); + + return user; +} +```` + +### Overriding Login Page UI + +Overriding `.cshtml` files can be easily done via [Virtual File System](https://docs.abp.io/en/abp/latest/Virtual-File-System). Create folder named **Account** under **Pages** directory. Create **Login.cshtml** under Pages/Account directory. + +Set the model with your newly created Login Page Model and customize to your preferences like: + +````xml +@page +@using Volo.Abp.Account.Settings +@using Volo.Abp.Settings +@model Acme.BookStore.Web.CustomLoginModel +@inherits Volo.Abp.Account.Web.Pages.Account.AccountPage +@inject Volo.Abp.Settings.ISettingProvider SettingProvider + +
+

My Customized Login Page!

+
+@if (Model.EnableLocalLogin) +{ +
+
+

@L["Login"]

+ @if (await SettingProvider.IsTrueAsync(AccountSettingNames.IsSelfRegistrationEnabled)) + { + + @L["AreYouANewUser"] + @L["Register"] + + } +
+ + +
+ + + +
+
+ + + +
+
+ +
+ @L["Login"] +
+
+ + +
+} + +@if (Model.VisibleExternalProviders.Any()) +{ +
+

@L["UseAnotherServiceToLogIn"]

+
+ + + @foreach (var provider in Model.VisibleExternalProviders) + { + + } +
+
+} + +@if (!Model.EnableLocalLogin && !Model.VisibleExternalProviders.Any()) +{ +
+ @L["InvalidLoginRequest"] + @L["ThereAreNoLoginSchemesConfiguredForThisClient"] +
+} +```` + +Further readings, [ASP.NET Core (MVC / Razor Pages) User Interface Customization Guide](https://docs.abp.io/en/abp/latest/UI/AspNetCore/Customization-User-Interface#asp-net-core-mvc-razor-pages-user-interface-customization-guide). \ No newline at end of file