Cyberexplorador's Blog

Autenticación de usuarios con PHP y MySQL sin programar nada – Manejo de sesiones

Pues es verdad, te voy a explicar cómo restringir el acceso a una página web mediante un usuario y contraseña o manejo de sesiones que estén en una base de datos de MySQL sin que programes una sola línea de código. Esto no significa que no necesites saber programación PHP, lo necesitas pero aquí te daré algunos pasos para que hagas todo más rápido y si conoces PHP pues lo mejores a tu gusto.

Las herramientas que vamos a utilizar son:

• Wamp Server
• Dreamweaver 8.0 o superior
• Mozilla Firefox o Internet Explorer o cualquier otro navegador

Una vez que tengamos instalado nuestro servidor web, en este caso Wamp Server vamos a proceder a explicar este tutorial.

Primero crearemos una base de datos, en este caso se llama «manejo_usuarios» ésta contiene una tabla llamada «usuarios» con dos campos: «user» y «password». Podemos agregar dos registros para hacer la prueba. Puedes crear la base usando phpMyAdmin que trae el propio WAMP. Entonces tenemos algo así:

Clic en la imagen para ampliar

Una vez creada la base de datos vamos a crear las páginas web, vamos a necesitar para esta prueba 3 páginas PHP. Recuerda guardarlas en la ruta C:\wamp\www para poder visualizarlas.  Bueno de hecho al abrir Dreamweaver (en este caso usaré la versión CS) antes de crear cualquier archivo debemos ir al menú «Sitio»  -> «Nuevo sitio». Yo dentro de la ruta C:\wamp\www creé una carpeta llamada «UsuariosenPHP» y dentro una carpeta llamada «images». Respecto a esto último hay que destacar que todas las imágenes que insertes en el sitio desde cualquier ruta se copiará automáticamente a la carpeta «images». Entonces llenamos con los datos necesarios:

• Nombre del sitio: Le puedes poner cualquier nombre
• Carpeta raíz local: Aquí escogemos la carpeta donde está el sitio, en mi caso C:\wamp\www\UsuariosenPHP
• Carpeta predeterminada de imágenes: La ruta de la carpeta que creamos antes C:\wamp\www\UsuariosenPHP\images

Entonces nos queda algo así:

Clic en la imagen para ampliar

Ahora dentro de la misma ventana nos vamos a «Servidor de pruebas», en Modelo de servidor seleccionamos «PHP MySQL» y en Acceso escogemos «Local/Red». En Carpeta de servidor escogemos la ruta del WAMP, en este caso C:\wamp y en prefijo del URL escogemos la ruta con la que cargaremos nuestro sitio web, para este caso sería: http://localhost/UsuariosenPHP/.

Nota: Si usas otro servidor web como XAMPP tienes que cambiar esas rutas.

Entonces nos queda algo así:

Clic en la imagen para ampliar

Damos clic en Aceptar. No olvides realizar este paso o tendrás problemas más adelante.

Ahora crearemos las páginas web. Como mencioné antes serán 3 páginas web sencillas las que necesitamos para esta prueba:

• index.php –> Esta página será la principal, tendrá un título y un enlace a la página ingreso.php
• ingreso.php –> Tendrá un formulario donde se ingresará el usuario y la contraseña para autenticarse.
• entrar.php –> Es la página donde ingresaremos si la autenticación fue exitosa.

Ahora veamos qué tiene cada página:

• index.php

Tendrá únicamente un título y un enlace a la página ingreso.php como se muestra en la siguiente figura:

Clic en la imagen para ampliar

• ingreso.php

Esta página contendrá un formulario que pida el nombre de usuario y la contraseña. El campo de texto del usuario se llamará «usuario» (sin comillas) y el campo de texto del password se llamará «contrasena» (sin comillas). Entonces tenemos algo así:

Clic en la imagen para ampliar

• entrar.php

Esta página tiene un título, tiene una tabla que dirá el nombre del usuario que accedió y tendrá un link que diga Desconectar que permitirá cerrar la sesión (ya explicaré cómo hacer eso):

Clic en la imagen para ampliar

Antes de validar los usuarios (que es lo que nos interesa) debemos hacer algo en esta página entrar.php. Debemos restringir el acceso a ella, pues la idea es que sea visible solo por quien inicia sesión. Bien para ello nos vamos al menú Insertar -> Objetos de aplicación -> Autenticación de usuarios -> Restringir acceso a página:

Clic en la imagen para ampliar

En el cuadro de opciones establecemos los siguientes parámetros:

Clic en la imagen para ampliar

Ahora cada vez que alguien quiera acceder a esa página sin haber iniciado sesión, será redireccionado automáticamente a la página ingreso.php.

• Validar usuarios

Bien ahora si vamos a validar el ingreso de los usuarios.  En mi base de datos tengo dos usuarios registrados que son:

• Usuario #1:   usuario = usuario1,   contraseña = prueba1
• Usuario #2:   usuario = usuario2,   contraseña = prueba2

La validación lo haremos en la página ingreso.php nos vamos al menú Ventana -> Bases de datos y se nos carga una ventana en el panel derecho, si seguiste los pasos anteriores al crear Nuevo sitio y al configurar el servidor de prueba, entonces no tendrás problemas en este paso.

En la ventana de Bases de datos damos clic en el símbolo + y luego en «Conexión MySQL». Se nos aparece una ventana y llenamos con los siguientes datos:

• Nombre de conexión: cualquier nombre, en mi caso se llama conexion_usuarios.
• Servidor MySQL: si la base de datos está en la misma máquina escribimos «localhost» (sin comillas).
• Nombre de usuario: por lo general el nombre por defecto es «root» (sin comillas).
• Contraseña: por lo general se deja el espacio en blanco.
• Base de datos: damos clic en «Seleccionar» y escogemos la base de datos que creamos, en mi caso «manejo_usuarios».

Nos quedaría así:

Clic en la imagen para ampliar

Ahora en la ventana «Bases de datos» aparece la base seleccionada con el nombre que le pusimos. Ahora nos vamos al menú Ventana -> Vinculaciones. En la ventana que aparece en el menú lateral damos clic en el signo + y escogemos «Juego de registros (consulta)» y escribimos los siguientes datos:

• Nombre: cualquier nombre que queramos darle a la consulta o recordset, en mi caso se llama «consulta_usuarios» (sin comillas).
• Conexión: seleccionamos la conexión que creamos anteriormente.
• Table: escogemos la tabla que contiene los datos, en mi caso «usuarios».
• Columnas: escogemos la opción todo, ya que queremos los datos tanto del usuario como del password.

Nos queda algo así:

Clic en la imagen para ampliar

Si damos clic en Prueba podemos ver todos los registros que tiene esta consulta. Damos clic en aceptar. Automáticamente Dreamweaver crea el código PHP, sin que hayamos programado absolutamente nada. Yo uso la versión CS o versión 8, aquí el código PHP se crea en el mismo archivo, pero en versiones superiores como la CS4 crea el código en un archivo separado.

Bien, una vez hecha la conexión a la base de datos vamos a validar el usuario. Nos vamos al menú Insertar -> Objetos de aplicación -> Autenticación de usuarios -> Conectar usuario. Se nos aparece un cuadro y establecemos los siguientes parámetros:

• Obtener entrada de formulario: aquí va el nombre del formulario, por defecto se llama form1, pero si le cambiaron de nombre va el nombre que le pusieron.
• Campo nombre de usuario: se escoge el nombre del campo de texto que contiene al usuario, en mi caso se llama «usuario» (sin comillas).

• Campo contraseña: se escoge el nombre del campo de texto que contiene la contraseña, en mi caso se llama «contrasena» (sin comillas).
• Validar utilizando conexión: escogemos el nombre de la conexión a la base de datos que creamos antes, en mi caso «conexion_usuarios» (sin comillas).
• Tabla: escogemos el nombre de la tabla que contiene los usuarios, en mi caso «usuarios» (sin comillas).
• Columna nombre de usuario: escogemos la columna que contiene los usuarios, en mi caso «user» (sin comillas).
• Columna contraseña: escogemos la columna que contiene las contraseñas, en mi caso «password» (sin comillas).
• Si la conexión es correcta, ir a: aquí escogemos la página web a donde se redireccionará al usuario si los datos ingresados son correctos, en este caso entrar.php.
• Si falla la conexión, ir a: aquí escogemos la página web a donde se redireccionará al usuario si los datos ingresados son erróneos, en mi caso ingreso.php.

Nos queda así:

Clic en la imagen para ampliar

Listo!!! Ahora para ingresar a la página entrar.php debemos validarnos en la página ingreso.php, no hemos escrito nada de código PHP, todo lo hizo Dreamweaver.

Ahora vamos a terminar el programa dándole los últimos toques a la página entrar.php.

Al crear la conexión a la base de datos se crea automáticamente en todas las páginas del sitio, pero las vinculaciones se deben crear una para cada página según se necesite. Entonces en la página entrar.php agregamos una nueva vinculación con el signo + y escogemos «Juego de registros (consulta)» y lo llenamos con los siguientes datos:

Clic en la imagen para ampliar

Ya sé lo que te estás preguntando ¿qué es eso de Filtro: user = Variable de sesión MM_Username? Bien ¿recuerdas que te dije que no necesitas programar nada, pero que si debes conocer algo de PHP? Bien, si te fijas en el código PHP que Dreamweaver creó en la página ingreso.php te fijarás que existe lo siguiente:

//declare two session variables and assign them
$_SESSION[‘MM_Username’] = $loginUsername;
$_SESSION[‘MM_UserGroup‘] = $loginStrGroup;

Pues ahí tienes la variable MM_Username, ésta variable contiene el nombre de sesión con el que navegarás por la página web, y el nombre de sesión es igual al usuario que tienes en la base de datos.  Entonces en esta consulta lo que estamos haciendo es obtener el nombre de usuario donde user (la variable que tenemos en la base de datos) sea igual a la variable MM_Username de inicio de sesión. Pues queremos imprimir ese dato en una parte de la página web, toma en cuenta que por esa razón en Columnas escogí Seleccionado y escogí la columna user únicamente, pues no me interesa imprimir la columna password, sería una gran error.

Bien una vez hecha esta consulta,  ponemos el cursor donde queremos imprimir el nombre del usuario y nos vamos al menú Insertar -> Objetos de aplicación -> Datos dinámicos -> Texto dinámico. Nos aparece un cuadro y escogemos la consulta que acabamos de hacer:

Clic en la imagen para ampliar

Te aparecerá un cuadro que contiene la consulta PHP.

Finalmente vamos a crear el enlace para cerrar sesión. Solo ponemos el cursor donde queremos que esté el enlace, y nos vamos al menú Insertar -> Objetos de aplicación -> Autenticación de usuarios -> Desconectar usuario. Nos aparece una ventana y llenamos con los siguientes parámetros:

Clic en la imagen para ampliar

Si en vez de la palabra Desconectar quieres, por ejemplo, las palabras Cerrar sesión, entonces la escribes, la seleccionas y sigues el procedimiento anterior.

Así se ve cuando ingresas al área restringida después de validarte, en este caso como usuario2:

Clic en la imagen para ampliar

Listo!!! Acabas de crear una página web que valida el ingreso de usuarios que están en una base de datos de MySQL sin programar nada.

Trata de probar los demás componentes que trae el menú Insertar -> Objetos de aplicación. Te ahorrarás mucho tiempo haciendo páginas web gracias a Dreamweaver.

Por cierto subí todos los códigos generados a esta página: http://mygnet.net/codigos/php/manejodebasedatos/validar_ingreso_de_usuarios_con_php_y_mysql.3046 ahí los pueden descargar.