En el anterior artículo, hemos visto cómo desarrollar un sistema de login PHP con PDO. En este tutorial te explicamos una característica extra que puede ser añadida a dicho sistema de login como una capa extra de seguridad. Se trata de añadirle un sistema de autenticación de doble factor utilizando la aplicación Google Authenticator para Android/iPhone.
Imagina que sospechas que alguien ajeno posee la contraseña que utilizas para entrar al formulario de login. Con la verificación de doble factor puedes protegerte contra el uso indebido de tu cuenta si es que alguien, que no eres tu, tiene tu contraseña. Esto es debido a que, con este sistema, entrar a tu cuenta siempre requerirá un código de seguridad (el código de verificación se crea especialmente para tu cuenta. Si optas por un código de verificación, dicho código se enviará a tu teléfono móvil) en el segundo paso antes de entrar con tu contraseña.
Con el segundo paso verificado, podemos proteger nuestra cuenta mediante contraseña y con nuestro teléfono móvil. Añade este sistema de autenticación de doble factor para hacer que tus cuentas sean aún más seguras.
Obtén Google Authenticator en tu móvil
Descárgate e instala la aplicación Google Authenticator en tu smartphone, utilizando los siguientes enlaces. Lo necesitarás para el segundo paso de la autenticación.
Tabla de usuarios
Esta es la tabla que contendrá la información relativa a nuestros usuarios, incluyendo el código único de autenticación de Google.
CREATE TABLE `users` ( `uid` int NOT NULL PRIMARY KEY AUTO_INCREMENT , `username` varchar(25) NOT NULL UNIQUE, `password` varchar(200) NOT NULL , `email` varchar(100) NOT NULL, `name` varchar(100) NOT NULL, `profile_pic` varchar(200) NOT NULL, `google_auth_code` varchar(16) NOT NULL /* 16 digit code */ );
Lógicamente hay que activar la extensión PDO de PHP. Para realizar esto hay que modificar el archivo de configuración de php, ya sabéis, el php.ini.
Este tutorial contendrá dos carpetas llamadas googleLib y class, con archivos PHP.
googleLib
-- GoogleAuthenticator.php
class
-- userClass.php
config.php
index.php
device_confimation.php
home.php
logout.php
sessions.php
config.php
Necesitamos un archivo de configuración para la conexión con la base de datos, y config.php será el encargado de ello. Mediante este archivo podrás modificar el nombre de usuario, la contraseña e incluso el nombre de la base de datos. Si estás utilizando otro tipo de base de datos, modifica el valor de la función PDO().
session_start();
/* DATABASE CONFIGURATION */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'databasename');
define("BASE_URL", "http://localhost/PHPLoginHash/"); // Eg. http://yourwebsite.com
function getDB()
{
$dbhost=DB_SERVER;
$dbuser=DB_USERNAME;
$dbpass=DB_PASSWORD;
$dbname=DB_DATABASE;
try {
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass);
$dbConnection->exec("set names utf8");
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}
catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
}
}
HTML del formulario de registro
Puedes ver tanto el diseño del login como el del formulario de registro en el artículo en el que hablo sobre cómo implementar un sistema de login PHP con PDO
userClass.php
Esta clase contiene métodos muy importantes para nuestras funciones como userLogin, userRegistration y userDetails.
class userClass
{
/* User Login */
public function userLogin($usernameEmail,$password)
{
try{
$db = getDB();
$hash_password= hash('sha256', $password); //Password encryption
$stmt = $db->prepare("SELECT uid FROM users WHERE (username=:usernameEmail or email=:usernameEmail) AND password=:hash_password");
$stmt->bindParam("usernameEmail", $usernameEmail,PDO::PARAM_STR) ;
$stmt->bindParam("hash_password", $hash_password,PDO::PARAM_STR) ;
$stmt->execute();
$count=$stmt->rowCount();
$data=$stmt->fetch(PDO::FETCH_OBJ);
$db = null;
if($count)
{
$_SESSION['uid']=$data->uid; // Storing user session value
$_SESSION['google_auth_code']=$google_auth_code; //Stroing Google authentication code
return true;
}
else
{
return false;
}
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
/* User Registration */
public function userRegistration($username,$password,$email,$name,$secret)
{
try{
$db = getDB();
$st = $db->prepare("SELECT uid FROM users WHERE username=:username OR email=:email");
$st->bindParam("username", $username,PDO::PARAM_STR);
$st->bindParam("email", $email,PDO::PARAM_STR);
$st->execute();
$count=$st->rowCount();
if($count<1)
{
$stmt = $db->prepare("INSERT INTO users(username,password,email,name,google_auth_code) VALUES (:username,:hash_password,:email,:name,:google_auth_code)");
$stmt->bindParam("username", $username,PDO::PARAM_STR) ;
$hash_password= hash('sha256', $password); //Password encryption
$stmt->bindParam("hash_password", $hash_password,PDO::PARAM_STR) ;
$stmt->bindParam("email", $email,PDO::PARAM_STR) ;
$stmt->bindParam("name", $name,PDO::PARAM_STR) ;
$stmt->bindParam("google_auth_code", $secret,PDO::PARAM_STR) ;
$stmt->execute();
$uid=$db->lastInsertId(); // Last inserted row id
$db = null;
$_SESSION['uid']=$uid;
return true;
}
else
{
$db = null;
return false;
}
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
/* User Details */
public function userDetails($uid)
{
try{
$db = getDB();
$stmt = $db->prepare("SELECT email,username,name,google_auth_code FROM users WHERE uid=:uid");
$stmt->bindParam("uid", $uid,PDO::PARAM_INT);
$stmt->execute();
$data = $stmt->fetch(PDO::FETCH_OBJ); //User data
return $data;
}
catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
}
index.php
Contiene tanto código HTML como PHP. Este será el archivo que recibirá los datos enviados por los formularios.
<?php
include("config.php");
if(!empty($_SESSION['uid']))
{
header("Location: device_confirmations.php");
}
include('class/userClass.php');
$userClass = new userClass();
require_once 'googleLib/GoogleAuthenticator.php';
$ga = new GoogleAuthenticator();
$secret = $ga->createSecret(); //This function will create unique 16 digit secret key
$errorMsgReg='';
$errorMsgLogin='';
/* Login Form */
if (!empty($_POST['loginSubmit']))
{
$usernameEmail=$_POST['usernameEmail'];
$password=$_POST['password'];
if(strlen(trim($usernameEmail))>1 && strlen(trim($password))>1 )
{
$uid=$userClass->userLogin($usernameEmail,$password);
if($uid)
{
$url=BASE_URL.'home.php';
header("Location: $url"); // Page redirecting to home.php
}
else
{
$errorMsgLogin="Please check login details.";
}
}
}
/* Signup Form */
if (!empty($_POST['signupSubmit']))
{
$username=$_POST['usernameReg'];
$email=$_POST['emailReg'];
$password=$_POST['passwordReg'];
$name=$_POST['nameReg'];
/* Regular expression check */
$username_check = preg_match('~^[A-Za-z0-9_]{3,20}$~i', $username);
$email_check = preg_match('~^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.([a-zA-Z]{2,4})$~i', $email);
$password_check = preg_match('~^[A-Za-z0-9!@#$%^&*()_]{6,20}$~i', $password);
if($username_check && $email_check && $password_check && strlen(trim($name))>0)
{
$uid=$userClass->userRegistration($username,$password,$email,$name);
if($uid)
{
$url=BASE_URL.'home.php';
header("Location: $url"); // Page redirecting to home.php
}
else
{
$errorMsgReg="Username or Email already exists.";
}
}
}
?>
//Codigo HTML
....Código HTML del formulario de login....
....Código HTML del formulario de registro....
Ojo: Para una mejor experiencia del usuario, sería bueno incluir también validación con Javascript
device_confirmation.php
include('config.php');
if(empty($_SESSION['uid']))
{
header("Location: index.php");
}
include('class/userClass.php');
$userClass = new userClass();
$userDetails=$userClass->userDetails($_SESSION['uid']);
$secret=$userDetails->google_auth_code;
$email=$userDetails->email;
require_once 'googleLib/GoogleAuthenticator.php';
$ga = new GoogleAuthenticator();
$qrCodeUrl = $ga->getQRCodeGoogleUrl($email, $secret,'Your Application Name');
?>
//HTML Code
Enter the verification code generated by Google Authenticator app on your phone.
<div id="img">
<img src='<?php echo $qrCodeUrl; ?>' />
</div>
<form method="post" action="home.php">
<label>Enter Google Authenticator Code</label>
<input type="text" name="code" />
<input type="submit" class="button"/>
</form>
home.php
Página de bienvenida del usuario. Esta página mostrará información del usuario basándose en su variable de sesión.
<?php
include('config.php');
include('class/userClass.php');
$userClass = new userClass();
$userDetails=$userClass->userDetails($_SESSION['uid']);
if($_POST['code'])
{
$code=$_POST['code'];
$secret=$userDetails->google_auth_code;
require_once 'googleLib/GoogleAuthenticator.php';
$ga = new GoogleAuthenticator();
$checkResult = $ga->verifyCode($secret, $code, 2); // 2 = 2*30sec clock tolerance
if ($checkResult)
{
$_SESSION['googleCode']=$code;
}
else
{
echo 'FAILED';
}
}
include('session.php');
$userDetails=$userClass->userDetails($session_uid);
?>
//HTML Code
<h1>Welcome <?php echo $userDetails->name; ?></h1>
<h2> Email <?php echo $userDetails->email; ?></h2>
<a href="<?php echo BASE_URL; ?>logout.php">Logout</a>
session.php
Archivo para validar y almacenar la variable de sesión del usuario
if(!empty($_SESSION['uid']) && !empty($_SESSION['googleCode']))
{
$session_uid=$_SESSION['uid'];
$session_googleCode=$_SESSION['googleCode'];
}
if(empty($session_uid) && empty($session_googleCode))
{
$url=BASE_URL.'index.php';
header("Location: $url");
}
logout.php
Script para limpiar la variable de sesión del usuario. Mediante este archivo, el usuario se desconectará de la plataforma.
include('config.php');
$session_uid='';
$session_googleCode='';
$_SESSION['uid']='';
$_SESSION['googleCode']='';
if(empty($session_uid) && empty($_SESSION['uid']))
{
$url=BASE_URL.'index.php';
header("Location: $url");
}
Fuente: 9lessons.info