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.
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:
Con la lista de materiales definida, manos a la obra:
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:
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:
(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:
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:
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.
1:19:35 pm
@Rafael: Revisa la respuesta que le dimos a Patricio Asencio más arriba.
Saludos
12:22:10 am
Me gustaria saber si sabes como hacer para que el formulario envie un correo al usuario y le pida que autentifique que el pidio el registro en dicho lugar y que luego de verificado (usualmente mediante un link) el registro, entonces le envie un mail al usuario con los datos ingresado y que su registro fue un exito.
Quiero hacerlo en flash, pero si sabes la funcion en php luego puedo averiguar como adaptarlo para que funcione con flash.
Muchas gracias.
11:50:44 am
@saimeloner: Anotaremos tu petición.
Por mientras te invitamos a revisar un formulario de registro en PHP que hemos realizado. Se encuentra en la categoría Diseño web > PHP.
Saludos
8:04:32 pm
Hola, el tutorial me parece muy interezante y es justamente lo que necesito para una modesta web que estoy creando. La verdad que tengo un problema bastante grande, 1º corro con la desventaja de no comprender muy bien al codigo html, pero con el tutorial se me han aclarado muchas cosas, y ademas esta muy bien explicado, me parece genial la idea de, yo poder definir un usuario y contraseña o es lo que entendi en la linea:
if ($_POST[“usuario”]==”***” && $_POST[“password”]==”***”) /* Reemplaza los *** por el nombre de usuario y contraseña que definas */
me imagino que yo modifico los * por cualquier usuario y contraseña que yo quiera, esto es asi???, me refiero a que yo defino mis usuarios y yo les puedo brindar las contraseñas a mi gusto verdad??.
Lo que no me queda muy en claro es, si yo tengo mas de un usuario, debo crear mas paginas “ingreso.php”, o como defino a todos esos usuarios que quiero tener???, ademas me gustaria que al ingresar su login, los lleve a cada uno a una pagina unica, es decir directamente a una informacion que yo les quiero brindar unica y distinta para cada uno de ellos, se entiende lo que necesito??, se puede hacer???.
Muchas gracias por tu atencion y te agradesco de antemano p0or la ayuda. SALUDOS
10:56:42 pm
@Luis: Estas en lo correcto, los * los cambias por lo que quieras.
Si deseas tener mas de un usuario lo mas conveniente es utilizar bases de datos, lo cual hemos cubierto en este tutorial.
Para las redirecciones también te sirve ese tutorial.
Saludos
5:37:47 pm
[…] botón para enviar los datos. Si tienen dudas de como crear un formulario, les recomendamos revisar este tutorial donde hemos cubierto el […]
9:05:52 pm
Buenas noches.
Llevo varias horas trabajando con este tutorial y tras árduos trabajos he conseguido poco. Me leo todo pero no consigo resolver.
Pido ayuda, por favor. Estoy un poco agotado.
He creado un formulario con Dreamweaver. Bien.
He adaptado el “ingreso.php” pero no consigo acceder a la página que hay en ingreso. Me ocurre que siempre me sale Usuario incorrecto aunque ponga las contraseñas bien.
La dirección es: http://www.esparte.pympc.es/fundacioncrece/fentrada1-2.html y el archivo “ingreso.php” está en http://www.esparte.pympc.es/ingreso.rar
Saludos y gracias de antemano.
5:30:30 pm
Todo lo he hecho, pero por mas que leo tu manual, nose en que parte el boton enviar va a llamar a la pagina PHP en donde puse el usuario y password, de antemano gracias por tu ayuda.
5:36:39 pm
Bueno ya le entendi un poco y realize los cambios respectivos, pero ahora el problema que me da es que cada ves que le doy al boton Enviar me sale la ventanita como si fuera a descargar algo y si le doy descargar me descarga el archivo PHP.
8:55:08 pm
@Jesús María: Revisamos tu código, fijate en ingreso.php que estás preguntando por $_POST[“password”] y el campo de contraseña en tu formulario está nombrado como clave. Cambia el post por clave o en el formulario por password y se solucionará el problema.
Saludos