PHP

Ξ 76 comentarios

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

por Xabadu
Cómo hacer una autentificación de usuario en PHP

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.

Comparte este tutorial

El culpable de todo esto

Las tardes gloriosas de domingo y las grandes ovaciones a estadio lleno, no son algo extraño para Xabadu. Luego de ser descubierto a los 4 años en un partido de barrio por los ojeadores del gran Aviación F.C., sacudió el mercado nacional al ser traspasado en $500 pesos chilenos (1 USD) y 3 coca colas al renombrado Estrella Blanca de Lolol. Luego de una impresionante carrera por equipos como Lozapenco, Santa Cruz, Deportivo Lago Chungará y una incursión en la 3a división del futbol de Kazajstan, su record imbatible hasta la fecha de 1257 goles en 20 partidos lo llevo a ser elegido como uno de los arqueros más recordados en la historia pelotera nacional. Una lesión en el colmillo superior derecho lo llevó al retiro el año 2003, pero está de vuelta y sin duda que su jerarquía y experiencia internacional será un gran aporte.

En los barrios marginales se le conoce como: Xabadu

Comentarios en Facebook

76 Comentarios

  • pero broder hay que hacer manejo de sesiones eso no te asegura ninguna pagina de hecho si la pagina a la que redireccionas no maneja la sesion cualquiera la podria acceder directamente por url

  • @Ziño: Gracias por tu comentario. Tienes toda la razón en lo que dices, de hecho inicialmente iba a hacer un pequeño manejo de sesión para este “sistema”, pero la idea inicial era hacer una autentificación sencilla más que nada para introducir al funcionamiento del paso de parametros por URL en páginas dinámicas.

    El tutorial que estamos preparando como continuación a este (el multiusuario con uso de bases de datos) llevará manejos de sesiones y asignación de valores al vector de sesión para restringir el acceso a usuarios que obtengan la URL directamente.

    Saludos.

  • tengo una duda… cuando tienes todo esto… como haces para validar la contraseña y si es correcta te salte a la otra pagina que tu quieres restringir, gracias!!!

  • @misslane: Mira un metodo que me gusta utilizar es hacer uso de 3 paginas:

    1.- Una pagina con el formulario en HTML
    2.- Una pagina de validacion
    3.- Una pagina de redireccion

    La 1 lleva a la 2 y posteriormente a la 3.

    En la pagina 2, redireccionamos si o si mediante una etiqueta meta como esta:

    Esa etiqueta, insertada antes de la etiqueta redirigirá si o si pasados 3 segundos a la pagina3.php.

    Entonces, en tu 2da pagina, la de validacion, cuando confirmes si el nombre de usuario y contraseña estan correctos, puedes marcar una variable en el vector de sesión de esta forma:

    $_SESSION["correcto"]=1; (este codigo va dentro de la etiqueta PHP cuando validas).

    Y como a los 3 segundos ira a la pagina3.php, en esa pagina puedes insertar este codigo al principio:

    < ? session_start(); if($_SESSION[”correcto”]==1) { header(”Location: pagina-de-destino.php”); } else { unset($_SESSION[”correcto”]); session_destroy(); header(”Location: pagina-de-formulario.html”); } ?>

    Lo que hara eso es confirmar si la validacion fue correcta, y en ese caso lo enviara a la pagina que quieres mostrar, de lo contrario borrara la variable de sesion y devolvera al usuario a la pagina del formulario.

    Te recomiendo ver otro tutorial que subimos llamado “Como hacer una autentificacion multiusuario con PHP y MySQL”, ahi esta explicado completo ese metodo.

    Espero que te sirva eso, cualquier otra cosa no dudes en decirnos para ayudarte.

    Saludos

  • muchisimas gracias :D

  • lo he intentado pero na hahaha que no me entero
    alguien conoce aluna plantilla scritp con lo del login para descagarlo…. asi veo como se hace todo

    es que lo que intento hacer es que cuando me envien un mail darle el usuario y password personalemnte pero siempre sera el mismo…

    es mas facil asi???

  • @misslane: Para lo que tu quieres hacer este ejemplo sirve a la perfección, ya que los usuarios ingresarán a la página con tu formulario y ahi deberán ingresar el nombre de usuario y password que tu les des, entonces en este trozo de codigo:

    < ? if ($_POST[”usuario”]==”***” && $_POST[”clave”]==”***”) { header(”Location: URL de la página que queremos mostrar si es correcto”); exit; } else { $valido=”no”; } ?>

    Solo debes cambiar los asteriscos de $_POST[”usuario”] y $_POST[”clave”] por el nombre de usuario y contraseña que tu definas y luego dentro del “header” pones la dirección de la página que quieres mostrar a los que se logueen correctamente. En caso de que no pongan bien el usuario y/o la contraseña, se activará la variable $valido=”no” y les desplegará el mensaje de error.

    Por ejemplo, si defines el codigo asi:

    < ? if ($_POST[”usuario”]==”misslane” && $_POST[”clave”]==”auto”) { header(”Location: google.com”); exit; } else { $valido=”no”; } ?>

    Lo que hara, es que si en el formulario de ingreso, pones “misslane” de nombre de usuario y “auto” de contraseña, te redirigirá a google.com (es recomendable poner la ruta completa de la URL), de lo contrario si alguno de los 2 datos está mal, te desplegará el mensaje de error y no te redirigirá a la página. Ahi si quieres puedes poner un link para que vuelvan a la página del formulario.

    Espero que eso te sirva, si no, no dudes en seguir comentando y te ayudaremos a buscar una solución.

    Saludos

  • Hola esta buenisimo tu material, estoy interesada en el proximo “multiusuario con uso de bases de datos”. Te agradeceria la informacion. Gracias

  • @Karen Sanchez: El tutorial de autentificacion multiusuario con uso de bases de datos ya lo subimos, esta realizado en PHP y MySQL, puedes revisarlo en esta dirección:

    http://www.comolohago.cl/2008/05/como-hacer-una-autentificacion-multiusuario-con-php-y-mysql/

    Espero te sirva ;)

    Saludos

  • Hola fernando, de verdad no se que pasa conmigo, no veo en donde tengo el error, hice cada uno de los pasos paro al darle al boton enviar me muestra es el codigo de ingreso.php. No logro que me muestre la pagina que deseo. Te agradeceria si me pudieras ayudar y gracias de antemano

1 2 3 8

Deja un comentario

Ingresa con tu cuenta de Cómo Lo Hago

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Gente linda que nos quiere

Donde mas estamos