Piranha CMS with Custom Login

If you want to change the stock login page of Piranha CMS to one of your own, this post might help you.

How to Create a PiranhaCMS website with Custom Login Page

Today we will build a PiranhaCMS website with a custom Login.

What is a CMS? click here
What is Piranha CMS? click here

Why this post? I don't want the stock manager login, I want to use my own Login page (for whatever reason).

If you prefer to watch a video, here is the link instead:

https://www.youtube.com/watch?v=icpZkGBBAP8

Scaffold a new PiranhaCMS razor page

If you haven't already, install the PiranhaCMS project templates by typing the following in the terminal

dotnet new -i Piranha.Templates

Once installed you can now type the next command to scaffold a new piranha cms razor project:

dotnet new piranha.razor -o custom-identity

Open the csproj with Visual Studio and let's dive right in.

Create a Login Screen

Let's run the application and configure it for the first time.

If you go to /manager you will see the stock PiranhaCMS login screen. We will replace this screen with our own.

Create a new Razor page Login.cshtml under Pages folder and past this markup code:

<div class="container mt-5 col-lg-6 col-md-9">

    <form method="post">

        <div class="form-group">
            <label class="col-form-label">Username</label>
            <input class="form-control" type="text" asp-for="Username" autofocus />
        </div>

        <div class="form-group">
            <label class="col-form-label">Password</label>
            <input class="form-control" type="password" asp-for="Password" />
        </div>

        <div>
            <button class="btn btn-primary">Login</button>
        </div>
    </form>
</div>

Then add these two properties in the code behind:

    // Login.cshtml.cs

    [BindProperties]
    public class LoginModel : PageModel
    {
        public string Username { get; set; }
        public string Password { get; set; }
        public void OnGet()
        {
        }
    }

This is what it will hopefully look like:

Startup Changes

We need to modify the startup file a little bit.

First, we need to remove the options.UseIdentityWithSeed inside AddPiranha() block to tell Piranha that we will use our own Identity module.

Next we need to add this block of code to tell ASPNET that we will use the new login screen to authenticate users.

// Startup.cs - ConfigureServices
 services
    .AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(CookieAuthenticationDefaults.AuthenticationScheme,
        options =>
        {
            options.LoginPath = new PathString("/Login");
        });

At this point, when you run the application and navigate to /manager, you will be delighted to find that your new login screen will be shown instead of the stock PiranhaCMS one.

We are almost halfway there.

ISecurity

The Piranha CMS documentation says that the manager interace uses ISecurity service. Lets implement it in SecurityService:

    // SecurityService.cs
    public class SecurityService : ISecurity
    {
        public async Task<bool> SignIn(object context, string username, string password)
        {
            if (username == "demo" && password == "demo")
            {
                var claims = new List<Claim>();
                claims.Add(new Claim(ClaimTypes.Name, username));

                var identity = new ClaimsIdentity(claims, "demo");
                var principal = new ClaimsPrincipal(identity);

                await ((HttpContext) context).SignInAsync(
                    CookieAuthenticationDefaults.AuthenticationScheme,
                    principal);

                return true;
            }

            return false;
        }

        public async Task SignOut(object context)
        {
            await((HttpContext)context).SignOutAsync(
                CookieAuthenticationDefaults.AuthenticationScheme);
        }
    }

Then we need to inject it into our Login page as well as initialize it in our Startup file.

    // Login.cshtml.cs
    private readonly ISecurity security;
    public LoginModel(ISecurity security)
    {
        this.security = security;
    }

    // Startup.cs - ConfigureServices
    services.AddScoped<ISecurity, SecurityService>();

Roles

If you run this right now you'll find that it didn't work like you hoped it would. If you navigate to /manager, and logged in using the new page, you will still be redirected to the old page which is pretty frustrating.

The reason is because we are missing some Pirhana CMS required roles

claims.Add(new Claim("PiranhaAdmin", "PiranhaAdmin"));
claims.Add(new Claim("PiranhaAliases", "PiranhaAliases"));

If you run it right now, you will be able to login to manager screen but with only the Alias page and nothing else.

If you want to have the full access to the Piranha CMS admin pages, you have to add all the Manage Claims specified in their documentation.

That's it. I hope you learned something today. Let me know what you think in the comments section.

Leave a comment

Please note that we won't show your email to others, or use it for sending unwanted emails. We will only use it to render your Gravatar image and to validate you as a real person.

JWInpKHh
JWInpKHh - Monday, November 22, 2021

bBOmXwplJQCUT

tETcxRZYVylbP
tETcxRZYVylbP - Monday, November 22, 2021

BCQcwrDg

zfOBPgeq
zfOBPgeq - Monday, November 8, 2021

QtCZbIXAKgiU

hQclzILbCUJKsd
hQclzILbCUJKsd - Monday, November 8, 2021

TJSaNpzOYtGAj