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

  • @A.M.Garrido: Primero que todo, gracias por tu coment¿ario.

    Si probaste con el código que deje, lo más probable es que obtengas ese resultado porque el código no se esta ejecutando.

    ¿Lo estás probando de forma local o en algún servidor?, recuerda que si en el servidor donde lo ejecutas (ya sea local o alojamiento) debes tener soporte para ejecutar archivos PHP.

    Por favor dame más especificaciones de tu caso para poder ayudarte mejor.

    Saludos

  • Hola, gracias por la respuesta. Me he dado cuenta de que me he saltado un paso importante, el tema este del servidor (perdón por mi ignorancia, pero parto totalmente de cero). Me he descargado el WAMP5, aunque después de eso no he logrado dar ni un solo paso más. Lo veo como una auténtica odisea. ¿Qué hago con los archivos del formulario y el ingreso?

  • @A.M.Garrido: Los packs de servidores+bd+etc que uno instala en el computador (como Xampp, WAMP, etc), utilizan un servidor Web llamado Apache. Este servidor, utiliza una carpeta por defecto como ‘raiz de tu servidor’ que se llama “htdocs”. Esta carpeta la encuentras normalmente en c:\archivos de programa\wamp\apache\htdocs (o la ruta donde hayas instalado el servidor).

    Si bien esta es la carpeta que usa por defecto, tu la puedes modificar, editando el archivo de configuracion de apache llamado “httpd.conf” (localizado dentro de la carpeta de apache) y buscando la linea que dice ‘ServerRoot’ si no me equivoco, ahi cambias htdocs por la ruta donde tu prefieras guardar tus archivos.

    Dentro de esa carpeta debes guardar los archivos que quieras ejecutar en tu servidor web (en este caso el HTML y el o los PHP) y despues accedes mediante http://localhost en cualquier explorador Web.

    Espero que eso te ayude, si no, no dudes en seguir preguntando para poder asistirte con mayor precision.

    Saludos

  • Hola de nuevo y perdón por ser tan pesado. Me lié con el WAMP porque no me salían bien las cosas, entonces lo desinstalé y probé con el Xampp, pero me volví a liar y puse otra vez el WAMP, después de tanto marear la perdiz he descubierto que el Apache no me funciona porque tengo ocupado el puerto 80 (tampoco entiendo nada de puertos, caminos o canales…) ¿Qué hago? Esto es un follón, pero más o menos voy comprendiendo algunas cosas.
    El localhost me lleva a una página muy extraña, “Hauppauge EPG”, pone en la pestañita del Firefox, pero no se corresponde con mi formulario.
    Estoy más perdido que una cabra en un garaje.
    Gracias por tu atención. Un saludo.

  • @A.M.Garrido: No te preocupes por las preguntas, sigue haciendolo hasta que podamos ayudarte a resolver el problema por completo.

    Mira, sobre el puerto que usa el Apache, tu puedes utilizar cualquier puerto, no es necesario que sea exclusivamente el 80. Esto lo modificas, yendo al archivo de configuración de apache (el httpd.conf) que se ubica normalmente en c:\archivos de programa\wamp\apache\conf, lo abres con un editor de texto y vas a la linea que dice # Listen: y un poco más abajo debería aparecerte:

    Listen 80

    El 80 lo cambias por el valor del puerto que deseas destinar a apache. Luego bajas un poco más hasta la línea que dice # ServerName gives the name and port… y más abajo aparece:

    ServerName localhost:80

    Ahi el 80 lo cambias por el puerto que definiste.

    Otra cosa, justo abajo aparece la configuración del DocumentRoot. Esa es la ruta de la raíz donde se almacenarán tus archivos que se verán a través del servidor, eso lo puedes configurar a tu gusto, o usar la misma ruta que aparece ahi.

    Guardas y reinicias (si quieres puedes hacer una copia del httpd.conf en caso de cualquier error antes de guardar) y si apache corre bien, entonces no debería presentarte problemas al ver los archivos.

    Espero que eso te sirva, cualquier cosa no dudes en avisarnos.

    Saludos

  • gracias!!!, estaba buscando una informacion como esa,tratare de hacer la mia

  • hola q tal, antes q nada grax por estos tutoriales ya que tengo que diseñar una pagina con base de datos y con tus tutoriales creeme qme estas ayudando mucho, ando probando este y pues tengo un problema, esta todo hecho pero cuando valido el usuario pues aunque este bien me manda q el mensaje que esta incorrecto no se q pasa lo pruebo con la vista previa de dreamweaver pero sigue igual te dejo el codigo pa q veas y neta muchas gracias

    <?

    if ($_POST[“usuario”]==”dan” && $_POST[“password”]==”dan”) /* Reemplaza los *** por el nombre de usuario y contraseña que definas */
    {
    header(“Location:http://www.misslane.net“);
    exit;
    }
    else
    {
    USUARIO O CONTRASEÑA INCORRECTA
    }
    ?>

  • @-DAN-: Gracias por tu comentario.

    Te aconsejo que chequees los siguientes puntos:

    1.- Que el formulario este con Method: POST.
    2.- Que los nombres que le asignaste a los campos del formulario coincidan con los nombres de variables que estas llamando en el vector $_POST (o sea, usuario y password).
    3.- Que el servidor donde estás probando el código, ya sea local o alojamiento en Internet, tenga soporte para ejecutar archivos PHP.

    Si el problema no está ahí dejanos saber para seguir ayudandote.

    Saludos

  • pues creo q el problema es el sevidor (local en este caso)pero no c como hacerlo tengo xampp pero de ahi no c, yo pruebo las paginas con el vista previa de dreamweaver no c q estoy haciendo mal, espero y me puedan ayudar

  • @-DaN-: Ahí radica el problema. Te aconsejo que guardes los archivos (el .html y el .php) y los muevas a la carpeta raíz de tu servidor local Apache (usualmente en c:\Archivos de Programa\xampp\htdocs) y luego ejecutas con localhost en tu explorador favorito.

    Ahí debería funcionar sin problemas.

    Saludos

1 2 3 4 5 6 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