fasterpc de Mexico
  ASPE.NET
 

ESTE ES EL SITIO DEDICADO A ASP.MET, ENCONTRARAS  EJEMPLOS A PROGRASMAS DESDE CERO

SOL DA CLIC  EN EL HIPERVINCULO QUE  KIERAS.




 

Tutorial para la creación de un sitio Web con autenticación mediante formulario

nota. de antemano agradecemos a nuestro MVP  EL GUILLE, por esta tan valiosa  aportacion, espero que la disfruten.


 

La comprobación de esa autenticación la haremos de tres formas:

1- Usando código directo, es decir, en el propio código de la aplicación tendremos los nombres y las claves.
Nivel de seguridad 0: esto ni se te ocurra hacerlo en una aplicación "de verdad".

2- Los nombres de los usuarios y las claves estarán 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 pequeña 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 automáticamente usemos una utilidad como la indicada en el punto anterior...

 

Crear una aplicación Web con Visual Studio .NET


 

Los pasos a seguir:

- Creación del proyecto y de la página de Login

- Crea un nuevo proyecto en Visual Studio, selecciona el lenguaje que quieras (ya te digo que en el artículo te mostraré el código de VB) 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... yo no uso estilos y en este ejemplo lo borraré).

- 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
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 se no se vea lo que es usuario escribe. Ver figura 3.

Figura 3. Indicar que la caja de textos se usará para introducir una clave
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 (¡es 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 4. Cambiamos el nombre predeterminado...

Figura 5. ...por el mismo que tiene el WebForm
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 (je, je, en honor al Chiquito de la Calzá (o Calzada) que es malagueño...), 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
Figura 6. Añadir un nuevo formulario Web

 

Nota:
Por ahora no te preocupes de lo que haya que mostrar en ese 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... no te explico como que eso se supone que ya lo sabrás... bueno, vale, usa los cuadritos que hay en cada lado de la etiqueta y juega con ellos...

Figura 7. Propiedades de la etiqueta con texto grande y en negrita
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

Private Sub btnLogin_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) _
			Handles btnLogin.Click
   ' Prueba 1. Escribiendo el código de comprobación 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 más, además que así quién vea el código
         ' sabe lo que queremos hacer.
         aceptado = False
   End Select
   '
   ' si es un usuario de los "previstos"
   ' redirigirlo a la página "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 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, ¡para cada usuario tenemos que hacer una comprobación!

- 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.

- 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 código (el VS te mostrará un mensaje de error indicando ese caso) o también puede ser que al "juguetear" hayas cambiado algo más... por ejemplo qué página debe mostrarse.

- 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 (el derecho para los diestros) y del menú despegable (figura , selecciona Establecer como página de inicio.

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

 

- Compliquemos un poco la cosa, que esto da la impresión que es coser y cantar (para el que sepa coser y/o cantar).

- 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.
Se supone que para que alguien vea esa página debe estar autentificado (o autorizado), a ver que pasa...

- 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 .

- Pulsa F5

- ¿Que ha pasado aquí?

- 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 (doble click en el explorador de soluciones, esto ya no lo vuelvo a repetir)

- Busca la "entrada" authentication:

<authentication mode="Windows" />

- Sustitúyelo 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 ocasión 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 código 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 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).

- ¿Por qué?

- ... piénsalo un poco y ahora te digo la respuesta...

- Sitúa el ratón aquí para ver la respuesta.

- Efectivamente esa es la razón... (bueno, vale... te lo digo... que no te da tiempo a leerlo):

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, pero ¡no le des pista de dónde se ha equivocado! al enemigo, ¡ni agua! y si es un intruso... cuanto menos sepa mejor.

- Eso que te he resaltado en el párrafo anterior es algo que siempre deberías tener en cuenta: no des información de los fallos, salvo que estés probándolo tú y sepas que nadie más 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 "cábalas" para averiguar la clave... ¡y puede que acierte!

- ¡Seguridad ante todo!

- 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.

 

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 página en modo formulario (no el código) y pulsa en la ficha HTML (que estará al lado de la de Diseño), eso te mostrará el código HTML usado en la página, busca la etiqueta en cuestión, (<asp:label id="LabelAviso" ...) y antes del cierre (/>) añade esto:
 Font-Bold="True" Font-Size="X-Large"
Así se mostrará en negrita y en letras grandes.

 

- Esto sería todo lo que habría que hacer para poder comprobar si el usuario es quién 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 dirección (suponiendo que el nombre indicado para la aplicación es pruebaLogin):
http://localhost/pruebaLogin/Default.aspx 
Debes asegurarte de compilar primero la aplicación (Generar>Generar aplicación)

 

 

- 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.

<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 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:

 

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 página "principal", por defecto: Default.aspx
   If aceptado Then
      FormsAuthentication.RedirectFromLoginPage(txtUsuario.Text, False)
   Else
      ' sino.. a la de error de login
      LabelAviso.Text = "No estás autorizado a entrar en este sitio"
    End If
End Sub

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.

Nota del 05/Dic/2006:
Aunque no lo he publicado para usar en una aplicación Web, (pero lo indicado en los siguientes links es igualmente válido) eso de comprobar el usuario y la clave usando una base de datos lo puedes ver en estos artículos, según 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 código a usar sería el siguiente:

 

Private Sub btnCrearSHA1_Click(sender As System.Object, e As System.EventArgs) _
            Handles btnCrearSHA1.Click
   txtClaveSHA1.Text = _
	FormsAuthentication.HashPasswordForStoringInConfigFile(txtClave.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, eñes, etc., no se verán 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 próxima parte crearemos una página Web en la que podremos generar esos valores, pero solamente si el usuario es: "guille".

También añadiremos un control creado por nosotros para que contenga ciertos valores que podrán usar todos los usuarios (normalmente una serie de links que lo redirija a otras páginas de nuestro sitio).

Mientras publico la continuación de este artículo, puedes ir haciendo esto que he comentado, así practicas... je, je, je.

 

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.
Para saber cómo incluir la DLL en un subdirectorio del directorio bin, consulta este artículo de Gustavo Bonansea:
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- En el caso de que quieras tener las dos cosas... páginas "libres" y páginas "privadas" todo esto que te he explicado no te servirá de nada... lo siento.

5- La solución 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 páginas son las "privadas" o las "públicas", pero esto seguramente lo veremos en otra ocasión.

6- 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.
 

 

Bueno, lo dejamos aquí hasta el próximo día en que modifiquemos el código para usar las cosillas que te he indicado anteriormente... y seguramente añadiré algunas más, como por ejemplo usar una clase (o módulo) para contener cierta información global a todos los usuarios.

Hasta ese momento, espero que todo esto te vaya siendo de utilidad.
Esa es siempre la intención.


ejemplo  dos.
nota este es un material aportado por el ing.

Fabricio.A.Santillana, a quien le damos un gran saludo espero lo disfruten.

clic en este link
http://www.megaupload.com/?d=6B1CPLXR

 
  Hoy habia 1 visitantes (16 clics a subpáginas) ¡Aqui en esta página!  
 
=> ¿Desea una página web gratis? Pues, haz clic aquí! <=