UNIVERSIDAD POLITÉCNICA DE EL SALVADOR

FACULTAD DE INGENIERÍA Y ARQUITECTURA

TECNICA ELECTIVA III
Guía de laboratorio #4: Creación de un sitio Web para logueo

Objetivo:

Desarrollar un inicio de sesión para implementar seguridad en cualquier sitio web.

Desarrollo:

1. Crearemos una tabla en donde insertaremos un par de usuarios para realizar pruebas. Ejecutar
el archivo .sql proporcionado para esta práctica.

2. Abrir Visual Studio y hacer clic en Nuevo Proyecto

3. Vamos a crear nuestro modelo que debe representar al usuario que desea iniciar sesión. Para
hacer esto, haga clic derecho en la carpeta Modelos y luego hacer clic en Agregar - > Nuevo
elemento.

4. En la ventana de asistente seleccionar Generate from Database y clic en el botón Siguiente.

5. Selecciona la conexión con la base de datos en donde está la tabla Usuarios. En este ejemplo
se usa la base de datos Catastro.mdf
6. Luego selecciona la tabla Usuarios que fue creada al inicio de esta guía y aceptar el nombre
predeterminado de Modelo y verifique las opciones como se muestra en la imagen a
continuación:

7. Se realizará el mapeo del modelo y la entidad usuario como se muestra a continuación:

8. Abramos el archivo Usuario.cs generado por el Entity Framework y agregamos algunas
validaciones usando Data Annotations

//------------------------------------------------------------------------------
// <auto-generated>
// This code was generated from a template.
//
// Manual changes to this file may cause unexpected behavior in your application.
// Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------
namespace Mvc_login.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

public partial class Usuario

{
public int Id { get; set; }
[Display(Name = "Login")]
[Required(ErrorMessage = "Informe o nome do usuário", AllowEmptyStrings = false)]
public string NomeUsuario { get; set; }
[Required(ErrorMessage = "Informe a senha do usuário", AllowEmptyStrings = false)]
[DataType(System.ComponentModel.DataAnnotations.DataType.Password)]
public string Senha { get; set; }
}
}

El código en diferente color y subrayado es el que se agregó.

Tenga en cuenta que los campos definidos están identificados con los atributos Required,
Display e DataType.

9. No olvidemos modificar cual será nuestra página principal, para ello, en la carpeta App_Start
tenemos el archivo RouteConfig.cs que define la ruta predeterminada como se muestra en el
código abajo:

using System.Web.Mvc;
using System.Web.Routing;
namespace Mvc_login
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
 routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
}

Tenga en cuenta que el controlador predeterminado es el controller:”Home” y que la acción

predeterminada action=”Index”.

Cambiaremos esto, porque queremos que se llame Login al comenzar la solicitud, en esta
ocasión crearemos esta acción en el HomeController.

Cambiemos el código arriba definiendo la acción predeterminada como la action=”Login”:

using System.Web.Mvc;
using System.Web.Routing;
namespace Mvc_login
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Login", id = UrlParameter.Optional }
);
}
}
}

10. Después de eso en la carpeta Controllers abra el archivo HomeController y definir la acción
Login:
public ActionResult Login()
{
return View();
}
11. Ahora creemos el nuestra view para Login desde la acción Login. Haz clic con el botón derecho
en la acción Login y luego Agregar vista:

12. En la ventana Agregar vista definamos el nombre de la Vista como Login definir la plantilla en
blanco y elija el Modelo y el contexto de datos como se muestra en la figura a continuación:

13. A continuación, incluiremos el siguiente código en el archivo Login.cshtml creado en la carpeta

Views/Account:
@model Mvc_login.Models.Usuario
@{
ViewBag.Title = "Login";
}
<h2>Login</h2>
@using (Html.BeginForm("Login", "Home", FormMethod.Post))
{
//cria a tag do formulário
@Html.AntiForgeryToken() // previne o ataque CSRF
@Html.ValidationSummary(true)
if (@ViewBag.Message != null)
{
<div style="border:1px solid red">
@ViewBag.Message
</div>
}
<table>
<tr>
 <td>@Html.LabelFor(a => a.NomeUsuario)</td>
<td>@Html.TextBoxFor(a => a.NomeUsuario)</td>
<td>@Html.ValidationMessageFor(a => a.NomeUsuario)</td>
</tr>
<tr>
<td> @Html.LabelFor(a => a.Senha)</td>
<td> @Html.PasswordFor(a => a.Senha) </td>
<td> @Html.ValidationMessageFor(a => a.Senha) </td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
<td></td>
</tr>
</table>
}
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
}

14. Este será nuestro formulario de inicio de sesión que se presentará al usuario para introducir
el nombre de usuario y contraseña:

15. Después del usuario introduzca el nombre y la contraseña del usuario se producirá un post
que crearemos con un Action Login en el archivo HomeController.cs definiendo otro Login que
recibirá los datos ingresados:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Login(Usuario u)
{
// esta action trata o post (login)
if (ModelState.IsValid) //verifica se é válido
{
using (CadastroEntities dc = new CadastroEntities())
{
var v = dc.Usuarios.Where(a => a.NomeUsuario.Equals(u.NomeUsuario) &&
a.Senha.Equals(u.Senha)).FirstOrDefault();
if (v != null)
{
Session["usuarioLogadoID"] = v.Id.ToString();
Session["nomeUsuarioLogado"] = v.NomeUsuario.ToString();
return RedirectToAction("Index");
}
}
}
 return View(u);
}

Observe que validamos la información de nombre y contraseña consultando el modelo de

entidades y si la autenticación es exitosa, creamos dos variables de sesión : usuarioLogadoID
y nomeUsuarioLogado y re dirigimos al usuario al Index.

16. En el Index del controlador HomeController vamos a verificar la autenticación del usuario con
la variable usuarioLogadoID que no sea null. Si falla el inicio de sesión regresamos al usuario a
Login. Para hacer esto agregamos el código en index:
public ActionResult Index()
{
if (Session["usuarioLogadoID"] != null)
{
return View();
}
else
{
return RedirectToAction("Login");
}
}

17. Si ejecutamos la aplicación, tendríamos que ver algo como esto:

18. Y si el inicio de sesión es logrado con éxito tendremos la presentación de la vista Index: