Customize site login page in CMS 12 - .net core

We all know that the login page appears whenever user access to a page that requires authorities. An example, user access to his addressbook using his saved link https://localhost:44397/en/my-account/address-book/ . However, by default, the site use CMS login page https://localhost:44397/Util/Login?ReturnUrl=%2Fen%2Fmy-account%2Faddress-book%2F that isn't user friendly for an outside user.

In this post, we take a look at the login page and login url in CMS 12 with .net core implementation.

Before digging into the code to make our customized login page work, we need to prepare:

• Create Login Page type.
• Create Login page view and implement login feature for the site.
• Create a login page on the site.

Our customized login page might looks like

The next step is creating an implementation of IAuthorizationMiddlewareResultHandler and point to our login page:

using EPiServer.Core;
using EPiServer.DataAbstraction;
using System.Threading.Tasks;
using EPiServer.Web.Routing;
using Foundation.Features.Login;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Authorization.Policy;
using Microsoft.AspNetCore.Http;
using System.Linq;

namespace Foundation.Infrastructure.Cms.Users;

public class LoginRedirectAuthorizationMiddlewareResultHandler : IAuthorizationMiddlewareResultHandler
{
    private readonly AuthorizationMiddlewareResultHandler defaultHandler = new();

    private readonly IUrlResolver _urlResolver;
    private readonly IContentTypeRepository _contentTypeRepository;
    private readonly IContentModelUsage _contentModelUsage;

    public LoginRedirectAuthorizationMiddlewareResultHandler(IUrlResolver urlResolver, IContentTypeRepository contentTypeRepository, IContentModelUsage contentModelUsage)
    {
        _urlResolver = urlResolver;
        _contentTypeRepository = contentTypeRepository;
        _contentModelUsage = contentModelUsage;
    }

    public async Task HandleAsync(RequestDelegate next, HttpContext context, AuthorizationPolicy policy, PolicyAuthorizationResult authorizeResult)
    {
        var isEpiserverAdminUrl = context.Request.Path.StartsWithSegments(new PathString("/episerver"));
        if (authorizeResult.Challenged && !isEpiserverAdminUrl)
        {
            var contentType = _contentTypeRepository.Load<LoginPage>();
            var loginPage = _contentModelUsage.ListContentOfContentType(contentType).FirstOrDefault();
            if (loginPage != null)
            {
                var url = _urlResolver.GetUrl(loginPage.ContentLink);
                context.Response.Redirect(url);

                return;
            }
        }

        await defaultHandler.HandleAsync(next, context, policy, authorizeResult);
    }
}

Final step is pointing the IAuthorizationMiddlewareResultHandler to our new middleware, in the Initialize module or in the Startup

context.Services.AddSingleton<IAuthorizationMiddlewareResultHandler, LoginRedirectAuthorizationMiddlewareResultHandler>();

So from now on, whenever users access to the page that requires permission, the customized login page appears and let them login using their account.

You can get those code in the folked Foundation project LoginRedirectAuthorizationMiddlewareResultHandler.cs and Initialize.cs.

Hope this help :)
/Son Do