Cómo implementar la verificación de correo electrónico para nuevos miembros

() translation by (you can also view the original English article)

¿Alguna vez has creado una cuenta en un sitio web y se te ha pedido que verifiques tu correo electrónico y hagas clic en un enlace de verificación enviado por la empresa para activarlo? Al hacerlo, reduces mucho la cantidad de cuentas de correo no deseado. En esta lección, aprenderemos cómo hacer esto mismo.

¿Qué vamos a construir?

Vamos a construir un buen script de registro de PHP donde un usuario puede crear una cuenta para obtener acceso a una "sección de miembros" de un sitio web.
Después de que el usuario crea su cuenta, la cuenta se bloqueará hasta que el usuario haga clic en un enlace de verificación que recibirá en su casilla de correo electrónico.

Paso 1 - Página de registro

Primero necesitamos una página simple donde nuestros visitantes puedan registrar sus cuentas; así que eso es lo primero que construiremos.
Me gustaría recordarte que este es un tutorial de PHP, y en mi opinión, creo que necesitas conocer los conceptos básicos de HTML antes de continuar con PHP. Agregaré comentarios al HTML y CSS para describir cada línea de código.

index.php: esta es nuestra página de registro con un formulario básico.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>NETTUTS > Sign up</title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<!-- start header div -->	
	<div id="header">
		<h3>NETTUTS > Sign up</h3>
	</div>
	<!-- end header div -->	
	
	<!-- start wrap div -->	
	<div id="wrap">
		
		<!-- start php code -->
		
		<!-- stop php code -->
	
		<!-- title and description -->	
		<h3>Signup Form</h3>
		<p>Please enter your name and email addres to create your account</p>
		
		<!-- start sign up form -->	
		<form action="" method="post">
			<label for="name">Name:</label>
			<input type="text" name="name" value="" />
			<label for="email">Email:</label>
			<input type="text" name="email" value="" />
			
			<input type="submit" class="submit_button" value="Sign up" />
		</form>
		<!-- end sign up form -->	
		
	</div>
	<!-- end wrap div -->	
</body>
</html>

css/style.css: esta es la hoja de estilo para index.php y otras páginas.

/* Global Styles */

*{
	padding: 0; /* Reset all padding to 0 */
	margin: 0; /* Reset all margin to 0 */
}

body{
	background: #F9F9F9; /* Set HTML background color */
	font: 14px "Lucida Grande";  /* Set global font size & family */
	color: #464646; /* Set global text color */
}

p{
	margin: 10px 0px 10px 0px; /* Add some padding to the top and bottom of the <p> tags */
}

/* Header */

#header{
	height: 45px; /* Set header height */
	background: #464646; /* Set header background color */
}

#header h3{
	color: #FFFFF3; /* Set header heading(top left title ) color */
	padding: 10px; /* Set padding, to center it within the header */
	font-weight: normal; /* Set font weight to normal, default it was set to bold */
}

/* Wrap */

#wrap{
	background: #FFFFFF; /* Set content background to white */
	width: 615px; /* Set the width of our content area */
	margin: 0 auto; /* Center our content in our browser */
	margin-top: 50px; /* Margin top to make some space between the header and the content */
	padding: 10px; /* Padding to make some more space for our text */
	border: 1px solid #DFDFDF; /* Small border for the finishing touch */
	text-align: center; /* Center our content text */
}

#wrap h3{
	font: italic 22px Georgia; /* Set font for our heading 2 that will be displayed in our wrap */
}

/* Form & Input field styles */ 

form{
	margin-top: 10px; /* Make some more distance away from the description text */
}

form .submit_button{
	background: #F9F9F9; /* Set button background */
	border: 1px solid #DFDFDF; /* Small border around our submit button */
	padding: 8px; /* Add some more space around our button text */
}

input{
	font: normal 16px Georgia; /* Set font for our input fields */
	border: 1px solid #DFDFDF; /* Small border around our input field */
	padding: 8px; /* Add some more space around our text */
}

Como puedes ver, he agregado un comentario a cada línea que describe lo que hacen. Además, es posible que hayas notado el siguiente comentario en el archivo index.php:

1	<!-- start php code -->
2
3	<!-- stop php code -->

¡Vamos a escribir nuestro PHP entre estas 2 líneas!

Paso 2 - Validación del input

Lo primero que vamos a construir es una pieza de código que valide la información. Aquí hay una breve lista que detalla lo que se debe hacer.

Si el campo de nombre no está vacío.
Si el nombre no es corto.
Si el campo de correo electrónico no está vacío.
Si la dirección de correo electrónico es válida xxx@xxx.xxx

Entonces, nuestro primer paso es verificar si se envía el formulario y que los campos no están vacíos.

<!-- start PHP code -->
<?php

	if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['email']) && !empty($_POST['email'])){
		// Form Submited
	}
	    	
?>
<!-- stop PHP Code -->

¡Hora de un desglose! Comenzamos con una declaración IF y estamos validando primero el campo de nombre:

	if(  ){ // If statement is true run code between brackets
	
	}
	
	isset($_POST['name']) // Is the name field being posted; it does not matter whether it's empty or filled.
	&& // This is the same as the AND in our statement; it allows you to check multiple statements.
	!empty($_POST['name']) // Verify if the field name is not empty
	
	isset($_POST['email']) // Is the email field being posted; it does not matter if it's empty or filled.
	&& // This is the same as the AND in our statement; it allows you to check multiple statements.
	!empty($_POST['email']) // Verify if the field email is not empty

Entonces, si envía el formulario ahora con campos vacíos, no pasa nada. Si completas ambos campos, nuestro script ejecutará el código entre paréntesis.
Ahora vamos a crear un código que verificará si una dirección de correo electrónico es válida. Si no es así, devolveremos un error. Además, convirtamos nuestras variables de publicación en variables locales:

1	if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['email']) && !empty($_POST['email'])){
2	$name = mysql_escape_string($_POST['name']); // Turn our post into a local variable
3	$email = mysql_escape_string($_POST['email']); // Turn our post into a local variable
4	}

Ahora podemos llegar a nuestros datos a través de nuestras variables locales. Como puedes ver, también agregué una cadena de escape MySQL para evitar la inyección de MySQL al insertar los datos en la base de datos MySQL.

"La función mysql_real_escape_string() escapa caracteres especiales en una cadena para usar en una declaración SQL".

Expresiones regulares

El siguiente es un pequeño fragmento que verifica si la dirección de correo electrónico es válida.

	$name = mysql_escape_string($_POST['name']);
	$email = mysql_escape_string($_POST['email']);
	    		
	    		
	if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
		// Return Error - Invalid Email
	}else{
		// Return Success - Valid Email
	}

Ten en cuenta que personalmente no escribí esta expresión regular, es un pequeño fragmento de php.net.
Básicamente, verifica si el correo electrónico está escrito en el siguiente formato:

1	xxx@xxx.xxx

Ahora en el eregi, puedes ver que comprueba si el correo electrónico contiene caracteres del alfabeto, si tiene algún número, un guiño fantasma (_) y, por supuesto, los requisitos básicos para un correo electrónico (correo electrónico) '@' y un punto)'.' Si no se encuentra ninguno de estos caracteres, la expresión devuelve "falso". De acuerdo, entonces ahora necesitamos agregar algunos mensajes de error básicos.

	if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
		// Return Error - Invalid Email
		$msg = 'The email you have entered is invalid, please try again.';
	}else{
		// Return Success - Valid Email
		$msg = 'Your account has been made, <br /> please verify it by clicking the activation link that has been send to your email.';
	}

Como puedes ver, hemos creado una variable local "$msg", esto nos permite mostrar el error o el mensaje de éxito en cualquier lugar de la página.
Y lo vamos a mostrar entre el texto de instrucción y el formulario.

	<!-- title and description -->	
	<h3>Signup Form</h3>
	<p>Please enter your name and email address to create your account</p>
		
	<?php 
		if(isset($msg)){  // Check if $msg is not empty
			echo '<div class="statusmsg">'.$msg.'</div>'; // Display our message and wrap it with a div with the class "statusmsg".
		} 
	?>
		
	<!-- start sign up form -->

Agrega esto a style.css, para darle un estilo un poco más a nuestro mensaje de estado.

#wrap .statusmsg{
	font-size: 12px; /* Set message font size  */
	padding: 3px; /* Some padding to make some more space for our text  */
	background: #EDEDED; /* Add a background color to our status message   */
	border: 1px solid #DFDFDF; /* Add a border arround our status message   */
}

Paso 3 - Creando la base de datos y estableciendo una conexión

Ahora necesitamos establecer una conexión de base de datos y crear una tabla para insertar los datos de la cuenta. Así que vayamos a PHPMyAdmin y vamos a crear una nueva base de datos llamada registrations y también una cuenta de usuario que tenga acceso a esa base de datos para insertar y actualizar los datos.

Creamos nuestra tabla users, con 5 campos:

Ahora debemos ingresar detalles para estos campos:

Para aquellos que no desean ingresar estos datos manualmente, en su lugar pueden ejecutar el siguiente código SQL.

CREATE TABLE `users` (
`id` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 32 ) NOT NULL ,
`password` VARCHAR( 32 ) NOT NULL ,
`email` TEXT NOT NULL ,
`hash` VARCHAR( 32 ) NOT NULL ,
`active` INT( 1 ) NOT NULL DEFAULT '0'
) ENGINE = MYISAM ;

Nuestra base de datos ha sido creada, ahora necesitamos establecer una conexión usando PHP. Escribiremos el siguiente código al comienzo de nuestro script justo debajo de la siguiente línea:

1	<!-- start PHP code -->
2	<?php
3	// Establish database connection

Utilizaremos el siguiente código para conectarnos al servidor de la base de datos y seleccionar la base de datos registrations. (conexión básica de MySQL)

mysql_connect("localhost", "username", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.

mysql_select_db("registrations") or die(mysql_error()); // Select registrations database.

Ahora que hemos establecido una conexión con nuestra base de datos, podemos pasar al siguiente paso e insertar los detalles de la cuenta.

Paso 4 - Insertar cuenta

Ahora es el momento de ingresar los detalles de la cuenta enviada a nuestra base de datos y generar un hash de activación. Escribe el siguiente código debajo de esta línea:

1	// Return Success - Valid Email
2	$msg = 'Your account has been made, <br /> please verify it by clicking the activation link that has been send to your email.';

Hash de activación

En nuestra base de datos creamos un campo llamado hash, este hash es una cadena de texto de 32 caracteres. También enviamos este código a la dirección de correo electrónico del usuario. Luego pueden hacer clic en el enlace (que contiene el hash) y verificaremos si coincide con el de la base de datos. Vamos a crear una variable local llamada $hash y generemos un hash aleatorio md5.

1	$hash = md5( rand(0,1000) ); // Generate random 32 character hash and assign it to a local variable.
2	// Example output: f4552671f8909587cf485ea990207f3b

¿Qué hicimos? Bueno, estamos usando la función PHP "rand" para generar un número aleatorio entre 0 y 1000. A continuación, nuestra función MD5 convertirá este número en una cadena de texto de 32 caracteres que utilizaremos en nuestro correo electrónico de activación. Mi elección es usar MD5, porque genera un hash de 32 caracteres que es seguro y, en este caso, imposible de descifrar.

Creando una contraseña aleatoria

Lo siguiente que necesitamos es crear una contraseña aleatoria para nuestro miembro:

1	$password = rand(1000,5000); // Generate random number between 1000 and 5000 and assign it to a local variable.
2	// Example output: 4568

Inserta la siguiente información en nuestra base de datos utilizando una consulta MySQL

mysql_query("INSERT INTO users (username, password, email, hash) VALUES(
'". mysql_escape_string($name) ."', 
'". mysql_escape_string(md5($password)) ."', 
'". mysql_escape_string($email) ."', 
'". mysql_escape_string($hash) ."') ") or die(mysql_error());

Como puedes ver, insertamos todos los datos con una cadena de escape MySQL a su alrededor para evitar cualquier inyección de MySQL.
También puedes observar que la función MD5 cambia la contraseña aleatoria en un hash seguro para más protección. Ejemplo: Si una persona "malvada" accede a la base de datos, no puede leer las contraseñas.

Para las pruebas, completa el formulario y verifica si los datos se están insertando en nuestra base de datos.

Paso 5 - Enviar el correo electrónico de verificación

Inmediatamente después de insertar la información en nuestra base de datos, debemos enviar un correo electrónico al usuario con el enlace de verificación. Así que usemos la función "mail" de PHP para hacer exactamente eso.

$to      = $email; // Send email to our user
$subject = 'Signup | Verification'; // Give the email a subject 
$message = '

Thanks for signing up!
Your account has been created, you can login with the following credentials after you have activated your account by pressing the url below.

------------------------
Username: '.$name.'
Password: '.$password.'
------------------------

Please click this link to activate your account:
http://www.yourwebsite.com/verify.php?email='.$email.'&hash='.$hash.'

'; // Our message above including the link
					
$headers = 'From:noreply@yourwebsite.com' . "\r\n"; // Set from headers
mail($to, $subject, $message, $headers); // Send our email

Ahora desglosemos el mensaje:

Thanks for signing up!
Your account has been created, you can login with the following credentials after you have activated your account by pressing the url below.

------------------------
Username: '.$name.'
Password: '.$password.'
------------------------

En el código anterior enviamos una breve descripción a nuestro usuario que contiene el nombre de usuario y la contraseña, utilizando las variables locales que creamos cuando se publicaron los datos.

1	Please click this link to activate your account:
2	http://www.yourwebsite.com/verify.php?email='.$email.'&hash='.$hash.'

En esta sección del código, creamos un enlace dinámico. El resultado de esto se verá así:

Como puedes ver, crea una url sólida, que es imposible de adivinar. Esta es una forma muy segura de verificar la dirección de correo electrónico de un usuario.

Paso 6 - Activación de la cuenta

Como puedes ver, nuestra url enlaza con verify.php así que vamos a crear eso, usando la misma plantilla básica que usamos para index.php.
Sin embargo, elimina el formulario de la plantilla.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>NETTUTS > Sign up</title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<!-- start header div -->	
	<div id="header">
		<h3>NETTUTS > Sign up</h3>
	</div>
	<!-- end header div -->	
	
	<!-- start wrap div -->	
	<div id="wrap">
	    <!-- start PHP code -->
	    <?php
	    
	    	mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.
			mysql_select_db("registrations") or die(mysql_error()); // Select registration database.
	    	
	    ?>
	    <!-- stop PHP Code -->

		
	</div>
	<!-- end wrap div -->	
</body>
</html>

Lo primero que debemos hacer es verificar si tenemos nuestras variables $_GET (correo electrónico y hash)

if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){
	// Verify data
}else{
	// Invalid approach
}

Para hacer las cosas un poco más fáciles, asignemos nuestras variables locales y agreguemos algo de prevención de inyección de MySQL, una vez más, utilizando la cadena de escape de MySQL.

if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){
	// Verify data
	$email = mysql_escape_string($_GET['email']); // Set email variable
	$hash = mysql_escape_string($_GET['hash']); // Set hash variable
}

Lo siguiente es verificar los datos de la url contra los datos en nuestra base de datos usando una consulta MySQL.

1	$search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error());
2	$match = mysql_num_rows($search);

En el código anterior, usamos una declaración de selección de MySQL y comprobamos que el correo electrónico y el hash coincidían. Pero además de eso, verificamos si el estado de la cuenta es "inactivo". Finalmente, usamos mysql_num_rows para determinar cuántas coincidencias se han encontrado. Así que probemos esto. Simplemente usa un echo para devolver los resultados.

1	$search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error());
2	$match = mysql_num_rows($search);
3
4	echo $match; // Display how many matches have been found -> remove this when done with testing ;)

¡Tenemos una COINCIDENCIA! Para cambiar el resultado, simplemente cambia el correo electrónico y verás que el número devuelto es 0.
Podemos usar nuestra variable $match para activar la cuenta o devolver un error cuando no se ha encontrado una coincidencia.

if($match > 0){
	// We have a match, activate the account
}else{
	// No match -> invalid url or account has already been activated.
}

Para activar la cuenta, debemos actualizar el campo activo a 1 usando una consulta MySQL.

// We have a match, activate the account

mysql_query("UPDATE users SET active='1' WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error());

echo '<div class="statusmsg">Your account has been activated, you can now login</div>';

Usamos los mismos términos de búsqueda para la actualización que usamos en nuestra consulta de selección de MySQL. Cambiamos activo a 1 donde el correo electrónico, el hash y el campo activo = 0 coinciden. También devolvemos un mensaje que le dice al usuario que su cuenta ha sido activada. Puedes agregar un mensaje como lo hicimos aquí diciendo que: "No se encontró una coincidencia". Por lo tanto, el código final debería ser similar a:

mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.
mysql_select_db("registrations") or die(mysql_error()); // Select registration database.
			
if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){
	// Verify data
	$email = mysql_escape_string($_GET['email']); // Set email variable
	$hash = mysql_escape_string($_GET['hash']); // Set hash variable
				
	$search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); 
	$match  = mysql_num_rows($search);
				
	if($match > 0){
		// We have a match, activate the account
		mysql_query("UPDATE users SET active='1' WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error());
		echo '<div class="statusmsg">Your account has been activated, you can now login</div>';
	}else{
		// No match -> invalid url or account has already been activated.
		echo '<div class="statusmsg">The url is either invalid or you already have activated your account.</div>';
	}
				
}else{
	// Invalid approach
	echo '<div class="statusmsg">Invalid approach, please use the link that has been send to your email.</div>';
}

Si visitas verify.php sin ningún tipo de cadenas, se mostrará el siguiente error:

Paso 7 - Iniciar sesión

En este paso final, te mostraré cómo crear un formulario de inicio de sesión básico y verificar si la cuenta está activada. Primero crea un nuevo archivo llamado login.php con la plantilla básica que usamos antes, pero esta vez cambia el formulario a un formulario de inicio de sesión.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>NETTUTS > Sign up</title>
	<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<!-- start header div -->	
	<div id="header">
		<h3>NETTUTS > Sign up</h3>
	</div>
	<!-- end header div -->	
	
	<!-- start wrap div -->	
	<div id="wrap">
	    <!-- start PHP code -->
	    <?php
	    
	    	mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.
			mysql_select_db("registrations") or die(mysql_error()); // Select registration database.
				
	    	
	    ?>
	    <!-- stop PHP Code -->
	
		<!-- title and description -->	
		<h3>Login Form</h3>
		<p>Please enter your name and password to login</p>
		
		<?php 
			if(isset($msg)){ // Check if $msg is not empty
				echo '<div class="statusmsg">'.$msg.'</div>'; // Display our message and add a div around it with the class statusmsg
			} ?>
		
		<!-- start sign up form -->	
		<form action="" method="post">
			<label for="name">Name:</label>
			<input type="text" name="name" value="" />
			<label for="password">Password:</label>
			<input type="password" name="password" value="" />
			
			<input type="submit" class="submit_button" value="Sign up" />
		</form>
		<!-- end sign up form -->	
		
	</div>
	<!-- end wrap div -->	
</body>
</html>

El formulario es html básico, y casi el mismo que el formulario de suscripción, no se necesita más explicación. Ahora es el momento de escribir el código para el script de inicio de sesión, que escribiremos justo debajo del código de conexión MySQL. Comenzamos con algo que también hicimos en el formulario de registro.

1	if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['password']) && !empty($_POST['password'])){
2	// Both fields are being posted and there not empty
3	}

Primero, verificamos si los datos existen y nos aseguramos de que no estén vacíos.
Lo siguiente es crear algunas variables locales para los datos:

1	if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['password']) && !empty($_POST['password'])){
2	$username = mysql_escape_string($_POST['name']); // Set variable for the username
3	$password = mysql_escape_string(md5($_POST['password'])); // Set variable for the password and convert it to an MD5 hash.
4	}

Creamos las variables locales y cambiamos la contraseña en un hash md5 para que coincida con el hash de contraseña que hemos almacenado en la base de datos.
Ahora es el momento de crear la conexión a nuestra tabla "users" y verificar si los datos ingresados son correctos.

if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['password']) && !empty($_POST['password'])){
	$username = mysql_escape_string($_POST['name']);
	$password = mysql_escape_string(md5($_POST['password']));
				
	$search = mysql_query("SELECT username, password, active FROM users WHERE username='".$username."' AND password='".$password."' AND active='1'") or die(mysql_error()); 
	$match  = mysql_num_rows($search);
			}

Escribimos una consulta de MySQL que seleccionará el nombre de usuario, la contraseña y la información activa de nuestra base de datos para ver si el nombre de usuario y la contraseña coinciden.
Y active='1' es ¡IMPORTANTE! Esto asegura que solo puedes iniciar sesión si tu cuenta está activada. Usamos las filas de números de MySQL nuevamente para ver cuántas coincidencias se encuentran.

if($match > 0){
	$msg = 'Login Complete! Thanks';
	// Set cookie / Start Session / Start Download etc...
}else{
	$msg = 'Login Failed! Please make sure that you enter the correct details and that you have activated your account.';
}

En el código anterior verificamos si el inicio de sesión fue exitoso o no.

El fin

¡Y ese es el final de este tutorial! ¡Espero que lo hayas disfrutado, y si lo hiciste por favor deja un comentario a continuación!

Síguenos en Twitter, o suscríbete a la fuente RSS de NETTUTS para obtener más artículos diarios y comentarios sobre el desarrollo web.