Editar vistas de identity en ASP.NET Core MVC

Editar vistas de inicio de sesión en ASP.NET Core MVC

Cuando desarrollamos una aplicación web con ASP.NET Core MVC, es habitual necesitar un sistema de autenticación para permitir que los usuarios puedan registrarse, iniciar sesión y acceder a zonas privadas de la aplicación.

ASP.NET Core Identity nos facilita mucho este proceso, ya que proporciona una estructura preparada para gestionar usuarios, contraseñas, formularios de login, registro y recuperación de cuenta. Sin embargo, las vistas que se generan por defecto suelen tener un diseño muy básico.

El problema principal es que, aunque el sistema funciona correctamente, la interfaz visual no siempre encaja con el estilo de nuestra aplicación. Por eso, en este tutorial vamos a ver cómo generar las vistas de Identity y personalizar la pantalla de inicio de sesión en un proyecto ASP.NET Core MVC.

Objetivo del tutorial

El objetivo de este tutorial es crear una aplicación MVC, añadir las páginas de Identity mediante scaffolding y modificar la vista de inicio de sesión para adaptarla visualmente.

Al finalizar, tendremos una pantalla de login personalizada, manteniendo la funcionalidad original de ASP.NET Core Identity.

Los puntos principales que vamos a trabajar son:

Crear un proyecto ASP.NET Core MVC.
Añadir Identity al proyecto.
Generar las páginas Login y Register.
Localizar los archivos .cshtml.
Modificar la estructura visual de la página de login.
Añadir estilos CSS personalizados.
Comprobar que el formulario sigue funcionando correctamente.

Requisitos previos

Para seguir este tutorial es recomendable tener instalado:

Visual Studio 2022.
.NET 8.
Conocimientos básicos de ASP.NET Core MVC.
Conocimientos básicos de HTML y CSS.
Un navegador para comprobar el resultado final.

No es necesario crear un sistema de autenticación desde cero, ya que utilizaremos ASP.NET Core Identity para generar la estructura inicial.

Creación del proyecto MVC

El primer paso consiste en abrir Visual Studio y crear un nuevo proyecto.

Seleccionamos la plantilla:

Aplicación web de ASP.NET Core (Modelo-Vista-Controlador)

Después indicamos el nombre del proyecto. En mi caso, el proyecto utilizado para el vídeo se llama:

AplicacionVideoTajamar

En la configuración adicional seleccionamos el framework correspondiente, por ejemplo .NET 8.0, y dejamos el proyecto preparado para ejecutarse con HTTPS.

Una vez creado el proyecto, Visual Studio genera la estructura básica de una aplicación MVC:

Controllers
Models
Views
wwwroot
Program.cs
appsettings.json

En este punto ya tenemos una aplicación MVC funcional, pero todavía no tenemos las vistas de Identity disponibles para modificarlas directamente.

Añadir Identity con scaffolding

ASP.NET Core Identity tiene muchas páginas internas ya preparadas, pero no aparecen como archivos editables desde el primer momento. Para poder modificarlas, necesitamos generarlas mediante scaffolding.

Para hacerlo desde Visual Studio:

Hacemos clic derecho sobre el proyecto.
Seleccionamos Agregar.
Entramos en Nuevo elemento con scaffold.
Elegimos Identity.
Pulsamos en Agregar.
Seleccionamos las páginas que queremos generar.

Para este tutorial nos interesan especialmente:

Account/Login
Account/Register

Una vez completado el proceso, Visual Studio genera una nueva carpeta dentro del proyecto:

Areas/Identity/Pages/Account

Dentro de esa carpeta encontraremos los archivos necesarios para modificar el login y el registro.

Localización de las vistas Login y Register

Los archivos principales que vamos a utilizar son:

Areas/Identity/Pages/Account/Login.cshtml

Areas/Identity/Pages/Account/Login.cshtml.cs

Areas/Identity/Pages/Account/Register.cshtml

Areas/Identity/Pages/Account/Register.cshtml.cs

El archivo Login.cshtml contiene la parte visual de la página de inicio de sesión. Aquí podemos modificar el HTML, las clases CSS y la estructura del formulario.

El archivo Login.cshtml.cs contiene la lógica asociada a la página. En este caso, no necesitamos modificar demasiado esta parte, porque nuestro objetivo principal es personalizar el diseño.

Modificar la vista Login.cshtml

Al editar Login.cshtml, es importante no eliminar elementos esenciales de Razor e Identity.

Por ejemplo, debemos mantener directivas como:

@page
@model LoginModel

También debemos conservar atributos como:

asp-for
asp-validation-for
asp-page
method="post"

Estos atributos permiten que el formulario siga conectado con el modelo de Identity. Si los eliminamos, el diseño podría verse bien, pero el login dejaría de funcionar correctamente.

Una estructura personalizada para la vista de login podría incluir:

Una sección principal centrada.
Una tarjeta para el formulario.
Un título de bienvenida.
Campos para correo electrónico y contraseña.
Opción de recordar usuario.
Enlace para recuperar contraseña.
Botón de inicio de sesión.
Enlace para crear una nueva cuenta.

Ejemplo de estructura:

<section class="login-page">
    <div class="login-card">
        <div class="login-header">
            <h1>Bienvenido de nuevo</h1>
            <p>Inicia sesión para continuar en la aplicación.</p>
        </div>

        <form id="account" method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>

            <input asp-for="Input.Email"
                   class="form-control"
                   placeholder="Correo electrónico" />

            <span asp-validation-for="Input.Email" class="text-danger"></span>

            <input asp-for="Input.Password"
                   class="form-control"
                   placeholder="Contraseña" />

            <span asp-validation-for="Input.Password" class="text-danger"></span>

            <label>
                <input asp-for="Input.RememberMe" />
                Recordarme
            </label>

            <button type="submit" class="btn-login">
                Entrar
            </button>

            <a asp-page="./Register">Crear una cuenta nueva</a>
        </form>
    </div>
</section>

Añadir estilos CSS personalizados

Después de modificar la estructura HTML, añadimos estilos en el archivo:

wwwroot/css/site.css

También podríamos crear un archivo CSS específico para el login, pero para este ejemplo podemos usar site.css.

Ejemplo de estilos:

.login-page {
    min-height: calc(100vh - 120px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 1rem;
    background: linear-gradient(135deg, #4f46e5, #312e81);
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
    border-radius: 20px;
    background-color: white;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h1 {
    font-size: 1.8rem;
    font-weight: bold;
}

.login-header p {
    color: #6b7280;
}

.btn-login {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: bold;
    background: linear-gradient(135deg, #6366f1, #4338ca);
}

Con estos estilos conseguimos una pantalla de login más moderna, centrada y visualmente más atractiva.

Comprobación del resultado

Una vez guardados los cambios, ejecutamos la aplicación desde Visual Studio.

Después accedemos a la ruta de login:

/Identity/Account/Login

En este punto debemos comprobar que:

La página carga correctamente.
El diseño se muestra con los nuevos estilos.
El formulario mantiene los campos de email y contraseña.
El botón de login sigue enviando el formulario.
Las validaciones siguen funcionando.
Los enlaces de registro y recuperación de contraseña siguen activos.

Es importante comprobar tanto la parte visual como la funcionalidad. No sirve de nada tener una pantalla bonita si el formulario deja de funcionar.

Problemas encontrados

Uno de los problemas más habituales es no encontrar las páginas de Identity dentro del proyecto. Esto ocurre porque, por defecto, muchas de estas páginas no aparecen como archivos físicos hasta que las generamos mediante scaffolding.

Otro problema frecuente es eliminar atributos de Razor sin darse cuenta. Por ejemplo, si quitamos asp-for o asp-validation-for, los campos dejan de estar correctamente vinculados al modelo.

También puede ocurrir que los estilos CSS no se apliquen. En ese caso, conviene revisar:

Que el archivo CSS esté en la ruta correcta.
Que el navegador no esté usando una versión antigua en caché.
Que las clases CSS coincidan con las utilizadas en el HTML.
Que el archivo CSS esté cargado desde el layout principal.

Recomendaciones

Mi recomendación es hacer los cambios de forma progresiva.

Primero debemos comprobar que Identity funciona correctamente con las vistas generadas. Después podemos modificar la estructura visual poco a poco. Así, si aparece un error, será mucho más fácil detectar qué cambio lo ha provocado.

También recomiendo mantener una estructura clara en el CSS, usando nombres de clases descriptivos. Esto facilita el mantenimiento del proyecto y permite reutilizar estilos en otras páginas, como registro o recuperación de contraseña.

Como mejora futura, se podría aplicar el mismo diseño a todas las páginas relacionadas con la autenticación para que la aplicación tenga una apariencia coherente.

Conclusión

Personalizar las vistas de inicio de sesión en ASP.NET Core MVC es un proceso muy útil cuando queremos que nuestra aplicación tenga una identidad visual propia.

ASP.NET Core Identity nos proporciona la funcionalidad base, mientras que el scaffolding nos permite acceder a las páginas necesarias para modificarlas. A partir de ahí, podemos adaptar el HTML y el CSS sin perder la lógica de autenticación.

El punto más importante es respetar los elementos propios de Razor e Identity para que el formulario siga funcionando correctamente.

De esta forma conseguimos una pantalla de login personalizada, más profesional y adaptada al diseño de nuestra aplicación.

Autor/a: Jorge Salas Rodríguez
Máster: Desarrollo Full Stack + Arquitecturas Cloud
Centro: Tajamar Tech
Año académico: 2025-2026
Vídeo: 2026-06-16 01-27-55.mp4