Vous êtes sur la page 1sur 17

Crear una aplicacin Web que utilice un formulario Web (Web Form) En este artculo te voy a explicar de forma

sencilla (o al menos paso a paso) cmo crear una aplicacin Web que utilice un formulario Web (Web Form) para realizar la autenticacin (o autorizacin) de los usuarios que quieran navegar por el sitio Web que la utilice. Nota del traductor: (o sea del Guille) En un principio pens usar a lo largo de este artculo la palabra autentificacin como traduccin de authentication, que es como viene en tres de los cuatro diccionarios de ingls/espaol que he consultado, (en el cuarto, el ms antiguo, ni viene), adems de que en el diccionario de la Lengua Espaola, (al menos el que tengo yo), la entrada de autenticar te manda a autentificar. Si bien, comprobando en el diccionario en lnea de la RAE, tanto autenticar como autentificar te mandan a la misma entrada: autenticar. Por otro lado, autentificacin no existe en el diccionario en lnea de la RAE, sin embargo autenticacin si que aparece como: Accin y efecto de autenticar. Adems en la documentacin de Visual Studio .NET utilizan autenticacin o autenticar, as que es posible que los diccionarios de ingls consultados estn equivocados o no estn al da... Por estas razones, y para no "desentonar" demasiado, finalmente he optado por usar autenticar y autenticacin; si eres de los mos y siempre has usado autentificacin para referirte al proceso de "acreditarse" en un sitio Web... ve cambiando el chip... que sino, nos vamos a confundir con tanto juego de palabras... y finalmente esto va a parecer que no es autntico... je, je. La comprobacin de esa autenticacin la haremos de tres formas: 1- Usando cdigo directo, es decir, en el propio cdigo de la aplicacin tendremos los nombres y las claves. Nivel de seguridad 0: esto ni se te ocurra hacerlo en una aplicacin "de verdad". 2- Los nombres de los usuarios y las claves estarn en el fichero Web.config. Para mayor nivel de seguridad no guardaremos la clave, sino que guardaremos un valor HASH que nos servir para comprobar si la clave es "buena". Para este caso, necesitaremos una pequea utilidad para generar ese valor HASH. 3- Los nombres y claves se guardan en una base de datos. Para un buen nivel de seguridad, se recomienda que las claves se guarden como valores HASH, no guardadas directamente... el problema en este caso es que ni nosotros podremos saber la clave del usuario, salvo que en lugar de dejar que se genere automticamente usemos una utilidad como la indicada en el punto anterior...

Crear una aplicacin Web con Visual Studio .NET


Empecemos creando una aplicacin Web con Visual Studio .NET, en estos ejemplos he usado la versin 2003 y para el cdigo mostrado en el artculo usar Visual Basic .NET, despus (si el tiempo me lo permite) te mostrar el de C#. Nota: Aunque he preferido usar el Visual Studio para crear la aplicacin, (es ms cmodo y te permite crear el diseo de los formularios y dems), realmente no es necesario, pero, como te digo, as resultar ms fcil y la gente de Microsoft seguramente seguir poniendo publicidad en mi sitio... je, je. Los pasos a seguir: - Creacin del proyecto y de la pgina de Login - Crea un nuevo proyecto en Visual Studio, selecciona el lenguaje que quieras (ya te digo que en el artculo te mostrar el cdigo de VB) y elije el de Aplicacin 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:
Formatted: Font: (Default) Verdana, 10 pt

Figura 1. La solucin recin creada

- De este proyecto podemos eliminar los ficheros Global.asax y Styles.css (aunque puedes dejar el .css si sueles usar estilos... yo no uso estilos y en este ejemplo lo borrar). - Al fichero WebForm1.aspx le vamos a cambiar el nombre por Login.aspx - Aadimos dos etiquetas, dos cajas de textos y un botn, tal como vemos en la figura 2.
Formatted: Font: (Default) Verdana, 10 pt

Figura 2. El formulario de Login - La caja superior se llama txtUsuario, la del password: txtPassword y el botn: btnLogin - Selecciona la caja de password y en la ventana de propiedades, asigna a la propiedad TextMode el valor Password, esto har que se no se vea lo que es usuario escribe. Ver figura 3.
Formatted: Font: (Default) Verdana, 10 pt

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

- Cada formulario Web (pgina .aspx) realmente tiene asociada una clase (es una clase!), por tanto vamos a hacer que el nombre de la clase del formulario Login.aspx se llame tambin 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 cdigo, 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 cdigo de esa pgina 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 estn en el mismo sitio que en cualquier aplicacin... y es ms intuitivo... (pero este comentario no quita que te muestre despus cmo hacerlo todo "a pelo"). - Seleccionamos la palabra WebForm1 (figura 4) y la cambiamos por Login (figura 5)
Formatted: Font: (Default) Verdana, 10 pt

Figura 4. Cambiamos el nombre predeterminado...


Formatted: Font: (Default) Verdana, 10 pt

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

- Ahora vamos a escribir el cdigo para comprobar el nombre del usuario y el password, pero por medio de cdigo. - Antes de nada, vamos a aadir dos nuevas pginas: - Una ser la usada para que el usuario navegue por nuestro sitio, esta pgina la vamos a llamar Default.aspx (que es el nombre normal que usa el VS) - La otra la llamaremos Candemor.aspx (je, je, en honor al Chiquito de la Calz (o Calzada) que es malagueo...), que ser la usada para mostrar al usuario un aviso de que no est autorizado para entrar en el sitio. - Para aadir una nueva pgina, en el men Proyecto, selecciona Agregar Web Forms... esto mostrar un dilogo como el mostrado en la figura 6, escribe el nombre de la pgina (el primer caso: Default)
Formatted: Font: (Default) Verdana, 10 pt

Figura 6. Aadir un nuevo formulario Web Nota: Por ahora no te preocupes de lo que haya que mostrar en ese formulario Web. - Aade un nuevo formulario al que le daremos el nombre Candemor.

- Ya que tenemos en modo diseo este ltimo formulario, vamos a aadirle una etiqueta y en la propiedad Text escribiremos algo as: "Pecador de la pradera, no ests autorizado a entrar en este sitio". - Cambia el tamao de la fuente para que se vea bien. Ver figura 7. La etiqueta se adaptar al tamao que sea necesario, pero puedes cambiarlo... no te explico como que eso se supone que ya lo sabrs... bueno, vale, usa los cuadritos que hay en cada lado de la etiqueta y juega con ellos...
Formatted: Font: (Default) Verdana, 10 pt

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) - Aade una etiqueta al formulario y en el texto le pones: "Bienvenid@ al sitio de tutorialLogin". El tamao de la letra la dejo a tu eleccin. - Ahora s, vamos a escribir el cdigo para validar los usuarios.

Autenticar a los usuarios


Como te coment al principio, vamos a ver tres mtodos (o ejemplos) para comprobar los usuarios que quieren usar nuestro sitio Web.

- Primer ejemplo de autenticacin: Usando cdigo directamente - La comprobacin se har al pulsar en el botn, por tanto vamos a escribir el cdigo dentro del evento Click del botn. - Haz que se muestre el formulario, pulsa Shift+F7 (maysculas y la tecla F7) si es que ests en la ventana del cdigo o pulsa en el segundo icono del toolbar que hay en el explorador de soluciones. - Selecciona el botn y haz doble click en l, esto crear el evento predeterminado del botn (evento Click) y nos mostrar el cdigo. - Escribe esto (o lo que quieras), dentro de ese mtodo de evento: - Para que no te de error, haz una importacin del espacio de nombres: System.Web.Security Private Sub btnLogin_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _ Handles btnLogin.Click ' Prueba 1. Escribiendo el cdigo de comprobacin a "pelo" Dim aceptado As Boolean = False ' Select Case txtUsuario.Text.ToLower Case "pepe" If txtPassword.Text = "Jose" Then aceptado = True End If Case "rafa" If txtPassword.Text = "Rafael" Then aceptado = True End If Case "pili" If txtPassword.Text = "Pilar" Then aceptado = True End If Case "guille" If txtPassword.Text = "Guillermo" Then aceptado = True End If Case Else

' esto no es necesario porque el valor inicial es False, ' pero nunca est de ms, adems que as quin vea el cdigo ' sabe lo que queremos hacer. aceptado = False End Select ' ' si es un usuario de los "previstos" ' redirigirlo a la pgina "principal", por defecto: Default.aspx If aceptado Then FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False) Else ' sino.. a la de error de login Response.Redirect("Candemor.aspx") End If End Sub Listado 1. El cdigo del botn btnLogin - Lo que hacemos en este cdigo, aunque creo que est claro, es: - Comprobar si el nombre indicado coincide con la clave, para cada usuario tenemos que hacer una comprobacin! - 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 pgina 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 aplicacin. - Si no est autorizado lo redirigimos a la pgina 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 pgina... la que sea, no tiene porqu ser del tipo .aspx. - Vamos a probarlo:

- Pulsa F5 (si no has hecho nada raro debera mostrarte la pgina de Login) - Escribe un usuario, por ejemplo "pepe" y en la clave escribe "juan" - Te mandar a la pgina Candemor.aspx - Ahora pulsa en el navegador hacia atrs (o bien cierra la ventana y vuelve a pulsar F5) - En esta ocasin escribe en el nombre "pepe" y en el password escribe "Jose" (con la J en maysculas), pulsa en el botn y te mandar a la pgina Default.aspx. - Es decir, todo funciona a las mil maravillas... medalla! aplausos!, etc. - Si desde el punto 16.1 no te funciona... es que algo has hecho mal... o bien no has escrito bien el cdigo (el VS te mostrar un mensaje de error indicando ese caso) o tambin puede ser que al "juguetear" hayas cambiado algo ms... por ejemplo qu pgina debe mostrarse. - En este primer ejemplo, la pgina 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 botn secundario (el derecho para los diestros) y del men despegable (figura 8), selecciona Establecer como pgina de inicio.
Formatted: Font: (Default) Verdana, 10 pt

Figura 8. Establecer la pgina de inicio de la aplicacin Web

- Compliquemos un poco la cosa, que esto da la impresin que es coser y cantar (para el que sepa coser y/o cantar). - Ya que sabemos cmo se puede poner una pgina 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 pgina Default.aspx. Se supone que para que alguien vea esa pgina debe estar autentificado (o autorizado), a ver que pasa... - Selecciona la pgina Default.aspx en el explorador de soluciones y pulsa con el botn derecho del ratn e indica que esa es la pgina de inicio (figura 8). - Pulsa F5 - Que ha pasado aqu? - Ha entrado sin que hagamos Login... - Pues s... ya que no le hemos dicho en ningn momento que este es un sitio "reservado". - Obliguemos al usuario a "loguearse" (autenticarse) para poder entrar en cualquier pgina. - Cierra el explorer para "terminar" la aplicacin. - Abre el fichero Web.config (doble click en el explorador de soluciones, esto ya no lo vuelvo a repetir) - Busca la "entrada" authentication: <authentication mode="Windows" /> - Sustityelo por esto otro: <authentication mode="Forms"> <forms loginUrl="Login.aspx" /> </authentication> - Guarda los cambios y pulsa F5 para ver que todo funciona bien. - Cachis la mar!... que pasa aqu? - 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 ocasin busca authorization, estar de esta forma: <authorization> <allow users="*" /> <!-- Permitir a todos los usuarios --> <!-- <allow users="[lista de usuarios separados por comas]" roles="[lista de funciones separadas por comas]"/> <deny users="[lista de usuarios separados por comas]" roles="[ lista de funciones separadas por comas]"/> --> </authorization> - Cambia todo ese cdigo por este otro (he quitado los comentarios para simplificar): <authorization> <deny users="?" /> <!-- solo los usuarios autentificados --> </authorization> - El deny users="?" le indica a ASP.NET que solo se permitan usuarios autentificados. - A ver si ahora... guarda los cambios y pulsa F5 -BIEN! - Antes de mostrarte la pgina Default.aspx te pide que te autentifiques, para ello te manda a la pgina de Login y si escribes correctamente el nombre y la contrasea te enva a la pgina "solicitada". - El problema es que si no escribes bien la clave... ya no te manda a la pgina de error (Candemore.aspx). - Por qu? - ... pinsalo un poco y ahora te digo la respuesta... - Sita el ratn aqu para ver la respuesta. - Efectivamente esa es la razn... (bueno, vale... te lo digo... que no te da tiempo a leerlo): No se muestra la pgina de error (Candemore.aspx) porque para que el usuario pueda ver cualquier pgina de nuestro sitio (salvo la de Login) debe estar autorizado, y la nica forma de darle autorizacin es que se autentifique. - Para subsanar este problemilla, vamos a aadir una etiqueta a la pgina 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 contrasea 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, pero no le des pista de dnde se ha equivocado! al enemigo, ni agua! y si es un intruso... cuanto menos sepa mejor. - Eso que te he resaltado en el prrafo anterior es algo que siempre deberas tener en cuenta: no des informacin de los fallos, salvo que ests probndolo t y sepas que nadie ms los ver. - Ya que si, por ejemplo, le dices: "pepe" tu clave no es correcta... el intruso puede llegar a pensar que hay un usuario llamado pepe y podr hacer sus "cbalas" para averiguar la clave... y puede que acierte! - Seguridad ante todo! - Tenemos que modificar el cdigo del evento Click del botn 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 ests autorizado a entrar en este sitio" - Por supuesto, despus de este cambio, la pgina Candemore.aspx ya no la necesitamos ms. Si quieres puedes borrarla (seleccinala en el explorador de soluciones, usa el botn derecho y selecciona Eliminar) o bien quitarla del proyecto (no se borra), para ello desde el men desplegable, selecciona Excluir del proyecto. Nota: Si a la etiqueta LabelAviso le has indicado que tenga el texto en negrita y X-Large, pero al probarla ves que te muestra el texto normal... (me acaba de pasar), haz que se muestre el esa pgina en modo formulario (no el cdigo) y pulsa en la ficha HTML (que estar al lado de la de Diseo), eso te mostrar el cdigo HTML usado en la pgina, busca la etiqueta en cuestin, (<asp:label id="LabelAviso" ...) y antes del cierre (/>) aade esto: Font-Bold="True" Font-Size="X-Large" As se mostrar en negrita y en letras grandes. - Esto sera todo lo que habra que hacer para poder comprobar si el usuario es quin dice ser. Nota:

Si quieres probar, desde "fuera" del Visual Studio .NET, que todo funciona bien, puedes abrir el Explorer y escribir esto en la direccin (suponiendo que el nombre indicado para la aplicacin es pruebaLogin): http://localhost/pruebaLogin/Default.aspx Debes asegurarte de compilar primero la aplicacin (Generar>Generar aplicacin) - Segundo ejemplo de autenticacin: 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 ms recomendable, para que si algn intruso ve ese fichero de configuracin no sepa que claves corresponden a cada usuario, las claves las vamos a guardar como un valor HASH, es decir, un valor numrico que ser nico para cada una de las claves almacenadas. - Para aprovechar el mecanismo de comprobacin que tiene ASP.NET, usaremos los valores HASH producidos por los mtodos de encriptacin SHA1 o MD5. - Antes de entrar en detalles, veamos dnde habra que poner esos nombres y claves. - Como te he comentado antes, esa informacin la escribiremos en el fichero Web.config, concretamente en la seccin authentication. Veamos cmo quedara esa seccin con los nombres usados en el mtodo anterior. <authentication mode="Forms"> <forms loginUrl="Login.aspx"> <credentials passwordFormat="SHA1"> <user name="guille" password="251DBBC3BFFC9445DCE9787E4AA4EA9BD691E705" <user name="pepe" password="7550D35A69BE9ACA9AF9C29B880DC3ADEA01BEDC" <user name="pili" password="8A42398D66BBD841D44122167025661DEA5EDE28" <user name="rafa" password="3E05C90F8530B1BA72519824415D05E08CF5718B" </credentials> </forms> </authentication>

/> /> /> />

- En la seccin credentials el indicamos el tipo de formato usado y despus cada uno de los usuarios, indicando el nombre y el hash del password.

- Para usar este tipo de autenticacin, debemos sustituir el cdigo del mtodo Click por este: Private Sub btnLogin_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _ Handles btnLogin.Click Dim aceptado As Boolean = False ' ' Prueba 2. Usando claves encriptadas con SHA1 If FormsAuthentication.Authenticate(txtUsuario.Text, txtPassword.Text) Then aceptado = True Else aceptado = False End If ' ' si es un usuario de los "previstos" ' redirigirlo a la pgina "principal", por defecto: Default.aspx If aceptado Then FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False) Else ' sino.. a la de error de login LabelAviso.Text = "No ests autorizado a entrar en este sitio" End If End Sub Listado 2. El cdigo para autenticar usando hash encriptadas con SHA1 - Como puedes comprobar es una forma muy cmoda 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 mtodos explicados de forma conjunta. En este caso, si primero comprobamos con las claves Sha1, en la parte Else podemos aadir las comprobaciones "literales" mostradas anteriormente. Pero como te dije, no es conveniente incluir esos nombres directamente en el cdigo, aunque si lo pensamos bien, tampoco habra mayor problema, ya que ese cdigo se incluir solamente en la DLL compilada.

- La parte en la que los nombres y claves de los usuarios estn en una base de datos, lo dejaremos para otra ocasin.

Nota del 05/Dic/2006: Aunque no lo he publicado para usar en una aplicacin Web, (pero lo indicado en los siguientes links es igualmente vlido) eso de comprobar el usuario y la clave usando una base de datos lo puedes ver en estos artculos, segn uses Visual Basic o C#: Comprobar usuario y clave usando una base de datos (Visual Basic) Comprobar usuario y clave usando una base de datos (C#)

- Ahora lo que nos interesa es poder generar los valores hash para cada clave que queramos tener. - El cdigo a usar sera el siguiente: Private Sub btnCrearSHA1_Click(sender As System.Object, e As System.EventArgs) _ Handles btnCrearSHA1.Click txtClaveSHA1.Text = _ FormsAuthentication.HashPasswordForStoringInConfigFile(txtC lave.Text, "SHA1") End Sub Listado 3. Generar el valor hash para una clave indicada

Nota: Si modificas el fichero Web.config fuera del Visual Studio .NET ten en cuenta de guardarlo en formato UTF-8, ya que si has incluido palabras acentuadas, ees, etc., no se vern adecuadamente al abrirlo usando UTF-8 (que es como lo abre el ASP.NET para leer el contenido) e incluso puede producir un error.

En la prxima parte crearemos una pgina Web en la que podremos generar esos valores, pero solamente si el usuario es: "guille".

Tambin aadiremos un control creado por nosotros para que contenga ciertos valores que podrn usar todos los usuarios (normalmente una serie de links que lo redirija a otras pginas de nuestro sitio). Mientras publico la continuacin de este artculo, puedes ir haciendo esto que he comentado, as practicas... je, je, je.

Consideraciones para usar este cdigo (o aplicacin Web)


Todo esto que hemos hecho es una aplicacin Web, es decir el cdigo que tendramos 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 raz del sitio... no puede estar dentro de otro directorio. Hay que aclarar que realmente la librera si puede estar en otro directorio, pero ese otro directorio debe estar dentro del directorio \bin que forzosamente tiene que estar en el "raz" de nuestro sitio. Para saber cmo incluir la DLL en un subdirectorio del directorio \bin, consulta este artculo de Gustavo Bonansea: Cargar automticamente assemblies fuera del directorio bin 2- El fichero Web.config debes copiarlo en el directorio raz del sitio Web. Esto supone que solamente podrn acceder a tu sitio Web si el usuario est registrado. Por tanto, no uses el fichero Web.config con la informacin de autenticacin salvo que quieras que TODOS los visitantes de tu sitio se tengan que autenticar. 3- Relacionado con el punto anterior, la comprobacin de que los usuarios tienen que hacer login para ver cualquier cosa, solo es cierto si todas las pginas son de ASP.NET (extensin .aspx) 4- En el caso de que quieras tener las dos cosas... pginas "libres" y pginas "privadas" todo esto que te he explicado no te servir de nada... lo siento. 5- La solucin al punto 4 es que crees una "subweb" y en esa subWeb solo admitas a los usuarios que hayas autorizado o bien modificar el fichero Web.config para indicar qu directorios o pginas son las "privadas" o las "pblicas", pero

esto seguramente lo veremos en otra ocasin. 6- Quiero aclararte tambin que lo que debes publicar en el sitio Web son las pginas con extensin .aspx (no las .aspx.vb o .aspx.cs), el mecionado fichero Web.config y la DLL generada. Bueno, lo dejamos aqu hasta el prximo da en que modifiquemos el cdigo para usar las cosillas que te he indicado anteriormente... y seguramente aadir algunas ms, como por ejemplo usar una clase (o mdulo) para contener cierta informacin global a todos los usuarios. Hasta ese momento, espero que todo esto te vaya siendo de utilidad. Esa es siempre la intencin. Nos vemos. Guillermo Nerja, madrugada del 3 de Marzo de 2005