Desarrollo de un login de usuarios en CodeIgniter

17 de marzo de 2011

Cómo hacer un sistema de login de usuarios, acceso por usuario y contraseña, en una página web PHP desarrollada con el framework CodeIgniter.

Este es un artículo práctico que nos puede ayudar a aprender algunas técnicas de desarrollo en el framework CodeIgniter, además de darnos una guía útil para la creación de un sistema que permita loguearse a los usuarios que visitan nuestra aplicación web.

El sistema de login es uno de los primeros problemas que querremos resolver en aplicaciones web. No es más que un módulo que identifica a los usuarios que visitan una página web, para implementar un nivel de seguridad por medio de un nombre de usuario y una clave. Por supuesto, en las aplicaciones CodeIgniter, uno de nuestros primeros pasos será desarrollar ese acceso autenticado. Por ello, nos pondremos manos a la obra para explicar paso por paso una posible implementación de un script para facilitar la autenticación de usuarios en nuestra página web.

Nota: El sistema de login ha sido tratado anteriormente en DesarrolloWeb.com. Claro que, cuando estamos desarrollando en CodeIgniter, los modos en los que tenemos que enfrentar los problemas varían un poco con respecto a la programación tradicional en PHP (sin usar ningún framework). Así pues, os pasamos un par de referencias útiles para poder complementar la presente información.
Manual de CodeIgniter
Desarrollo de un sistema de autenticación en PHP

5 sencillos pasos para crear un sistema de login en CodeIgniter

Comenzamos listando los pasos que hemos realizado para la construcción de este sistema de autenticación de usuarios.

Paso 1: crear el archivo php.php y guardarlo en /application/controllers/
Paso 2: crear el archivo login.php y guardarlo en /application/views/
Paso 3: crear usuarios_model.php y guardarlo en /application/models/
Paso 4: crear la tabla mysql con algunos usuarios de prueba
Paso 5: Importante: pre-cargar automáticamente las librerías de CodeIgniter para base de datos y validaciones de formularios

A continuación, podéis ver los listados de código de cada uno de los scripts que hemos utilizado. Más tarde en este mismo artículo, después de los listados, podréis leer una descripción de cada uno de estos pasos para la implementación.

Paso 1: Código para el controlador php.php:

<?php

class Php extends CI_Controller {

   function login($idioma=null)
   {

      //   $this->config->set_item('language', 'spanish');      //   Setear dinámicamente el idioma que deseamos que ejecute nuestra aplicación
      if(!isset($_POST['maillogin'])){   //   Si no recibimos ningún valor proveniente del formulario, significa que el usuario recién ingresa.
         $this->load->view('login');      //   Por lo tanto le presentamos la pantalla del formulario de ingreso.
      }
      else{                        //   Si el usuario ya pasó por la pantalla inicial y presionó el botón "Ingresar"
         $this->form_validation->set_rules('maillogin','e-mail','required|valid_email');      //   Configuramos las validaciones ayudandonos con la librería form_validation del Framework Codeigniter
         $this->form_validation->set_rules('passwordlogin','password','required');
         if(($this->form_validation->run()==FALSE)){            //   Verificamos si el usuario superó la validación
            $this->load->view('login');                     //   En caso que no, volvemos a presentar la pantalla de login
         }
         else{                                       //   Si ambos campos fueron correctamente rellanados por el usuario,
            $this->load->model('usuarios_model');
            $ExisteUsuarioyPassoword=$this->usuarios_model->ValidarUsuario($_POST['maillogin'],$_POST['passwordlogin']);   //   comprobamos que el usuario exista en la base de datos y la password ingresada sea correcta
            if($ExisteUsuarioyPassoword){   // La variable $ExisteUsuarioyPassoword recibe valor TRUE si el usuario existe y FALSE en caso que no. Este valor lo determina el modelo.
               echo "Validacion Ok<br><br><a href=''>Volver</a>";   //   Si el usuario ingresó datos de acceso válido, imprimos un mensaje de validación exitosa en pantalla
            }
            else{   //   Si no logró validar
               $data['error']="E-mail o password incorrecta, por favor vuelva a intentar";
               $this->load->view('login',$data);   //   Lo regresamos a la pantalla de login y pasamos como parámetro el mensaje de error a presentar en pantalla
            }
         }
      }
   }
}
?>

Paso 2: Código para la vista login.php:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Demo del script:   ¿Cómo hacer un login de usuarios en php?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Efectúa tus propias pruebas on-line. Para ejecutarlo en tu sitio necesitas del framework CodeIgniter, provisto gratis por la empresa de hosting Solo10.com." />
<meta name="keywords" content="php, login, codeigniter, hosting, demo, web hosting, script, usuarios" />

<link rel="stylesheet" href="http://www.blogdephp.com/script/php-login.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://www.blogdephp.com/script/addtoany.min.css" type="text/css" media="screen">


<meta name="google-site-verification" content="xWxEFUMgHER4nLx6TAXD9rHFhclvQkEX-RX6qClbszI" />
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20047775-3']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

<meta property="og:title" content="¿Cómo hacer un login de usuarios en php y codeigniter? Ver script y demo !" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="http://www.blogdephp.com/script/php/login/" />
<meta property="og:image" content="http://www.blogdephp.com/images/php.gif" />
<meta property="og:site_name" content="www.blogdephp.com" />
<meta property="fb:admins" content="100001608753773" />

</head>

<body style="margin-top:0px">
<?php echo form_open('php/login/'); ?>
<div class="Info">
   <p class="Titulo"><h1>Demo del script:   <a href="/php-login/">¿Cómo hacer un login de usuarios en php y codeigniter?</a></h1></p>
   <p> </p>
</div>
<div id="LoginUsuarios">
   <div class="fila">
      <div class="LoginUsuariosCabecera">E-mail:</div>
      <div class="LoginUsuariosDato"><input type="text" name="maillogin" value="<?= set_value('maillogin'); ?>" size="25" /></div>
      <div class="LoginUsuariosError">
      <?
      if(isset($error)){
         echo "<p>".$error."</p>";
      }
      echo form_error('maillogin');
      ?>
      </div>
   </div>
   <div class="fila">
      <div class="LoginUsuariosCabecera">Contraseña:</div>
      <div class="LoginUsuariosDato"><input type="password" name="passwordlogin" value="<?= set_value('passwordlogin'); ?>" size="25" /></div>
      <div class="LoginUsuariosError"><?= form_error('passwordlogin');?></div>
   </div>
   <div class="fila">
      <div class="LoginUsuariosCabecera"></div>
      <div class="LoginUsuariosDato"></div>
   </div>
   <div class="fila">
      <div class="LoginUsuariosCabecera"><input type="submit" value="Ingresar"></div>
      <div class="LoginUsuariosDato"></div>
   </div>
</div>
</form>
<p> </p>
<div class="Info">
   <p><u><h2>Datos de acceso (demo)</h2></u></p>
   <p> </p>
   <p>(correspondiente a un usuario ya ingresado en la base de datos)</p>
   <p><strong>e-mail</strong>: diego@blogdephp.com</p>
   <p><strong>password</strong>: blogdephp</strong></p>
</div>
<p> </p>

<div class="addtoany_share_save_container"><div class="a2a_kit addtoany_list"><iframe class="addtoany_special_service facebook_like" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblogdephp.com%2Fphp-login%2F&layout=button_count&show_faces=false&width=75&action=like&colorscheme=light&height=15" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:90px;height:20px"></iframe><iframe class="addtoany_special_service twitter_tweet" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fblogdephp.com%2Fphp-login%2F&counturl=http%3A%2F%2Fblogdephp.com%2Fphp-login%2F&count=horizontal&text=%C2%BFC%C3%B3mo%20hacer%20un%20login%20de%20usuarios%20en%20Php%20y%20Codeigniter%3F: " frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:80px;height:20px"></iframe><a class="a2a_button_linkedin" href="http://www.addtoany.com/add_to/linkedin?linkurl=http%3A%2F%2Fblogdephp.com%2Fphp-login%2F&linkname=%C2%BFC%C3%B3mo%20hacer%20un%20login%20de%20usuarios%20en%20Php%20y%20Codeigniter%3F" title="LinkedIn" rel="nofollow" target="_blank"><img src="http://blogdephp.com/wp-content/plugins/add-to-any/icons/linkedin.png" width="16" height="16" alt="LinkedIn" border="0" style="margin-right:20px; "/></a><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://blogdephp.com/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share" border="0"/></a></div>
<script type="text/javascript"></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
<div class="Info">
   <p><u><h2>Requerimientos necesarios en tu web hosting para poder ejecutar el script</h2></u></p>
   <p> </p>
   <p>Para poder implementar este script de login, se requiere el framework de php "Codeigniter"</p>
   <p>(esta maravillosa herramienta nos ayuda a ahorrar mucho tiempo y esfuerzo en nuestros trabajos de programación php).</p>
   <p> </p>
   <p>La empresa <a href="http://www.solo10.com/productos/WebHostingLinux/?safblogdephp">Solo10.com</a>, cuando contratas un paquete de hosting anual desde u$s 49.95,</p>
   <p>te ofrece la instalación y configuración inicial del Codeigniter gratis :-)</p>
   <p> </p>
   <p>Este blog y demo se encuentran alojados en los servidores de Solo10.com.</p>
   <p>Te recomiendo el <a href="http://www.solo10.com/productos/WebHostingLinux/?safblogdephp">servicio de hosting</a> que ofrece esta empresa de hablahispana!</p>
</div>
<p> </p>
<div class="Info">
   <p><a href="http://www.blogdephp.com/">Ver más artículos y scripts de php y codeigniter</a></p>
</div>
</body>
</html>

Paso 3: Código para el modelo usuarios_model.php

<?php
class Usuarios_model extends CI_Model{
   function ValidarUsuario($email,$password){         //   Consulta Mysql para buscar en la tabla Usuario aquellos usuarios que coincidan con el mail y password ingresados en pantalla de login
      $query = $this->db->where('Usuario',$email);   //   La consulta se efectúa mediante Active Record. Una manera alternativa, y en lenguaje más sencillo, de generar las consultas Sql.
      $query = $this->db->where('Password',$password);
      $query = $this->db->get('Usuarios');
      return $query->row();    //   Devolvemos al controlador la fila que coincide con la búsqueda. (FALSE en caso que no existir coincidencias)
   }
}
?>

Paso 4: Consulta Mysql para crear la tabla de usuarios

CREATE TABLE `Usuarios` ( `Id` INT NOT NULL AUTO_INCREMENT , `Usuario` VARCHAR( 50 ) NOT NULL , `Password` VARCHAR( 50 ) NOT NULL , PRIMARY KEY ( `Id` ) ) ENGINE = MYISAM ; INSERT INTO `Usuarios` ( `Id` , `Usuario` , `Password` ) VALUES ( NULL , 'diego@blogdephp.com', 'blogdephp' );

Paso 5: Importante: pre-cargar librerías de CodeIgniter para base de datos y validaciones de formularios

Abrir el archivo autoload.php, ubicado en la ruta /application/config/" y localizar la siguiente línea:

$autoload['libraries']=array();

Reemplazarla por:

$autoload['libraries'] = array('database','form_validation');

(esto es indispensable para poder utilizar los métodos de validaciones que nos brinda CodeIgniter).

Nota: La gran ventaja de cargar una librería desde el archivo autoload.php es que luego la tenemos disponible, y podemos utilizarla, desde cualquier parte del Framework. De lo contrario, tendriamos que cargar la librería en todos los controladores en que la necesitemos (ocasionando redundancia de código).

Por qué es importante un sistema de login de usuarios

Como habéis podido comprobar, se trata de un script que, mediante pocas líneas de código, permite configurar el sistema de autenticación de usuarios en tu propio sitio web.

Sobra decir que esta implementación es sumamente importante en cualquier proyecto y la necesitaremos en cualquier web que desarrollemos, por simple que sea nuestra aplicación. Esto es debido a que en cualquier sitio web, medianamente avanzado, seguramente existe cierta información y funciones que nos interesa ofrecer únicamente a usuarios registrados y no al resto del público. Así como posibilitar que un usuario tenga guardada cierta información y ésta esté asociada a su cuenta, sólo visible por él.

Pensemos en la posibilidad de estar realizando un sistema web para un periódico. En ese caso interesará que los periodistas puedan acceder al sistema (mediante un usuario y clave) y puedan dar de alta noticias u otro tipo de artículos. Por supuesto, esta función debería ser accesible únicamente por periodistas debidamente autenticados y no por otro tipo de usuario que pueda acceder a la web del medio de comunicación.

Funcionalidades deseables en un sistema de autenticación

A continuación veamos una lista de las cosas que querremos tener disponibles en un sistema de login de usuarios.

Permitir acceso a determinada información y funcionalidades, pero que éste se otorgue solamente a determinados usuarios, aquellos que se encuentren en una tabla de la base de datos de nuestra aplicación web. Nosotros trabajaremos con MySQL.
Enviar un mensaje de error cuando no se ha indicado algún campo de la pantalla de acceso autenticado.
Enviar un mensaje de error cuando los datos cumplimentados para el login no coinciden con ningún usuario de los existentes en la base de datos.
Recordar los datos que tenía escritos el visitante, cuando no supera el login y se le vuelve a mosotrar la pantalla de acceso autenticado.

Explicación técnica de los scripts

Como pueden observar, los scripts de este sistema de login (listados al principio del artículo) se encuentran comentados para una mayor facilidad de comprensión. Existen comentarios para cada una de las sentencias importantes, que relatan de manera resumida cada una de las funciones que cumplen. No obstante, intentaremos ahora realizar una explicación general de cómo funciona el sistema desarrollado, de forma que las personas lo puedan entender tan fácil como si fuera un cuento :-)

Comencemos con la pantalla de acceso, que está en la página login.php, donde el usuario podrá escribir sus datos de autenticación (usuario y password). Recordemos que en CodeIgniter todo lo que se basa en la interacción con el usuario (entrada y salida de datos) se debe desarrollar por medio de las las vistas (capa presentación).

Aquí la sentencia importante es la siguiente:

<?php echo form_open('php/login/'); ?>

Con ello se genera el formulario HTML para hacer el login y especificamos que sus datos deben ser enviados y procesados por el método login del controlador php. La función form_open es propia de CodeIgniter.

Otro punto importante a tener en cuenta está en la vista, en el momento en el que creamos los campos (osea, las cajas de texto donde el usuario podrá escribir los datos de acceso para enviarlos a la aplicación):

Aquí estamos creando un campo INPUT (de texto) llamado maillogin. La función set_value sirve para recordar los datos rellenados por el usuario, en caso de que su acceso no sea válido y tengamos que volver a mostrar la pantalla de acceso. Este simple detalle ofrece un valor añadido que permite una mayor usabilidad en nuestra aplicación.

Ahora podemos analizar el controlador php.php. Sin lugar a dudas, aquí reside la parte más compleja del script. Por esa razón se han colocado comentarios para cada una de las líneas de código, lo que espero mejore su comprensión. Te sugiero comenzar leyendo directamente los comentarios en el código fuente.

El controlador (php.php) toma los datos que nos envían del formulario de autenticación y realiza las correspondientes validaciones. También consulta al modelo (usuarios_model.php) si el usuario y clave indicados existen en algún registro de la tabla de usuarios, es decir, su el usuario y clave son válidos. Por último, este controlador decide si el usuario indicado pueda o no entrar a la aplicación, y comunica su decisión a la vista (login.php), que es la encargada de mostrar la respuesta correspondiente en la página.

Antes de acabar, me parece conveniente remarcar algunas sentencias y declaraciones puntuales que son elementales en PHP, y que por ello servirán en toda aplicación web que desarrolles.

$_POST['maillogin']
(Esto accede a los valores llegados del formulario en el campo "maillogin")

$this->load->model('usuarios_model');
(Esto es una carga del modelo de usuarios "usuarios_model", de modo que se puedan utilizar sus recursos en los controladores.)

$this->usuarios_model->ValidarUsuario($_POST['maillogin'],$_POST['passwordlogin']);
(Esto es una llamada para ejecutar el método ValidarUsuario que hay en el modelo usuarios_model. En el que le pasamos dos parámetros).

Tenemos pensado mejorar este sistema de autenticación de usuarios en el futuro, con cosas como implementar que un usuarios pueda acceder a páginas exclusivas con información únicamente válida y accesible por él. Y cómo acceder a la página sin tener que escribir en cada acceso sus sus de login, es decir, que los tenga que escribir una única vez y que la aplicación los recuerde en futuros accesos.

Espero que mis explicaciones y scripts resulten de utilidad para los desarrolladores en CodeIgniter y que no resulte difícil de implementar este sistema de login de usuarios. Sobre todo, que las persoans hayan podido aprender algo con este artículo.

Por supuesto, si han quedado dudas o si se quieren realizar consultas, podéis publicar comentarios y trataré de contestarlos para aclarar lo que fuera necesario.

Ing. Diego Angelini

CEO & fundador de Blog de PHP | Responsable de programación de la página www.sol...

Manual

Manual de CodeIgniter

Funciones comunes en CodeIgniter

Enrutado personalizado de URLs en CodeIgniter