Registro de usuarios desde cero.

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 1]

Saludos compañeros.

NOTA: Si sigues este tutorial y no entiendes alguna cosa, puedes preguntar aquí mismo. No obstante este es un hilo de investigación, a partir del cual quiero construir con vuestra ayuda un sistema de registro que funcione, sea seguro y tenga las características que la mayoría buscamos. En cuanto termine la investigación y tengamos algo definitivo lo pasaré perfectamente explicado a las páginas de CCTW por lo que permitidme en este hilo que me salte algunas explicaciones que para los más entendidos pueden parecer demasiado obvias, oki?

La idea de este hilo es empezar por un sistema de registro de usuarios bien sencillito. Nos vale con que simplemente funcione. Una vez bien testeado pasaremos a investigar cómo aplicarle los cambios necesarios para, hacerlo seguro, fiable, añadir detalles en AJAX para que no sea necesario la recarga de las páginas en las operaciones de logeo y log out, y en definitiva, todo lo que se nos ocurra por el camino, oki?

El objetivo es llegar a crear lo que necesitamos, testearlo bien y, en base a los resultados crear unas lecciones detalladas para añadirlas a las páginas de CCTW.

He creado este subforo aparte solo para este tema, vista la cantidad de mensajes que tratan este tema y la cantidad de dudas que han ido surgiendo en estos últimos años.

Aunque se puede realizar con diversas tecnologías y lenguajes, nosotros nos basaremos en el lenguaje Php (y resto de lenguajes compatibles que puedan otorgarle alguna aplicación que nos guste9 y las bases de datos MySQL que son las más comunes y que están disponibles en los servidores gratuitos que os ofece CCTW para vuestros testeos.

Si te animas, eres bienvenido. [;)]


SI SIGUES ESTE TUTORIAL, NO APLIQUES NADA EN TU WEB HASTA QUE LEAS QUE EL FORMULARIO ES TOTALMENTE SEGURO!!

Temas Pendientes
- Mejorar aún más la seguridad de la aplicación
----- Denegar permiso de registro tras X intentos fallidos, durante un tiempo determinado.
- Diseñar un panel de usuario en el que pueda ver, añadir y modificar datos de su cuenta.
- Posibilidad de que el usuario pueda subir un archivo (foto o logo) para su perfil.
- Validar los datos recopilados por los formularios. (parte 19)
----- Limitar la cantidad de carácteres que admite cada campo del formulario (hecho en parte 16)
----- Verificar que el correo tiene forma de correo (hecho en parte 14)
----- Verificar que el correo está realmente dado de alta, que funciona.
----- En la función de validación de email, cambiar ereg() que está obsoleto por preg_match().
- Evitar registro con el mismo email (hecho en parte 12)
- Evitar registro con el mismo nick (hecho en parte 11)
- Añadir verificación de contraseña (escribirla dos veces en el formulario de registro) (hecho en parte 13)
- Aplicar encriptacion de contraseñas, no deben guardarse tal cual en la tabla de la base de datos. (hecho en parte 17)
- Aplicar funciones AJAX para evitar la recarga cuando se añada esto a una web.
- Aplicar estilos CSS a la capa del sistema de registro de usuarios.
- Añadir opción de rescate de contraseña (o mejor generación de una nueva?)
- insertar todo esto en una web, en una capa en una esquina, por ejemplo.
- Crear un "autoejecutable" que instale todo el sistema en un servidor.
- Añadir un mensaje de verificación para validar la cuenta. (hecho)

(Cualquier otra mejora que se te ocurra, no dudes en decírnosla en este mismo hilo, no te cortes!)

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 2]

El primer paso es disponer de un hosting o espacio web con una base de datos MySQL disponible y en el que funcione el código PHP.

Si no tienes un hosting así aún, puedes conseguir uno para tus pruebas en CCTW.

Una vez que tienes el hosting, tienes que crear la base de datos. Se crea vacia (sin tablas), dándole un nombre y ya de paso, se crea un usuario con clave con poderes para retocar sus valores. Está creo que muy bien explicado en las lecciones de CCTW sobre creación de bases de datos. De todas formas si algo no se entiende me lo decís acá mismo e intento aclararlo mejor.

Para el nombre de la base de datos escoged por ejemplo, reguser y quizás así te lies menos al seguir las lecciones. Es probable que aunque pongas ese nombre a la hora de crearla, el servidor le añada algo más delante, quedando finalmente el nombre de la base de datos como, nombredetuhosting_reguser. Si es así, toma nota, pues será ese el nombre completo de la base de datos creada.

Antes de seguir con esto del registro de usuarios, tienes que tener bien claros tres datos, pues son imprescindibles para seguir con esto:

Nombre de la base de datos: tunombrederegistro_nombredebasededatos
Usuario de la base de datos: tunombrederegistro_nombredeusuariodelabasededatos
Contraseña del usuario de la base de datos: loquesea

Son los que acabas de colocar para crear la base de datos y para crear el usuario. Apúntalos en alguna parte pues te harán falta muy pronto.

sigo en un periquete!

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 3]

Una vez que tenemos la base de datos creada, pasamos a crear la tabla. Una base de datos puede contener unas cuantas tablas. Nosotros por el momento vamos a crear solamente una, con los campos mínimos que necesitaremos para hacer funcionar el sistema de registro de usuarios. Más adelante, conforme lo veamos necesario, podemos añadir nuevos campos.

Llamaremos a esta tabla con el nombre "usuarios".

Por ejemplo, un campo imprescindible es el número de identificación de cada registro. Es un número que identifica a cada usuario registrado. Empieza por el número uno y va creciendo con cada nuevo registro. Suele llamarse a este campo id. Como solo contiene números enteros (sin comas ni decimales) será del tipo INT (número entero). Además podemos elegir cuál será su dimensión máxima o, cantidad de huecos o espacios que podría ocupar ese valor. Si pensaramos que como mucho vamos a tener 30 personas registradas, podemos decir que ocupará como mucho dos carácteres, dos huecos, dos posiciones, es decir XX. En esos dos huecos cabe el número 30, y el 78, pero no el 100 que tiene 3 carácteres, oki? Vamos a pensar que como mucho tendremos 9.999 usuarios registrados y por tanto decidiremos que el valos id tendrá un alcance de 4 carácteres.

Otro campo necesario sería el nombre de usuario. Lo llamaremos nick. Está formado por letras y números, por lo que el tipo correspondiente podría ser VARCHAR, y le daremos una dimensión de 25 caracteres si no os parece mal.

Al siguiente campo lo llamaremos email y será el que guarde la dirección de correo electrónico relacionado con la cuenta. Será útil si hay que comunicarse con esa persona, o si quiere recibir su contraseña olvidada, etc. De nuevo, son registros de letras y números, por lo que le pondremos el tipo VARCHAR y una longitud de 60 carácteres.

Por último, crearemos otro campo para guardar la contraseña y lo llamaremos password. En alguna ocasión lo he nombrado contraseña y la eÑe me ha dado algún problema, así que nos quedamos con la palabra en inglés, oki? Tipo VARCHAR y dimensión de 40, por ejemplo.

Cualquiera de estas cosas las podemos modificar más tarde si nos hiciera falta. la dimensión de cada campo, su nombrem el tipo... de modo que por el momento partimos de lo dicho.

Para crear la tabla en nuestra base de datos, la opción más sencilla (existen otros modos) es acceder al panel de control Cpanel de vuestro servidor (el hosting gratis de CCTW dispone de cPanel) y añadir estas líneas en el apartado SQL de PhpMyAdmin:

CREATE TABLE `[B]usuarios[/B]` (
`[B]id[/B]` INT( 4 ) NOT NULL AUTO_INCREMENT,
`[B]nick[/B]` VARCHAR(30) NOT NULL ,
`[B]email[/B]` VARCHAR(50) NOT NULL ,
`[B]password[/B]` VARCHAR(30) NOT NULL ,
INDEX ( `id` )
);

Para evitar lios y errores, vamos a nombrar todos estos campos en minúsculas y sin símbolos raros, oki? (usuarios, id, email, nick, password...).

Por cierto.... sabéis dónde se encuetra esa opción de SQL dentro del cPanel?

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 4]

Para crear la tabla usuarios como decía, tienes que copiar las líneas del mensaje anterior y pegarlas en un hueco que hay en el PhpMyAdmin. Os digo dónde.

1.- Accede a tu cPanel. Para ello teclea en tu navegador la dirección de tu web, seguida de una barra y la palabra cpanel. Por ejemplo, www . mipaginaweb.comocreartuweb.es/cpanel

2.- Busca el icono de acceso a PhpMyAdmin y haz clic sobré él. Es así:


3.- Se abre entonces el PhpMyAmin. Selecciona la base de datos sobre la que vamos a trabajar. Si la creaste según los pasos anteriores debe llamarse loquesea_reguser. El nombre está a la izquierda:


4.- Ahora has de buscar en la parte de arriba una lengueta llamada SQL. Aunque en cada versión de cPanel y PhpMyAdmin aparece ligeramente distinto, es algo así como esto:

5.- Pues bien, tras hacer clic sobre la lengueta SQL, tienes que escribir toda esa línea en en recuadro que aparece:


5.- Tras pegar allí el código que os dí para generar la tabla, pulsamos en aceptar y, listo! Tabla creada con todos sus campos!

Jorge ya se que no toca hablar de esto aquí pero como llevas en tema de los videotutoriales?

Cualquier cosa que no quede perfectamente explicada, por favor, avisadme y lo explico mejor, oki?

Has acertado Latinga, no es el sitio :rolleyes: je je je je. Lo llevo aparcado por el momento. Para terminar mi CMS necesito perfilar el sistema de registros y ando investigándolo. Por eso le he metido mano a esta parte ahora. No tengo tiempo para hacer todo a la vez... sorry, aunque soy todo oidos ante cualquier propuesta como sabes. Un abrazo!

No sabia que estuvieras haciéndote un CMS ; pero supongo que lo harás en XML por su facilidad en el traspaso de datos; En cuanto al login usuarios por que no haces una doble petición en un archivo html? por un lado una petición ajax para que al pulsar un botón te enseñe el formulario y por otro lado la peticion al servidor para que los datos se almacenen en la base de datos creo que es lo más logico. Haber si lego tengo tiempo y te pongo un ejemplo sencillo de como hacerlo solo una pregunta tonta has trasteado algo con Json? He visto que es más recomendable cuando hay que pasarle muchos datos a una solicitud ajax, te ahorras mucho peso en los archivos y sobrecargas menos el navegador .

Guau, qué nivel estás alcanzando compañero!

Pues si, llevo un montón de tiempo creando un CMS personalizado para mis webs, para poder actualizarlas online esté donde esté. Poco a poco, como siempre.

Aún no controlo AJAX tanto como para aplicarlo en los formularios con éxito. He leido algo de Json, pero aún no se aplicarlo. Vamos, que cualquier propuesta o guia de por dónde ir tirando es bienvenida, como siempre.

Un abrazo amigo!

Tampoco pensaba usar XML, la verdad. Miraré tus video tutoriales a fondo ;=)

lantiga escribió:No sabia que estuvieras haciéndote un CMS ; pero supongo que lo harás en XML por su facilidad en el traspaso de datos; En cuanto al login usuarios por que no haces una doble petición en un archivo html? por un lado una petición ajax para que al pulsar un botón te enseñe el formulario y por otro lado la peticion al servidor para que los datos se almacenen en la base de datos creo que es lo más logico. Haber si lego tengo tiempo y te pongo un ejemplo sencillo de como hacerlo solo una pregunta tonta has trasteado algo con Json? He visto que es más recomendable cuando hay que pasarle muchos datos a una solicitud ajax, te ahorras mucho peso en los archivos y sobrecargas menos el navegador .

En ese caso seria mejor usar a JQuery debido a su sencilles y rapidez en el codigo, este framework tiene unas 5000 mil lineas de codigo y es muy bueno tambien para ajax y se podria combinar con json(php) y adquirir velocidades insospechadas

Saludos y buena idea seguro te ire ayudando!

jquery, json.... me temo que aún tengo muuucho que aprender. Investigaré por la red. Si alguien tiene nociones... ya sabe!

Un abrazo!

@cesar_ed super interesante aportación sobre tema de Jquery y como pasar datos entre distintos dominios con JSONP , no lo habia pensado.Aunque esta claro para todo esto hay que saber DOM y creo que no hemos explicado mucho aunque es sencillo.[:D]

Ayer abrí unos subforos de lenguajes de programación en este foro. Quizás deba abrir algunos otros allí, para hablar de todo esto, Json, XML, DOM.... Tendrá asiduos?

El tema de explicar cosas esta bien pero creo que la gente al final solo busca ejemplos prácticos de como hacer cosas .

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 5]

El siguiente paso será crear una serie de archivos. Uno para el login, otro para des-loguearse, uno más para el formulario de registro, etc, etc. Todos ellos tienen algo en común y es, que han de conectar con la base de datos. Es por eso que se suele crear un archivo aparte con solamente esos datos de conexión. Una vez lo tengamos, nos basta con insertar ese archivo dentro de cada uno de los restantes.

Este archivo con los datos de conexión lo llamaremos configuracion.php y en él añadiremos las siguientes líneas:

Nombre del archivo: configuracion.php

<?php

// En esta línea siempre se coloca, casi siempre, localhost
$dbhost="localhost";

// Nombre del usuario de la base de datos. El que definiste en el cPanel
$dbuser="nombrehost_administrador"; 

// La contraseña para la base de datos
$dbpass="esunsecreto";

// Nombre de la base de datos
$db="nombrehost_reguser";

//nombre de la tabla de usuarios
$tabla="usuarios"; 

// Hacemos la conexión con la base de datos y la seleccionamos
mysql_connect("$dbhost","$dbuser","$dbpass");
mysql_select_db("$db");

// Abrimos la sesión
session_start();

?>

Con esto nos ahorramos definir las claves una y otra vez, así como tener que abrir la conexión y la sesión. Más adelante veremos cómo se añade este código a cada uno de los demás archivos.

Como ves, la útima línea abre una sesión. Las sesiones son guardadas en el servidor y no en el ordenador del usuario como en el caso de las cookies. De este modo el sistema seguirá funcionando aún cuando el usuario tiene desactivadas las cookies. Usaremos por tanto sesiones en lugar de cookies para pasar valores de un archivo a otro. Es por eso que se empiezan todos los archivos llamando a esa sesión consession_start();

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 6]

Bien, lo primero que se nos ocurre que debe encontrar un usuario para acceder al registro es una página en la que poder añadir sus datos de registro, nombre de nick, email y contraseña, no? Vamos a crear ese archivo que llamaremos formulario.php

Empezamos el archivo añadiendo un include. Este comando añade el contenido del archivo indicado. En nuestro caso añadimos todo el contenido del archivo configuracion.php, que posee los datos necesarios para la conexión con la base de datos.

Después, creamos el formulario donde el usuario puede añadir sus datos de registro. Si tienes dudas con esto repasa las lecciones de Formularios de CCTW que están en el Curso de Php y MySQL, oki?

Posteriormente añadimos un enlace a la página, para dar la opción al visitante de regresar a la página de logeo, que llamaremos login.php y que crearemos más tarde.

Nombre del archivo: formulario.php

<?php

//incluimos configuracion.php con los datos de conexión
include('configuracion.php'); 

//Creamos el formulario de registro
echo '
    <form action="registro.php" method="POST" />
        Nick:       <input type="text"     name="nick"     size="25" /><br />
        Contraseña: <input type="password" name="password" size="40" /><br />
        E-mail:     <input type="text"     name="email"    size="60" /><br />
                    <input type="submit"   name="submit"   value="Registrar" />
    </form>
     ';

// Damos la opción de volver a la página de login si no desea registrarse
echo '<br /><a href="login.php">Login</a>'; 

?>

Los datos recogidos por el formulario irán a parar al archivo registro.php en cuanto se haga clic en "Registrar". Vamos pues a crear ese archivo de registro.

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 7]

Como siempre, añadimos el include con los datos del archivo configuracion.php. Además, verificamos que no se han dejado en blanco los datos del formulario con el if. En caso de estar alguno en blanco, regresamos automáticamente a la página formulario.php utilizando la línea que empieza por Header.

Si los campos no están en blanco, los añadimos en la base de datos con la línea que empieza por mysql_query y mostramos al visitante el mensaje "Usuario registrado con éxito".

Además, colocamos un enlace a la página de login, por si tras este registro quiere logearse.

Nombre del archivo: registro.php

<?php

include('configuracion.php'); //incluimos configuracion.php que contiene los datos de la conexión a la db

//Comprobamos que los campos nick, y password se han rellenado en el form de reg.php, sino volvemos al form
if ( ($_POST[nick] == '') or ($_POST[password] == '') )
    {
    Header("Location: formulario.php"); //enviamos al form de registro que esta en reg.php
    }
else
    {
    //introducimos el nuevo registro en la tabla users
    mysql_query("INSERT INTO $tabla (nick,password,email) values ('$_POST[nick]','$_POST[password]','$_POST[email]') ");
    echo 'Usuario registrado con éxito';
    }
echo '<br /><a href="login.php">Quieres logearte?</a>'; // damos la opcion de logerase

?>

Una vez registrado, el usuario querrá logearse de modo que vamos a crear el archivo login.php ahora mismo.

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 7]

En este archivo de logeo llamado login.php, añadimos, como siempre, el archivo configuracion.php con los datos de conexión con la base de datos. Después con el if, miramos si existe sesión abierta ya. Si no existe (es decir, si no está logeado) se ejecuta lo que hay en el primer corchete, un formulario para introducir sus datos de login. Si existe la sesión 8significaría que ya está logeado) lo del segundo, un mensaje de bienvenida y la opción para deslogearse.

Nombre del archivo: login.php

<?php

include('configuracion.php');

if (!isset($_SESSION[usuario]) )  // Esto es, si no está ya logeado
    // Si aún no está logeado le mostramos el formulario de login
    {
    // Formulario para recoger los datos de login y enviarlos a chequeo.php, donde miramos que sean correctos
    echo '
    <form action="chequeo.php" method="POST">
    Nick: <input type="text" name="nick" size="25"><br>
    Password: <input type="password" name="password" size="40" ><br>
    <input type="submit" name="submit" value="Login"></form>
    ';
    // le damos la opcion de registrarse si no lo está
    echo '<br /><a href="formulario.php">Registro</a>'; 
    }
else   // Esto es, si está ya logeado
    {
    // Si está logeado indicamos que no es necesario logearse de nuevo. Le mostramos el nick y la opción de deslogearse
    echo 'Bienvenido a la web <b>'.$_SESSION[usuario].'</b>'; // Mensaje de bienvenida
    echo '<br /><a href=logout.php>Salir</a>'; //link para deslogearse, iría a logout.php
    }

?>

Casi al final del archivo hemos puesto la opción de deslogearse, que veremos más adelante. Pero ahora vamos a ver cuál sería el contenido del archivo chequeo.php que es el que va a recibir los valores del formulario de este archivo visto ahora mismo.

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 8]

Vemos como desde el archivo anterior, enviamos los datos introducidos en el formulario de login al archivo chequeo.php. El objeto de ese archivo es comprobar que realmente existe ese usuario y que la contraseña es la correcta.

Si todo es correcto creamos variables de sesión y le damos los valores del usuario. Además, enviamos al visitante automáticamente al archivo login.php donde se chequeaba si existía ya sesión abierta para dar unmensaje de bienvenida.

Si no todo es correcto, indicamos que hay algún dato incorrecto y mostramos un enlace al visitante para que pueda regresar a la página de logeo, login.php.

Nombre del archivo: chequeo.php

<?php

include('configuracion.php');

// Chequeamos que el usuario existe y que la contraseña es correcta
$usuarios=mysql_query("SELECT * FROM $tabla WHERE nick='$_POST[nick]' and password='$_POST[password]' ");
if($datosdelusuario = mysql_fetch_array($usuarios)) //si existe comenzamos con la sesion, si no, al index
    {
    session_register("usuario"); //registramos la variable usuario que contendrá el nick del user
    session_register("idusuario"); //registramos la variable idusuario que contendrá la id del user
    $_SESSION[usuario] = $datosdelusuario["nick"]; //damos el nick a la variable usuario
    $_SESSION[idusuario] = $datosdelusuario["id"]; //damos la id del user a la variable idusuario
    Header("Location: login.php"); //volvemos al login
    }
else
    {
    echo 'Nick y/o Password incorrectos';
    echo '<br /><a href="login.php">Logearse</a>';
    }

?>

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 9]

Para deslogearse, para dejar de estar logeado, hemos puesto antes un enlace a un archivo llamado logout.php

Ese archivo simplemente destruye la sesión con lo que, se deja de estar logeado. El archivo contiene como siempre el include con los datos de configuracion.php, además de la orden de destruir la sesión. Una vez destruida se envía al visitante a la página login.php mediante la redirección automática usando el comando Header.

Nombre del archivo: logout.php

<?php

include('configuracion.php');

session_destroy(); // Con esto se destruye la sesión y queda el usuario deslogueado
Header("Location: login.php"); // Se envia automáticamente a la página login.php

?>

Jorge tengo un par de dudas con el tuto parte 6:

1. Al hacer una llamada de inclusión no seria mejor usar el include_once para evitar que las peticiones al sesión y a la base de datos se repitan de pueda haber un error grave? recuerda que en el archivo de configuración los abres pero no los cierras y si por un casual se incluyese esto dos veces seria poco recomendable e incluso inseguro.


2. Por otro lado creo que seria interesante crear contantes para las urls del form y asi evitar posible indexación de estas urls en el sitemap.(salvo que lo quieras asi ,claro)

[TUTORIAL :: SISTEMA DE REGISTRO DE USUARIOS :: PARTE 10]

Esto es básicamente, un sitema de registro de usuarios bien bien sencillo. De hecho es malísimo de sencillo que es, je je je. Funcionar funciona, pero tiene una serie de inconvenientes que ahora iremos detectando y reparando. El objetivo era principalmente ver cómo hacerlo funcionar y ahora, le pasaremos la prueba de fuego para detectarle errores y mejoras que hagan de este sistema, nuestro sistema preferido de registro.

Te animas? A mi se me ocurren ya decenas de mejoras, pero las comento en otra respuesta. Permanece atento y, participa conmigo plis!

El tuto 7 creo que el archivo es inseguro; te pueden pasar un para con mala intención y robarte incluso la pagina hay que mejorar ese codigo.

Gracias Lantiga por tus comentarios, de veras.

1. Al hacer una llamada de inclusión no seria mejor usar el include_once para evitar que las peticiones al sesión y a la base de datos se repitan de pueda haber un error grave? recuerda que en el archivo de configuración los abres pero no los cierras y si por un casual se incluyese esto dos veces seria poco recomendable e incluso inseguro.

Como ves, pretendo partir de lo más básico posible para a partir de ahí, ir mejorándolo. Si lo pongo completo desde el principio la gente se puede agobiar de tanto código y quizás no termine de entenderlo todo. Los arboles les impiden ver el bosque! je je je. Tomo nota y paso los includes a include_once en la siguiente versión gracias a tu propuesta, explicando ya de paso el motivo del cambio para que todos aprendamos un poco más. Asímismo, añadiré el cierre de la conexión al final de cada uno de estos archivos. Cualquier otra sugerencia será, como siempre, bienvenida.

2. Por otro lado creo que seria interesante crear contantes para las urls del form y asi evitar posible indexación de estas urls en el sitemap.(salvo que lo quieras asi ,claro)

Esto no lo termino de entender Lantiga. Constantes para las URLs? Me lo aclaras plis? Está claro que son páginas que no deberían ir a parar al sitemap, pero aunque se me ocurren varias opciones para evitarlo, no se a qué te refieres con lo de las constantes en URLs.

Gracias compi!