Uno de los aspectos principales a tener en consideración cuando construimos una Página Web es el tema de la seguridad.

Muchas veces queremos ofrecer contenidos que estén disponibles sólo para algunos usuarios o bien ofrecer la posibilidad de personalizar distintos aspectos de nuestro sitio dependiendo del tipo de usuario que ingrese. Para lograr esto, es esencial hacer un formulario de autentificación para así restringir el acceso a visitantes no autorizados y a la vez poder personalizar los contenidos según el usuario que ingrese.

En este tutorial, les enseñaremos a construir un sencillo sistema de autentificación, mediante el uso de HTML (lenguaje estándar de páginas Web), y PHP (lenguaje de programación para construcción de páginas dinámicas). Para el siguiente artículo no será necesario el uso de bases de datos ni conocimientos extensivos en lenguaje PHP.

Más información después del salto.

Cómo hacer una autentificación de usuarios en PHP

Nota: El siguiente sistema es un script bastante sencillo que no utiliza bases de datos, por lo mismo el formulario permite la autentificación de un usuario mediante un nombre y clave únicos. En un próximo tutorial les enseñaremos a realizar un sistema de autentificación multiusuario mediante uso de BD.

Como siempre, vamos a lo primero:

Implementos necesarios:

• Un editor de páginas Web: Para este tutorial se utilizó Adobe Dreamweaver CS3. (Pueden obtener una versión de evaluación, así como ver sus funcionalidades y requerimientos en la página del fabricante).
• Un servidor que soporte PHP en sus versiones 5 o inferiores. (Pueden instalar un servidor local si tienen los conocimientos, si no, hay una gran cantidad de sitios que ofrecen alojamiento gratuito con esa característica. Pueden encontrar algunos aqui).

Con la lista de materiales definida, manos a la obra:

Procedimiento:

Este pequeño sistema constará de 2 archivos: 1 archivo HTML donde tendremos el formulario de ingreso y 1 archivo PHP que validará el usuario y clave ingresados y redirigirá al usuario dependiendo del resultado.

Lo primero que haremos será construir el formulario de ingreso. Para este tutorial lo haremos en una página en blanco, pero tengan en cuenta que pueden insertarlo en cualquier página que ya tengan hecha.

Si no han usado nunca un editor como Dreamweaver, les recomiendo leer la sección “Ayuda de Dreamweaver” en el menú “Ayuda” para adquirir nociones básicas sobre los modos del programa y el espacio de trabajo.

1.- En Dreamweaver, abrimos un nuevo documento y seleccionamos el tipo que viene por defecto (Página en blanco > HTML > Ningun diseño) y le damos al botón “Crear”. Con esto se abrirá una página en blanco.

2.- Con la página creada, vamos al menú “Modificar” y seleccionamos “Propiedades de la página”. Dentro de esta opción podremos personalizar distitnos aspectos que tendrá la página, como el Título, color de fondo, color del texto, tipo de letra a usar, etc. Ahí seleccionen a su gusto, no influirá en el resultado. Para este tutorial se utilizaron los siguientes valores:

• Tipo de letra: Verdana, Arial, Helvetica, sans-serif.
• Tamaño de letra: 11
• Color de letra: Negro
• Título de la página: Como lo hago – Pagina de prueba

Nuevamente, las opciones pueden definirlas a gusto de Uds. A continuación, comenzaremos a construir el formulario de ingreso.

3.- Vamos al menú “Insertar” y seleccionamos “Formulario” y nuevamente “Formulario” desde el sub menú correspondiente. Esto insertará un formulario en la página, el cual será visualizado como un rectangulo de color rojo.

4.- A continuación hacemos click en el borde del rectangulo rojo (formulario), lo que provocará que en el inspector de propiedades (parte inferior del interfaz de trabajo) aparezcan las características del formulario que acabamos de crear. Aquí aparecen los siguientes valores:

• Form name: El nombre del formulario. Se puede elegir cualquiera.
• Action: Define la página objetivo a la que se irá cuando se presione “Enviar” en el formulario. Para este tutorial pondremos el valor “ingreso.php” .
• Method: Define el método de envio de datos que utilizará el formulario, puede ser mediante POST o GET. Para este tutorial utilizaremos POST por su seguridad sobre GET.
• Target: Define si la nueva página se abrira en una nueva ventana o en la misma entre otras opciones. No modificaremos este valor.

(Los parámetros Enctype y Class no influyen en lo absoluto, así que por ahora no los veremos)

¿Por qúe POST y no GET?

Los lenguajes de programación interpretados (Como PHP) utilizan algo llamado “Paso de parametros por URL”, mediante el cual envían valores de una página hacia otra. Cuando enviamos valores a través de un formulario, se pueden utilizar 2 metodos: POST y GET. La diferencia crucial es en la forma que cada uno opera, ya que GET utiliza la URL (dirección que vemos en el explorador) para pasar los valores enviados, lo que provoca que estos valores sean visibles (aún valores secretos como las contraseñas) y pueden quedar almacenados en el historial de páginas visitas. A pesar de que los valores son “camuflados” dentro de la URL, aún presentan una alta probabilidad de ser detectados por otra persona, especialmente si estamos en computadores compartidos. Por su parte, el método POST no pasa los valores por la URL, lo que implica que es un paso mucho más seguro y nuestra información está protegida.

5.- Ahora dentro del rectangulo del formulario, insertaremos una tabla para tener todo más ordenado. Para esto vamos al menú “Insertar” y seleccionamos “Tabla”. Esto abrirá las opciones de Tabla, donde seleccionaremos las opciones marcadas en la captura que viene a continuación. (El ancho de tabla lo dejamos de 5 pixeles para que no descompagine el trabajo que podamos tener hecho en la página, una vez insertada la tabla podemos ajustar el ancho con el mouse).

Después de insertar, ajustamos el ancho de la tabla y sus respectivas celdas según sea nuestra preferencia.

6.- Situandonos en la celda de la primera fila, primera columna (Superior izquierda) ponemos el texto “Nombre de usuario”. Luego pasamos a la celda que esta directamente abajo de esta y ponemos el texto “Contraseña”.

* Pueden realizar los ajustes que encuentren necesarios al texto (Negrita, Cursiva, colores, etc).

Ahora insertaremos los campos de texto donde se escribirá el nombre de usuario y contraseña.

7.- Situandonos en la celda que está a la derecha de donde escribimos “Nombre de usuario” (Superior derecha), vamos al menú “Insertar”, luego opción “Formulario” y finalmente “Campo de texto”. Esto abrirá una ventana de opciones en la que no modificaremos nada, presionamos “Aceptar” y deberia insertar una barra de color blanco y nuestra tabla debería verse así:

8.- Hacemos click sobre el campo de texto y se mostrarán las características en el Inspector de propiedades. Aparecen estos valores:

• Campo de texto: Nombre del campo de texto. Este parametro es importante, ya que es como reconoceremos el valor desde la página PHP que construiremos a continuación. Pondremos “usuario”. (Sin las comillas).
• Ancho de caracteres: Define el largo del campo de texto según número de caracteres. Dejaremos este valor en blanco. (Por defecto).
• Máximo de caracteres: Define cuantos caracteres pueden ingresarse al campo de texto. Lo dejaremos en blanco también. (Por defecto).
• Tipo: Define si es de linea simple, multilinea o de contraseña. Lo dejaremos en línea simple.
• Init val: Define el valor inicial del campo. Lo dejaremos en blanco.

Luego de definir los valores, añadimos otro campo de texto en la celda contigua a “Contraseña”. Fijamos los valores de la misma forma que el campo anterior, pero para Campo de texto ponemos “clave” (sin las comillas) y en Tipo elegimos “password”. Esto hara que al escribir sobre ese campo no se muestre el texto que se escribe sino que puntos (en Internet Explorer) o asteriscos (Firefox y otros).

9.- Ahora es momento de insertar el botón de Envio de datos. Para esto hacemos click al costado derecho de la tabla y presionamos Enter para hacer espacio de una línea hacia abajo (les aconsejo 2 veces Enter para que quede más espacio para insertar el botón). Luego vamos a “Insertar”, opción “Formulario” y finalmente “Botón” en el sub menú correspondiente. Esto hará aparecer un botón que dice “Enviar”. Este botón tiene las siguientes características:

• Nombre de botón: El nombre del objeto. Elijan cualquiera.
• Value: El texto que aparece sobre el botón. Enviar está bien.
• Action: Para definir si es un botón de envío o de reseteo de datos. Lo dejamos como envío.

Con esto nuestro formulario esta listo. Guardamos la página con el nombre que quieran y procedemos al siguiente paso, que es crear el archivo PHP que validará los datos.

10.- Creamos el archivo PHP de la misma forma que el HTML que acabamos de hacer (Página en blanco > PHP > Ningún diseño) y presionamos “Crear”. Aparecerá un documento en blanco en pantalla.

11.- Vamos a la vista de “Código” (hasta ahora habíamos estado trabajando en la vista “Diseño”, pueden ir mediante el menú “Ver” y la opción “Código”) y antes de la etiqueta <HTML> insertamos este código.

Vamos a explicar por parte:

Primero, tenemos “<?” , esto le indicará al interprete del servidor (el encargado de ejecutar la página PHP) que se da inicio a una porción de código.

Luego, tenemos una iteración condicional “if”, clásica de los lenguajes de programación la cual le indica al interprete que si se da esa condición (la que esta entre parentesis) se debe ejecutar la instrucción que se encuentra dentro de las llaves.

La condición nos dice if($_POST[“usuario”]==”***” && $_POST[“clave”]==”***”) , lo que básicamente dice “Si el valor usuario almacenado en el vector POST (vector que almacena todos los valores enviados por un formulario con método POST, como el que utilizamos nosotros) es igual a *** (en programación la igualdad normalmente se hace con 2 signos igual) y si el valor clave almacenado en el vector POST es igual a ***, entonces ejecute la acción.

Nota: Los valores *** pueden cambiarlos por el nombre de usuario y contraseña que uds. definan.

La condición que se ejecutará en caso de que todo sea correcto sera “header(“Location: URL de la página que queremos mostrar si es correcto”); exit;” lo cual significa que redirigirá a esa página y saldra de la iteración.

La iteración siguiente “else” es en caso de que no se cumpla alguno de esos valores (que hayan puesto mal los datos o dejados en blanco), en ese caso se ejecutará la instrucción a continuación, la cual asignará a la variable $valido el valor “no”.

Y finalmente se cierra el código mediante “?>”

Con esa porción de código lista, nuestra página de PHP al recibir los datos los validará y tomará uno de los 2 caminos, nunca los 2 o ninguno.

12.- Ahora ubicamos la etiqueta <BODY> y bajo ella insertamos el siguiente código:

USUARIO O CONTRASEÑA INCORRECTA

Este código usará nuevamente una iteración “if” en la que preguntará si el valor de $valido es “no”, en caso de que lo sea, mostrará el mensaje “USUARIO O CONTRASEÑA INCORRECTA”. Si uds. lo desean, a continuación de ese mensaje pueden insertar un vínculo para que vuelvan a la página de autentificación y lo intenten de nuevo.

Y con esa página lista, tienen su sistema básico de autentificación.

Tal como establecimos al principio, este es un sistema para usuario unico y con funcionalidades bastante básicas, por lo que es principalmente útil si sus conocimientos en páginas web y especialmente lenguajes de programación es limitado. Sientanse libres para modificar todo lo hecho en este tutorial para ir obteniendo distintos resultados.

En una próxima ocasión, haremos un tutorial paso a paso para hacer un sistema de autentificación con uso de bases de datos, lo que permite poder tener a multiples usuarios ingresando al sitio sin la necesidad de un nombre de usuario ni contraseña únicos, lo cual es bastante útil si queremos otorgar distintos contenidos, privilegios y personalizaciones dependiendo del usuario que ingrese.

Esperamos que este tutorial haya sido de utilidad para Uds. y como siempre, no duden en hacernos saber todas sus dudas y/o problemas para ayudarlos en lo que podamos.

Muchas gracias por leer, y será hasta una nueva oportunidad.