Aplicaciones Web: Crear un Login seguro

candado
Cada vez son más los desarrolladores que usan Xojo para crear aplicaciones que pueden contener información privada. Esto significa que cada vez es más importante asegurarse de que las aplicaciones web desarrolladas estén protegidas con un certificado SSL y algún tipo de autenticación que garantice que el usuario es realmente quien dice ser.

Nota: Para seguir este tutorial, tendrás que crear una aplicación CGI y ejecutarla sobre un servidor que tenga un certificado SSL instalado. De lo contrario, obtendrás un error.

Por lo general, una pantalla de acceso solicita un ID de usuario de algún tipo, ya se trate de una dirección de correo electrónico o cualquier otro tipo de identificación única, como pueda ser un número de cuenta), así como una contraseña introducida por el propio usuario o bien generada automáticamente.

Un buen método de crear pantallas de acceso en Xojo es mediante el uso del Diálogo Modal sobre una página en blanco, dado que no hay duda de qué precisas que haga el usuario a conteinuación. Esto también te permite lidiar con las complejidades asociadas con el proceso de acceso sin que se vea interferido por algún otro código.

WebLoginDialog

Algo a tener en cuenta: Las conexiones SSL son notablemente más lentas en comparación con las conexiones no SSL debido que a no se permite el cacheado de los datos, de modo que probablemente no quieras que toda tu aplicación sea segura (como si estuvieses creando un sitio web de acceso público con determinadas funciones disponibles sólo para los miembros de pago). Lo que necesitas es la capacidad de cambiar de no SSL a SSL cuando un usuario llegue a la pantalla de acceso.

Cambiar seguridad SSL

En este ejemplo, la pantalla de acceso es simplemente una página vacía que muestra un diálogo web en el evento Shown. Antes de llegar a ese punto, has de comprobar si la conexión es segura. Para ello, introduce el siguiente fragmento en el evento LoginPage.Open:

' Asegúrate de que la conexión del usuario es segura,
' Si no es así, deja que el navegador cargue la aplicación de forma segura
If Not Session.Secure Then
Dim host As String = Session.Header("Host")
Dim url As String = "https://" + host
ShowURL(url)
End If

La anterior acción llevará al usuario nuevamente a la página web por defecto y no a la página de acceso, de modo que has de indicar a la sesión como gestionarlo. En el evento WebSession.Open():

If Self.Secure Then
LoginPage.Show
End If

En este caso el código asume que un usuario final está accediendo a la app (es decir, creando una nueva sesión) y que se está conectando de forma segura, de modo que se redirige a la página de acceso.

Gestión de Cookies: Recuérdame

Si observas la captura de pantalla, verás la casilla de verificación “Recuérdame”. Por lo general, esto se utiliza para recordar el ID del usuario y facilitarle así próximas conexiones recordándole cual era la contraseña. Esta función utiliza una característica del navegador denominada Cookies y que almacena un fragmento de información en el ordenador que esté usando el usuario (asuminedo que las Cookies estén activadas, claro está).

NOTA: Es mejor no recordar la contraseña del usuario, dado que si se selecciona esta casilla de verificación en un equipo público (como en una Biblioteca o en una cafetería que proporcione ordenadores para conectar a Internet), la cuenta del usuario podría verse comprometida.

Para añadir funcionalidad a la casilla de verificación, es preciso utilizar dos fragmentos de código. En LoginDialog.Shown:

If Session.Cookies.Value("username") <> "" Then
UserNameField.Text = Session.Cookies.Value("username")
RememberMeCheck.Value = True
PasswordField.SetFocus
End If

En primer lugar se comprueba si se ha definido la cookie “username”, y en caso de que así sea se copia su valor en el campo de texto Username, se activa la casilla de verificación RememberMe y se pasa el foco al campo Password, básicamente como facilidad al usuario y que no precisen hacerlo manualmente.

A continuación, en el evento Action() del botón Login:

DoLogin

Entonces se crea el método DoLogin en LoginDialog:

If RememberMeCheck.Value Then
Session.Cookies.Set("username", UserNameField.Text)
Else
Session.Cookies.Remove("username")
End If

' Ahora valida las credenciales y, si son correctas, puedes cerrar el diálogo
' y mostrar la página principal.
If ValidateCredentials Then
Self.Close
MainPage.Show
Else
MsgBox(“El nombre de usuario y contraseña no coinciden.")
End If

Puede que te estés preguntando por qué deberías crear un método separado para lo que podría estar perfectamente en el evento Action. El motivo es que puede que quieras cerrar este diálogo desde otra ubicación (ver más adelante); pero primero, cuando el usuario hace clic en el botón de acceso, compruebas el valor de la casilla de verificación RememberMe. En el caso de que sea True, entonces se define la Cookie Username con lo que se haya introducido como nombre de usuario. Si es False se elimina la cookie (de otro modo los usuarios no podrían eliminar la cookie al desactivar la casilla de verificación).

Capturar el retorno

Una última cosa, los usuarios esperan que las cosas funcionen tal y como ocurre en el resto de las aplicaciones web, y eso significa que cuando pulsas la tecla de Retorno en el teclado, por lo general se espera que ocurra la acción de login. Puedes hacer eso añadiendo el siguiente fragmento de código al evento KeyPressed de la ventana:

If Details.KeyCode = 13 Then
LoginDialog1.DoLogin
End If

¡Y esto es por lo que pones el código del evento Action en un método separado! Ahora, cuando el usuario escriba su nombre de usuario y/o contraseña y pulse la tecla retorno, el diálogo se cerrará tal y como si hubiesen pulsado el botón de Login ellos mismos.

2 comentarios en “Aplicaciones Web: Crear un Login seguro

  1. Hernan Janeiro

    La informacion que publicas es de muchabutilidad, estoy comenzando con xojo, y es muy didactica tu pagina
    Te dejo una consulta
    Como puedo hacer un strecht con las imagenes en una aplicacion web?

    Gracias

    1. Javier Rodriguez

      Gracias.

      ¿Te refieres a que una imagen de fondo se adapte a todo el ancho de la página web?

      Si es así, añade a la página web un control ‘Page Source’. A continuación, selecciona el control Page Source recién añadido y pulsa sobre el botón “Source” en el panel Inspector asociado con dicho control, e introduce el código fuente que define el id #bckg para el atributo CSS background:url apuntando a la dirección (URL) en la que se encuentre la imagen en cuestión (te paso el fragmento de código a tu email).

      Por último, elige la opción “After Content” en el menú desplegable “Location” del Inspector.

      Javier

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *