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

  • bueno he conseguido algo mas pero me pone esto
    Parse error: syntax error, unexpected ‘:’ in ingresar.php on line 6

  • en la linea 6 tengo esto

    header(”Location:http://www.misslane.net”); exit;

  • CHICOS QUE AL FINAL ME SALIO!! ALELUYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

  • @misslane: Felicidades, nos alegramos harto que te haya resultado 😀

    Cualquier otra duda que vayas teniendo no dudes en hacerla llegar para asistirte y te recomendamos chequear los otros tutoriales de Web y PHP que hemos ido subiendo.

    Saludos

  • […] como anunciamos en el pasado tutorial “Como hacer una autentificación de usuario en PHP”, hoy traemos esta segunda parte en la que haremos un sistema de autentificación más evolucionado, […]

  • Estimado:
    he descargado el ejemplo que has dejado. Pues bien, le cambié el nombre de usuario(*** por 123) y contraseña (*** por 123). También le cambié el header. Cuando pongo los datos de acceso equivocados me arroja “USUARIO O CONTRASEÑA INCORRECTA”, lo cual está bien. No obstante, cuando pongo los datos de acceso correctos (usuario:123 y pass:123, me arroja el siguiente error:

    Warning: Cannot modify header information – headers already sent by (output started at /home/expoar/public_html/ingreso.php:1) in /home/expoar/public_html/ingreso.php on line 5

    Aqui te dejo el php entero. Porfa pégale una mirada para ver que está mal.

    Como lo hago – Ejemplo

    USUARIO O CONTRASEÑA INCORRECTA

    te dejo el link acá por si decides verlo por ti mismo.
    http://www.expoartes.com/formulario.html

  • aca el php correcto..no se pq se pegó eso.
    (lo encerré en comillas para ver si se pega bien)

    Como lo hago – Ejemplo

    USUARIO O CONTRASEÑA INCORRECTA

  • no se pega bien….bueno…

  • @Juan: Lamentablemente el sistema de comentarios no muestra el codigo. Accedi a tu pagina y vi el error, pero no puedo descargar el .php de ahi asi que no puedo revisar en detalle el código.

    ¿Te molestiaria guardar el codigo de ingreso.php en un archivo de texto y dejarmelo ahi para descargarlo?, asi le echo una ojeada y vemos donde esta el error.

    Saludos

  • Hola, tengo un problemilla… una vez que lo he hecho todo, cuando pulso el botón enviar del formulario y se me abre el ingreso.php, únicamente me sale lo que hay en BODY, es decir, “USUARIO O CONTRASEÑA INCORRECTA”.
    ¿A qué se debe esto y cómo podría solucionarlo?
    El usuario y la clave los relleno correctamente, pero la autentificación siempre actúa como si rellenase los campos con datos incorrectos. He probado con el ejemplo que dejaste para Karen, pero sucede lo mismo. SOCORRO!!
    Un saludo.

1 2 3 4 5 8

Deja un comentario

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

Gente linda que nos quiere

Donde mas estamos