How To Customize AspNetCore 3.x Identity Views?

Question

I am working on an AspNetCore 3.1 app using a scaffolded Identity. I managed to use External Identity Providers successfully, I could customize Login.cshtml and Register.cshtml using my own styling, what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is, I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements. Please help and execuse my ignorance about razor pages if it is the reason :) . Thanks!

View I want to Customize:

My Identity Files:

Fei Han Fei Han · Accepted Answer · 2020-09-11T08:27:39

I am aware that aspnet core 3.x identity is not an mvc patterned anymore and that the code is inside all razor pages but I couldn't find any view or action that produce the shown elements.

ASP.NET Core Identity is provided as a Razor Class Library in ASP.NET Core. And applications that include Identity can apply the scaffolder to selectively add the source code contained in the Identity Razor Class Library (RCL).

what I want to do now is changing the pictured page below to fit my styling but I couldn't find where the view is.

To achieve your requirement, you can add and override Account\ExternalLogin, like below.

And the content of ExternalLogin.cshtml would be same as below, you can customize it with your expected style based on your actual requirement.

@page
@model ExternalLoginModel
@{
    ViewData["Title"] = "Register";
}

<h1>@ViewData["Title"]</h1>
<h4>Associate your @Model.LoginProvider account.</h4>
<hr />

<p class="text-info">
    You've successfully authenticated with <strong>@Model.LoginProvider</strong>.
    Please enter an email address for this site below and click the Register button to finish
    logging in.
</p>

<div class="row">
    <div class="col-md-4">
        <form asp-page-handler="Confirmation" asp-route-returnUrl="@Model.ReturnUrl" method="post">
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Input.Email"></label>
                <input asp-for="Input.Email" class="form-control" />
                <span asp-validation-for="Input.Email" class="text-danger"></span>
            </div>
            <button type="submit" class="btn btn-primary">Register</button>
        </form>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

How To Customize AspNetCore 3.x Identity Views?

1 Answers