Web con Visual Studio .NET

Crear una aplicación Web con Visual Studio .NET
Empecemos creando una aplicación Web con Visual Studio .NET, en estos ejemplos he usado la versión 2003 y para el código mostrado en el artículo usaré Visual Basic .NET.

Seguiremos los siguientes pasos:
- Creación del proyecto y de la página de Login
- Crea un nuevo proyecto en Visual Studio y elije el de Aplicación Web.
- Te pedirá un nombre para crearlo en el localhost, yo he usado pruebaLogin.
- Cuando Visual Studio termine de crear el sitio, se mostrará el proyecto "inicial" que el Visual Studio, en la figura 1 podemos ver el explorador de soluciones:

Figura 1. La solución recién creada

- De este proyecto podemos eliminar los ficheros Global.asax y Styles.css (aunque puedes dejar el .css si sueles usar estilos en este caso lo borraremos).
- Al fichero WebForm1.aspx le vamos a cambiar el nombre por Login.aspx
- Añadimos dos etiquetas, dos cajas de textos y un botón, tal como vemos en la figura 2.

Figura 2. El formulario de Login

- La caja superior se llama txtUsuario, la del password: txtPassword y el botón: btnLogin
- Selecciona la caja de password y en la ventana de propiedades, asigna a la propiedad TextMode el valor Password, esto hará que no se vea lo que el usuario escribe. Ver figura 3.

Figura 3. Indicar que la caja de textos se usará para introducir una clave

- Cada formulario Web (página .aspx) realmente tiene asociada una clase, por tanto vamos a hacer que el nombre de la clase del formulario Login.aspx se llame también Login, ya que el nombre que tendrá será el que le dio el VS al crearla, es decir, la clase se llama WebForm1 y el queremos que se llame (si es posible) de la misma forma que el formulario.
- Lo que debes hacer es mostrar el código, por tanto selecciona el fichero Login.aspx del explorador de soluciones y pulsa F7 o bien pulsa en el primer icono del toolbar (barra de herramientas) que se muestra en la ventana del explorador de soluciones (ver figura 1).
- Ahora tendremos a la vista el código de esa página Web. Esta es una de las razones por las que
es preferible usar el Visual Studio en lugar, de por ejemplo el WebMatrix, las cosas están en el mismo sitio que en cualquier aplicación... y es más intuitivo... (pero este comentario no quita que te muestre después cómo hacerlo todo "a pelo").
- Seleccionamos la palabra WebForm1 (figura 4) y la cambiamos por Login (figura 5)

Figura 4. Cambiamos el nombre predeterminado

Figura 5. Por el mismo que tiene el WebForm: Login

- Ahora vamos a escribir el código para comprobar el nombre del usuario y el password, pero por medio de código.
- Antes de nada, vamos a añadir dos nuevas páginas:
- Una será la usada para que el usuario navegue por nuestro sitio, esta página la vamos a llamar
Default.aspx (que es el nombre normal que usa el VS)
- La otra la llamaremos Candemor.aspx que será la usada para mostrar al usuario un aviso de que no está autorizado para entrar en el sitio.
- Para añadir una nueva página, en el menú Proyecto, selecciona Agregar Web Forms, esto mostrará un diálogo como el mostrado en la figura 6, escribe el nombre de la página (el primer caso: Default).

Figura 6. Añadir un nuevo formulario Web

- Añade un nuevo formulario al que le daremos el nombre Candemor.
- Ya que tenemos en modo diseño este último formulario, vamos a añadirle una etiqueta y en la
propiedad Text escribiremos algo así: "Pecador de la pradera, no estás autorizado a entrar en
este sitio".
- Cambia el tamaño de la fuente para que se vea bien. Ver figura 7. La etiqueta se adaptará al tamaño que sea necesario, pero puedes cambiarlo.

Figura 7. Propiedades de la etiqueta con texto grande y en negrita

- Muestra el formulario Default (en la ventana del explorador de soluciones, haz dobleclick en Default.aspx (o la seleccionas y pulsas Shift+F7)
- Añade una etiqueta al formulario y en el texto le pones: "Bienvenid@ al sitio de tutorialLogin".
El tamaño de la letra la dejo a tu elección.
- Ahora sí, vamos a escribir el código para validar los usuarios.

Autenticar a los usuarios

Como te comenté al principio, vamos a ver tres métodos (o ejemplos) para comprobar los usuarios que quieren usar nuestro sitio Web.
- Primer ejemplo de autenticación: Usando código directamente
- La comprobación se hará al pulsar en el botón, por tanto vamos a escribir el código dentro del evento Click del botón.
- Haz que se muestre el formulario, pulsa Shift+F7 (mayúsculas y la tecla F7) si es que estás en la
ventana del código o pulsa en el segundo icono del toolbar que hay en el explorador de soluciones.
- Selecciona el botón y haz doble click en él, esto creará el evento predeterminado del botón (evento Click) y nos mostrará el código.
- Escribe esto (o lo que quieras), dentro de ese método de evento:
- Para que no te de error, haz una importación del espacio de nombres: System.Web.Security

Listado 1. El código del botón btnLogin

- Lo que hacemos en este código, aunque creo que está claro, es:
- Comprobar si el nombre indicado coincide con la clave.
- Si el usuario es correcto, asignamos un valor verdadero a la variable aceptado.
- En caso contrario (Case Else) asignamos un valor falso.
- Comprobamos si aceptamos o no al usuario, de ser sí, lo redirigimos a la página que solicitó, o a
Default.aspx si no solicitó ninguna, sino que simplemente entró a la de Login, que es lo que hará el Visual Studio al ejecutar la aplicación.
- Si no está autorizado lo redirigimos a la página de error, en nuestro caso Candemor.aspx, para
ello usamos Response.Redirect que es lo que hay que usar en ASP/ASP.NET para mandar a alguien a otra página, la que sea, no tiene porqué ser del tipo .aspx.

- Vamos a probarlo:
- Pulsa F5 (si no has hecho nada raro debería mostrarte la página de Login)
- Escribe un usuario, por ejemplo "pepe" y en la clave escribe "juan"
- Te mandará a la página Candemor.aspx
- Ahora pulsa en el navegador hacia atrás (o bien cierra la ventana y vuelve a pulsar F5)
- En esta ocasión escribe en el nombre "pepe" y en el password escribe "Jose" (con la J en mayúsculas), pulsa en el botón y te mandará a la página Default.aspx.
- En este primer ejemplo, la página de inicio debe ser Login.aspx, por tanto, si ese es el caso del error, haz lo siguiente:
- En el explorador de soluciones selecciona Login.aspx
- Pulsa con el botón secundario y del menú despegable (figura 8), selecciona Establecer como página de inicio.

Figura 8. Establecer la página de inicio de la aplicación Web

- Ya que sabemos cómo se puede poner una página como de inicio, es decir, la que "posiblemente" el usuario indicará en el navegador. Vamos a suponer que el usuario quiere entrar directamente en la página Default.aspx.
- Selecciona la página Default.aspx en el explorador de soluciones y pulsa con el botón derecho del ratón e indica que esa es la página de inicio (figura 8).
- Pulsa F5
- Ha entrado sin que hagamos Login...
- Pues sí... ya que no le hemos dicho en ningún momento que este es un sitio "reservado".
- Obliguemos al usuario a "loguearse" (autenticarse) para poder entrar en cualquier página.
- Cierra el explorer para "terminar" la aplicación.
- Abre el fichero Web.config
- Busca la "entrada" authentication:


- Sustitúyelo por esto otro:


- Guarda los cambios y pulsa F5 para ver que todo funciona bien.
- ¿Por qué no pide que el usuario se autentifique?
- Porque estamos autorizando a todos los usuarios, por tanto el ASP.NET "piensa" que si
estamos autorizando a todos los usuarios para qué pedir que se autentifique... así que los deja pasar.
- Pero como de lo que se trata es de que se tenga que autenticar el usuario, veamos nuevamente el fichero Web.config, en esta ocasión busca authorization, estará de esta forma:


- Cambia todo ese código por este otro (he quitado los comentarios para simplificar):

- El deny users="?" le indica a ASP.NET que solo se permitan usuarios autentificados.
- Antes de mostrarte la página Default.aspx te pide que te autentifiques, para ello te manda a la página de Login y si escribes correctamente el nombre y la contraseña te envía a la página "solicitada".
- El problema es que si no escribes bien la clave, ya no te manda a la página de error (Candemore.aspx).

No se muestra la página de error (Candemore.aspx) porque para que el usuario pueda ver cualquier página de nuestro sitio (salvo la de Login) debe estar autorizado, y la única forma de
darle autorización es que se autentifique.
- Para subsanar este problemilla, vamos a añadir una etiqueta a la página Login.aspx.
- En esta etiqueta (a la que le he dado el nombre LabelAviso) inicialmente mostraremos un
mensaje indicando que escriba el nombre y la contraseña para entrar.
- Si no es correcto el nombre/password mostraremos el mensaje que pusimos en Candemore.aspx o el que se te ocurra para indicar que no son correctos los datos introducidos.
- Eso que te he resaltado en el párrafo anterior es algo que siempre deberías tener en cuenta: no les des información de los fallos, salvo que estés probándolo tú y sepas que nadie más los verá.
- Tenemos que modificar el código del evento Click del botón btnLogin para que en lugar de llamar al formulario Candemore.aspx se muestre el texto:
' sino.. a la de error de login LabelAviso.Text = "Pecador de la pradera, no estás autorizado a entrar en este sitio"
- Por supuesto, después de este cambio, la página Candemore.aspx ya no la necesitamos más. Si quieres puedes borrarla (selecciónala en el explorador de soluciones, usa el botón derecho y selecciona Eliminar) o bien quitarla del proyecto (no se borra), para ello desde el menú desplegable, selecciona Excluir del proyecto.

- Segundo ejemplo de autenticación: Indicando los usuarios en Web.config
- En el fichero Web.config podemos guardar los nombres de usuarios y las claves, de forma que sea el propio ASP.NET el que se encargue de comprobar si debe o no autorizarlo para entrar en nuestro sitio.

- Lo más recomendable, para que si algún intruso ve ese fichero de configuración no sepa que
claves corresponden a cada usuario, las claves las vamos a guardar como un valor HASH, es decir, un valor numérico que será único para cada una de las claves almacenadas.
- Para aprovechar el mecanismo de comprobación que tiene ASP.NET, usaremos los valores HASH producidos por los métodos de encriptación SHA1 o MD5.
- Antes de entrar en detalles, veamos dónde habría que poner esos nombres y claves.
- Como te he comentado antes, esa información la escribiremos en el fichero Web.config, concretamente en la sección authentication.
Veamos cómo quedaría esa sección con los nombres usados en el método anterior.

- En la sección credentials el indicamos el tipo de formato usado y después cada uno de los usuarios, indicando el nombre y el hash del password.
- Para usar este tipo de autenticación, debemos sustituir el código del método Click por este:

Listado 2. El código para autenticar usando hash encriptadas con SHA1

- Como puedes comprobar es una forma muy cómoda de realizar las comprobaciones, ya que dejamos que sea el propio ASP.NET el que se encargue de comprobarlo.
- Es importante saber, que se pueden usar los dos métodos explicados de forma conjunta.
En este caso, si primero comprobamos con las claves Sha1, en la parte Else podemos añadir
las comprobaciones "literales" mostradas anteriormente. Pero como te dije, no es conveniente incluir esos nombres directamente en el código, aunque si lo pensamos bien, tampoco habría mayor problema, ya que ese código se incluirá solamente en la DLL compilada.
- La parte en la que los nombres y claves de los usuarios están en una base de datos, lo dejaremos para otra ocasión.

- Ahora lo que nos interesa es poder generar los valores hash para cada clave que queramos tener.
- El código a usar sería el siguiente:

Listado 3. Generar el valor hash para una clave indicada

Consideraciones para usar este código (o aplicación Web). Todo esto que hemos hecho es una aplicación Web, es decir el código que tendríamos que "publicar" en nuestro sitio Web.

Los puntos importantes a tener en cuenta son:
1- La DLL generada debes copiarla en el directorio \BIN del sitio Web. Ese directorio "debe estar forzosamente" en la raíz del sitio... no puede estar dentro de otro directorio. Hay que aclarar que realmente la librería si puede estar en otro directorio, pero ese otro directorio debe estar dentro del directorio \bin que forzosamente tiene que estar en el "raíz" de nuestro sitio.

Cargar automáticamente assemblies fuera del directorio bin
2- El fichero Web.config debes copiarlo en el directorio raíz del sitio Web. Esto supone que solamente podrán acceder a tu sitio Web si el usuario está registrado.
Por tanto, no uses el fichero Web.config con la información de autenticación salvo que quieras que TODOS los visitantes de tu sitio se tengan que autenticar.

3- Relacionado con el punto anterior, la comprobación de que los usuarios tienen que hacer login para ver cualquier cosa, solo es cierto si todas las páginas son de ASP.NET (extensión .aspx)

4- Quiero aclararte también que lo que debes publicar en el sitio Web son las páginas con extensión .aspx (no las .aspx.vb o .aspx.cs), el mecionado fichero Web.config y la DLL generada.