0

Buen día.

Tengo una aplicación WEB desarrollada en Razor con C#. Todo venía funcionando bien hasta que decidí agregar la foto del usuario en la parte donde se indica el usuario que está autenticado actualmente.

Agregué la propiedad Foto a la clase Usuario y modifiqué el Procedimiento Almacenado en SQL que recupera la información del usuario para agregar la columna Foto.

Agregué el código para mostrar la foto recién agregada en la parte superior derecha donde va la información del usuario autenticado y, a partir de ahí, algo se rompió. Ahora, cada vez que inicio el programa, se muestra una página en blanco (Que se ve negro por la personalización con CSS que si logra cargar)

Sé que es un poco complicado que me digan dónde está el error, pero si tan sólo me ayuden a ver cómo puedo por lo menos hacer el rastreo de lo que se alcanza a ejecutar, o ver algún error que no estoy alcanzando a ver, estaría genial. La clase Program.cs se ejecuta correctamente hasta la línea app.Run() sin dar ningún error, a partir de ahí, no se ejecuta nada más.

Así es como se ve Página en blanco

Éste es el código que tengo actualmente.

Clase: Program.cs

using Microsoft.AspNetCore.Authentication.Cookies;

WebApplicationBuilder builder = WebApplication.CreateBuilder();

// Add services to the container.
builder.Services.AddControllersWithViews();

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(
        option => {
            option.LoginPath = "/Acceso/Index";
            option.ExpireTimeSpan = TimeSpan.FromMinutes(300);
            option.AccessDeniedPath = "/Acceso/Index";
        }
    );

WebApplication app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment()) {
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthentication();
app.UseAuthorization();

#if DEBUG
app.UseDeveloperExceptionPage();
#endif

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Acceso}/{action=Index}/{id?}");

app.Run();

Clase: TbUsuarios

using System.ComponentModel.DataAnnotations;
using System.Security.Claims;

namespace Equipos.Models {

    public class TbUsuarios {

        public TbUsuarios() { }

        [Required(ErrorMessage = "Usuario no valido")]
        public int IdEmpleado { get; set; }
        public string? Nombre { get; set; }

        [EmailAddress(ErrorMessage = "El correo es invalido")]
        public string? Correo { get; set; }

        [Required(ErrorMessage = "La contraseña es invalida")]
        public string? Contrasena { get; set; }

        [Required]
        public string? TipoDeUsuario { get; set; }

        public string? Foto { get; set; } //Se agrega la propiedad Foto

        public string IdConNombre => $"{IdEmpleado} - {Nombre}";

    }

}

Clase: TbUsuariosRepository

using Equipos.Models;
using Microsoft.Data.SqlClient;
using System.Data;
using System.Security.Claims;

namespace Equipos.AccessLayer {

    public class TbUsuariosRepository {

        public static async Task<List<TbUsuarios>> FnGetAsync() {

            using SqlConnection oSqlCn = DatabaseConection.Conexion();

            SqlCommand oCmd = new("SpEquiposUsuarioObtener", oSqlCn) {
                CommandType = CommandType.StoredProcedure
            };

            SqlDataAdapter oAdapter = new(oCmd);
            DataTable oDt = new();

            await oSqlCn.OpenAsync();
            await Task.Factory.StartNew(() => oAdapter.Fill(oDt));
            await oSqlCn.CloseAsync();

            return new(
                from oDr in oDt.AsEnumerable()
                select new TbUsuarios {
                    IdEmpleado = Convert.ToInt32(oDr["IdEmpleado"]),
                    Nombre = Convert.ToString(oDr["Nombre"]),
                    Correo = Convert.ToString(oDr["Correo"]),
                    Contrasena = Convert.ToString(oDr["Contrasena"]),
                    TipoDeUsuario = Convert.ToString(oDr["TipoDeUsuario"]),
                    Foto = oDr["Foto"] == DBNull.Value || oDr["Foto"] == null ? "" : Convert.ToBase64String((byte[])oDr["Foto"]) //Se agrega la recuperación de la colúmna Foto
                }
            );

        }

        public static async Task<bool> FnInsertAsync(TbUsuarios pUsuario) {

            using SqlConnection oSqlCn = DatabaseConection.Conexion();

            SqlCommand cmd = new("SpEquiposUsuarioInsertar", oSqlCn) {
                CommandType = CommandType.StoredProcedure
            };

            cmd.Parameters.AddWithValue("@IdEmpleado", pUsuario.IdEmpleado);
            cmd.Parameters.AddWithValue("@Nombres", pUsuario.Nombre);
            cmd.Parameters.AddWithValue("@Correo", pUsuario.Correo!.ToLower());
            cmd.Parameters.AddWithValue("@Contrasena", pUsuario.Contrasena);
            cmd.Parameters.AddWithValue("@TipoDeUsuario", pUsuario.TipoDeUsuario);

            await oSqlCn.OpenAsync();
            int i = await cmd.ExecuteNonQueryAsync();
            await oSqlCn.CloseAsync();

            return i >= 1;

        }

        public static async Task<bool> FnUpdateAsync (TbUsuarios pUsuario) {

            using SqlConnection oSqlCn = DatabaseConection.Conexion();

            SqlCommand cmd = new("SpEquiposUsuarioEditar", oSqlCn) {
                CommandType = CommandType.StoredProcedure
            };

            cmd.Parameters.AddWithValue("@IdEmpleado", pUsuario.IdEmpleado);
            cmd.Parameters.AddWithValue("@Correo", pUsuario.Correo);
            cmd.Parameters.AddWithValue("@TipoDeUsuario", pUsuario.TipoDeUsuario);

            await oSqlCn.OpenAsync();
            int i = await cmd.ExecuteNonQueryAsync();
            await oSqlCn.CloseAsync();

            return i >= 1;

        }

        public static async Task<bool> FnEditPasswordAsync(TbUsuarios pUsuario) {

            using SqlConnection oSqlCn = DatabaseConection.Conexion();

            SqlCommand cmd = new("SpEquiposUsuarioEditarContrasena", oSqlCn) {
                CommandType = CommandType.StoredProcedure
            };

            cmd.Parameters.AddWithValue("@IdEmpleado", pUsuario.IdEmpleado);
            cmd.Parameters.AddWithValue("@Contrasena", pUsuario.Contrasena);

            await oSqlCn.OpenAsync();
            int i = await cmd.ExecuteNonQueryAsync();
            await oSqlCn.OpenAsync();

            return i >= 1;

        }

        public static async Task<bool> FnDeleteAsync(TbUsuarios pUsuario) {

            using SqlConnection oSqlCn = DatabaseConection.Conexion();

            SqlCommand cmd = new("SpEquiposUsuarioEliminar", oSqlCn) {
                CommandType = CommandType.StoredProcedure
            };

            cmd.Parameters.AddWithValue("@IdEmpleado", pUsuario.IdEmpleado);

            await oSqlCn.OpenAsync();
            int i = await cmd.ExecuteNonQueryAsync();
            await oSqlCn.OpenAsync();

            return i >= 1;

        }

        public static async Task<TbUsuarios?> FnValidarAsync(TbUsuarios pUsuario) {

            if (pUsuario == null) throw new Exception("No se ha cargado al Usuario");

            if (pUsuario.Correo == null) throw new Exception("Debe especificar un correo electrónico.");

            if (pUsuario.Contrasena == null) throw new Exception("Debe especificar una contraseña.");

            return (await FnGetAsync()).Where(U => U.Correo!.ToLower() == pUsuario.Correo!.ToLower() && U.Contrasena == pUsuario.Contrasena).FirstOrDefault();

        }

        /// <summary>
        /// Czrga los usuarios desde el Claim de la sesion.
        /// </summary>
        /// <param name="pClaims"></param>
        /// <param name="pUsuario"></param>
        /// <returns></returns>
        public static TbUsuarios? FnGetFromContext(HttpContext pContext) {

            TbUsuarios oUsuario;

            if (pContext == null) return null;
            else {
                IEnumerable<Claim>? oClaims = pContext.User.Claims;

                if (oClaims == null || !oClaims.Any()) {
                    return null;
                }
                else {
                    string? StrValue;

                    StrValue = oClaims.FirstOrDefault(C => C.Type.Equals(ClaimTypes.UserData))!.Value;
                    if (StrValue == null) {
                        return null;
                    }
                    else {
                        if (!int.TryParse(StrValue, out int pIntIdEmpleado)) {
                            return null;
                        }
                        else {
                            oUsuario = new() {
                                IdEmpleado = pIntIdEmpleado,
                                Nombre = oClaims.FirstOrDefault(C => C.Type.Equals(ClaimTypes.Name))!.Value,
                                Correo = oClaims.FirstOrDefault(C => C.Type.Equals(ClaimTypes.Email))!.Value,
                                TipoDeUsuario = oClaims.FirstOrDefault(C => C.Type.Equals(ClaimTypes.Role))!.Value,
                                Foto = oClaims.FirstOrDefault(C => C.Type.Equals(ClaimTypes.Thumbprint))!.Value //La foto se almacena en Claims también
                            };
                            return oUsuario;
                        }
                    }
                }
            }

        }

    }

}

Controlador: AccesoController

using Equipos.AccessLayer;
using Equipos.Models;
using Microsoft.AspNetCore.Authentication;
using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Mvc;
using System.Security.Claims;

namespace Equipos.Controllers {

    [Controller]
    public class AccesoController : Controller {

        [HttpGet, Route("Acceso/Index")]
        public IActionResult Index() => View();

        [HttpPost]
        public async Task<IActionResult> IndexAsync(TbUsuarios usuario) {

            TbUsuarios? oUser = await TbUsuariosRepository.FnValidarAsync(usuario);

            if (oUser != null) {
                var claims = new List<Claim>() {
                    new(ClaimTypes.Name, oUser.Nombre!),
                    new(ClaimTypes.Email, oUser.Correo!),
                    new(ClaimTypes.Role, oUser.TipoDeUsuario!),
                    new(ClaimTypes.UserData, oUser.IdEmpleado.ToString()),
                    new(ClaimTypes.Thumbprint, oUser.Foto) //Se agregó la foto del usuario a la Clase usuario. Éste dato se agrega al CLAIM
                };

                var claimsIdentity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);

                await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(claimsIdentity));

                if (oUser.TipoDeUsuario == "ADMIN") return RedirectToAction("Index", "Home");
                else return RedirectToAction("AsignacionesLectura", "Home");

            }
            else return View();

        }

        public async Task<IActionResult> Salir() {

            await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
            return RedirectToAction("Index", "Acceso");

        }

    }

}

View: _Layout.cshtml

@using System.Security.Claims

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Equipos</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Equipos.styles.css" asp-append-version="true" />
</head>
<body>
    <header>

        <nav class="navbar navbar-expand-sm navbar-toggleable-sm bg-blue navbar-dark border-bottom box-shadow">

            <div class="container">

                <div class="navbar-brand-box">
                    <span class="logo-lg lh-1">
                        <img src="~/img/logo-cuadrado-amm.png" alt="" height="40">
                        <span class="text-white font-size-14 ms-2 align-middle">AAM | Equipos</span>
                    </span>
                </div>

                <div class="dropdown d-inline-block">
                    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="data:image/png;base64,@User.Claims.FirstOrDefault(C => C.Type == ClaimTypes.Thumbprint)" alt="Header Avatar" height="30" class="rounded-circle header-profile-user" />
                        <span class="d-none d-sm-inline-block ms-1 text-light align-middle">@User.Claims.FirstOrDefault(c => c.Type == ClaimTypes.Email)?.Value</span>
                    </button>

                    <div class="dropdown-menu w-100">
                        <a class="dropdown-item btn text-black" data-bs-toggle="modal" data-bs-target="#cambiarContra">
                            <span class="">Cambiar contraseña</span>
                        </a>
                        <a class="dropdown-item btn" asp-controller="Acceso" asp-action="Index">
                            <span class="">Cerrar sesión</span>
                        </a>
                    </div>
                </div>

            </div>
        </nav>

        @if(User.IsInRole("ADMIN")) {

        <div class="d-block bg-white mb-3 box-shadow">
            <div class="container d-flex justify-content-between" style="box-sizing: border-box">
                <div>
                    <a class="text-decoration-none d-inline-block p-3 text-black text-opacity-75 border-3 border-bottom border-white" asp-controller="Home" asp-action="Index" id="listaAsig">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark-plus" viewBox="0 0 16 16">
                            <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z" />
                            <path d="M8 4a.5.5 0 0 1 .5.5V6H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V7H6a.5.5 0 0 1 0-1h1.5V4.5A.5.5 0 0 1 8 4" />
                        </svg>
                        Lista de Asignaciones</a>
                    <a class="text-decoration-none d-inline-block p-3 text-black text-opacity-75 border-3 border-bottom border-white" asp-controller="Home" asp-action="ListaEquipos" id="listaEquip">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pc-display" viewBox="0 0 16 16">
                            <path d="M8 1a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1zm1 13.5a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0m2 0a.5.5 0 1 0 1 0 .5.5 0 0 0-1 0M9.5 1a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM9 3.5a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0-.5.5M1.5 2A1.5 1.5 0 0 0 0 3.5v7A1.5 1.5 0 0 0 1.5 12H6v2h-.5a.5.5 0 0 0 0 1H7v-4H1.5a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .5-.5H7V2z" />
                        </svg>
                        Lista de equipos
                    </a>
                    <a class="text-decoration-none d-inline-block p-3 text-black text-opacity-75 border-3 border-bottom border-white" asp-controller="Home" asp-action="AsignacionesLectura" id="listaLectura">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bookmark" viewBox="0 0 16 16">
                            <path d="M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v13.5a.5.5 0 0 1-.777.416L8 13.101l-5.223 2.815A.5.5 0 0 1 2 15.5zm2-1a1 1 0 0 0-1 1v12.566l4.723-2.482a.5.5 0 0 1 .554 0L13 14.566V2a1 1 0 0 0-1-1z"/>
                        </svg>
                        Lista de Asignaciones Lectura
                    </a>
                </div>
                <a class="text-decoration-none d-inline-block p-3 text-black text-opacity-75 border-3 border-bottom border-white" asp-controller="Home" asp-action="Usuarios" id="listaUsers">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
                        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z" />
                    </svg>
                    Lista de Usuarios
                </a>
            </div>
        </div>

        }

    </header>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)

    <div class="container-fluid min-vh-50">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <div id="cambiarContra" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-gray">
                    <h5 class="modal-title">Cambiar contraseña</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                @using (Html.BeginForm("CambioContrasena", "Home", FormMethod.Post, new { @class = "modal-body", id = "editUsr" }))
                {
                    <div class="form-group mb-2">
                        <input type="text" id="idEmpleado" name="idEmpleado" value="@User.Claims.FirstOrDefault(c => c.Type == "idUsuario")?.Value" disables class="form-control">
                        <label for="actual">Contraseña actual:</label>
                        <input type="text" id="actual" name="actual" required class="form-control">

                        <label for="contrasena">Nueva contraseña:</label>
                        <input type="text" id="contrasena" name="contrasena" required class="form-control">

                        <label for="confirmar">Confirmar contraseña:</label>
                        <input id="confirmar" name="confirmar" required class="form-control">
                    </div>

                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-danger ms-2">Aceptar</button>
                    </div>
                }

            </div>
        </div>
    </div>

</body>
</html>

View: Acceso/Index.cshtml

@model TbUsuarios
@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Equipos</title>
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/Equipos.styles.css" asp-append-version="true" />
        <link href="..\css\site.css" rel="stylesheet" />
    </head>
    <body>
        <section class="container vh-100">
            <div class="row d-flex justify-content-center h-100" style="padding: 80px;">
                <div class="col-8 col-md-6 col-lg-5">
                    <div class="card border-0 shadow-sm" style="border-radius: 0.5rem;">
                        <div class="card-body p-4">

                            <div class="d-flex">
                                <img src="../img/logo-cuadrado-amm.png" height="40" class="rounded-circle me-3" alt="logo">
                                <h3 class="mb-4">Equipos</h3>
                            </div>


                            @using (Html.BeginForm("Index", "Acceso", FormMethod.Post)) {

                                <div class="mb-3">
                                    @Html.LabelFor(m => m.Correo, "Correo", new { @class = "form-laber", @for = "correo"})
                                    @Html.TextBoxFor(m => m.Correo, new { @class = "form-control", type = "email", id = "correo"})
                                </div>
                                <div class="mb-3">
                                    @Html.LabelFor(m => m.Contrasena, "Contraseña", new { @class = "form-laber", @for = "contra"})
                                    @Html.TextBoxFor(m => m.Contrasena, new { @class = "form-control", type = "password", id = "contra" })
                                    <a class="link-primary d-block text-sm-end mt-1" data-bs-toggle="modal" data-bs-target="#restablecerContra">¿Olvidaste tu contraseña?</a>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button class="btn bg-blue text-white " type="submit">Login</button>
                                </div>

                            }

                            <div id="restablecerContra" class="modal fade" tabindex="-1">
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Restablecer contraseña</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <p class="p-3"></p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>

        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>

    </body>
</html>

Muchas gracias.

1 respuesta 1

0

Bien, por si les interesa, ya encontré el problema.

El error era causado precisamente por querer almacenar la foto en el CLAIM de la sesión. Al parecer hay un límite en la cantidad de datos que se pueden almacenar ahí, y la foto resultó ser demasiado grandes. Tristemente FireFox (El navegador que uso para testear mis desarrollos) falló en presentarme información del error, en lugar de mostrarme el error HTTP Error 431 simplemente muestra una pantalla en blanco. El que me dió la solución fué Brave, ya que éste si muestra el error que no permite continuar.

Dejo la solución por si a alguien le ocurre lo mismo.

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.