Hazlo Fácil: Login en ASP.NET con LoginControl

¡Hola de nuevo! Hoy les traigo un nuevo post de esta nueva serie de tutoriales "Hazlo Fácil", los cuáles tienen la finalidad de enseñarles cómo hacer esas tareas cotidianas en nuestros proyectos de manera sumamente sencilla, y ¡Oh sorpresa! De nuevo .NET, y no es que sea un lenguaje sumamente sencillo (algunas cosas sí lo son). También estaremos publicando tutoriales sobre otros lenguajes, herramientas y/o ambientes de desarrollo con la misma mecánica. Mientras tanto, a lo que nos compete...

Creando el Login
Lo primero que haremos será irnos al cuadro de herramientas en el menú lateral izquierdo y en la pestaña de Inicio de sesión encontraremos el control Login, lo seleccionamos y lo arrastramos hasta nuestra página aspx.

Una vez hecho esto le añadiremos dos propiedades a nuestro control:

• La primera es DestinationPageUrl, aquí indicamos la página a la cual nos redirigirá nuestro login en caso que sea exitoso.
• La segunda es el evento OnAuthenticate el cuál lo definiremos más adelante en nuestro código .cs.

Activamos la vista de diseño y debemos poder observar una vista previa de nuestro control de login:

Ahora si, vamos al código. Antes de hacer algo en el evento Authenticate, debemos tener un método que valide la existencia de las credenciales introducidas por el usuario, que pueden venir desde una base de datos o un archivo de texto, para este ejemplo simplemente lo compararemos con simples cadenas para enfocarnos en el funcionamiento del control. Para esto crearé un método validarLogin que recibe el usuario y contraseña a validar, y que devolverá un true en caso de éxito, o un false en caso contrario.

Ahora si, en nuestro evento del control loginMoztro, añadiremos la siguiente línea de código:

Lo que hacemos aquí es usar nuestro parámetro e (quien nos proporciona las propiedades del evento Authenticate) para setear la propiedad Authenticated (un booleano que determina si el logueo ha sido exitoso) con el valor devuelto por nuestro método validarLogin, al cual le pasamos como argumentos el UserName y Password de nuestro control moztroLogin.

Ya por último, sólo nos queda validar si el valor devuelto por nuestro método validarLogin y que guardamos en e.Authenticated es verdadero para poder redirigir al usuario a la pantalla de bienvenida. El código del evento nos quedaría entonces así:

Haremos uso de la clase FormsAuthentication y su método RedirectFromLoginPage para redirigir al usuario logueado a la página que especificamos en DestinationPageUrl. Como pueden observar, al método RedirectFromLoginPage le estamos pasando 2 argumentos: el primero es el nombre del usuario logueado y el segundo indica si el usuario seleccionó la casilla de Recordar sus credenciales.

Y con esto ya tenemos listo nuestra pantalla de Login.

Añadiendo Detalles
Fácil, no? Ahora podemos ir añadiendo los detalles, por ejemplo, yo le añadiré un link para cerrar la sesión, ésto lo haré en mi MasterPage, para que de esta manera aparezca en el encabezado de todas mis páginas aspx.
En el MasterPage.aspx:

En el MasterPage.cs, en la etiqueta lblSaludo le seteamos un mensaje de bienvenida al usuario logueado, y en el evento click de nuestro LinkButton cerrar sesión hacemos uso nuevamente de la clase FormsAuthentication, primero del método SignOut, que cierra la sesión de nuestro usuario, y luego del método RedirectToLoginPage, que nos redirige a la pantalla de logueo.

Aquí puede ocurrir que los redirija a la pantalla de Login que trae por defecto los proyectos de Visual studio. Para cambiar la pantalla de Login por defecto nos vamos al Web.Config y busquen el siguiente código:

En loginUrl cambien la url por defecto y pongan la de su pantalla de Login.

Añadiendo Seguridad
Y cual sería el chiste de añadir una pantalla de login sino evitamos que los usuarios puedan acceder directamente a las páginas con la url, saltándose así nuestro pequeño, hermoso y recién creado login. Pues para evitar que puedan hacer esto tenemos que ir nuevamente al Web.Config y añadir lo siguiente:

El código anterior que usuarios no logueados puedan accesar directamente con la url a las páginas de nuestro sistema, éste código debemos ponerlo dentro de las etiquetas de system.web. Por obvias razones, el código anterior también evitará que usuarios no logueados visualicen nuestra pantalla de login ¿Entonces cómo se loguearán? Pues tendremos que darles acceso únicamente a la pantalla de login con el siguiente código:

El primer código es el que otorga acceso a usuarios invitados únicamente a nuestra pantalla de logueo. Atención con la segunda parte, observen que estamos otorgando acceso a nuestra carpeta Styles, esto lo hacemos porque el deny users=? denegó el acceso a todos los recursos de nuestro sistema incluido todos nuestros css, por lo que si damos acceso únicamente a la pantalla de login, ésta aparecerá sin estilos.
NOTA IMPORTANTE: Estos dos últimos códigos debemos ponerlos fuera de las etiquetas system.web a diferencia del primero que lo pusimos dentro de ésta.

Y eso es todo, ahora tenemos un login completo hecho de manera muy sencilla. Espero haya sido de su agrado. Saludos y hasta la próxima. ;)

Descargar el proyecto MoztroLogin.zip