Autenticación con Laravel 4

La autenticación es necesaria para prácticamente cualquier tipo de aplicación web. En este tutorial, me gustaría mostrarte cómo puedes crear una pequeña aplicación de autenticación con Laravel 4. Comenzaremos desde el principio creando nuestra aplicación Laravel usando composer, creando la base de datos, cargando en twitter Bootstrap, creando un diseño principal, registrando usuarios, iniciando y cerrando sesión y protegiendo rutas usando filtros. Tenemos mucho código que cubrir, ¡así que comencemos!

Instalación

Comencemos este tutorial configurando todo lo que necesitaremos para construir nuestra aplicación de autenticación. Primero tendremos que descargar e instalar Laravel más todas sus dependencias. También utilizaremos el popular Twitter Bootstrap para hacer que nuestra aplicación se vea bonita. Luego haremos un poco de configuración, nos conectaremos a nuestra base de datos y crearemos la tabla requerida y, finalmente, pondremos en marcha nuestro servidor para asegurarnos de que todo funcione como se esperaba.

Descarga

Usemos composer para crear una nueva aplicación Laravel. Primero cambiaré los directorios en mi carpeta Sities, ya que es donde prefiero almacenar todas mis aplicaciones:

1

cd Sites

Luego ejecuta el siguiente comando para descargar e instalar Laravel (llamé a mi aplicación laravel-auth) y todas sus dependencias:

1

composer create-project laravel/laravel laravel-auth

Añadir en Twitter Bootstrap

Ahora, para evitar que nuestra aplicación sufra un destino horrible y feo de ser diseñada por la tuya de verdad, incluiremos el bootstrap de Twitter dentro de nuestro archivo composer.json:

1

{

2

	"name": "laravel/laravel",

3

	"description": "The Laravel Framework.",

4

	"keywords": ["framework", "laravel"],

5

	"require": {

6

		"laravel/framework": "4.0.*",

7

		"twitter/bootstrap": "*"

8

	},

9

10

	// The rest of your composer.json file below ....

... y luego podemos instalarlo:

1

composer update

Ahora, si abres tu aplicación en tu editor de texto, estoy usando Sublime, y si miras en la carpeta de vendor, verás que tenemos el Twitter Bootstrap aquí.

Ahora por defecto nuestro Twitter Bootstrap está compuesto por archivos .less y antes podemos compilarlos en .CSS, necesitamos instalar todas las dependencias de bootstrap. Esto también nos permitirá usar el Makefile que se incluye con el bootstrap de Twitter para trabajar con el marco (como compilar archivos y ejecutar pruebas).

En tu terminal, cambiemos los directorios a vendor/twitter/bootstrap y ejecutemos npm install:

1

cd ~/Sites/laravel-auth/vendor/twitter/bootstrap

2

npm install

Con todo listo para usar, ahora podemos usar el Makefile para compilar los archivos .less en CSS. Ejecutemos el siguiente comando:

1

make bootstrap-css

Ahora deberías notar que tenemos dos nuevas carpetas dentro de nuestro directorio vendor/twitter/bootstrap llamadas bootstrap/css que contienen nuestros archivos CSS bootstrap.

Ahora podemos usar los archivos CSS de bootstrap más adelante, en nuestro diseño, para dar estilo a nuestra aplicación.

Pero, ¡tenemos un problema! Necesitamos que estos archivos CSS sean de acceso público, actualmente se encuentran en nuestra carpeta de vendor. ¡Pero esta es una solución fácil! Podemos usar artisan para publish (moverlos) a nuestra carpeta public / packeges, de esa manera podemos vincular los archivos CSS requeridos a nuestra plantilla de diseño principal, que crearemos más adelante.

Primero, volveremos a cambiar a la raíz de nuestra aplicación Laravel y luego ejecutaremos artisan para mover los archivos:

1

cd ~/Sites/laravel-auth

2

php artisan asset:publish --path="vendor/twitter/bootstrap/bootstrap/css" bootstrap/css

El comando artisan asset:publish nos permite proporcionar una opción --path para qué archivos queremos mover a nuestro directorio public/packages. En este caso, le decimos que publique todos los archivos CSS que compilamos anteriormente y los coloque dentro de dos nuevas carpetas llamadas bootstrap / css. Tu directorio public ahora debería verse como la captura de pantalla a continuación, con nuestros archivos CSS de Twitter Bootstrap ahora de acceso público:

Establecer permisos

A continuación, debemos asegurarnos de que nuestro servidor web tenga los permisos adecuados para escribir en nuestro directorio de app / storage. Desde la aplicación, ejecuta el siguiente comando:

1

chmod -R 755 app/storage

Conéctate a nuestra base de datos

A continuación, necesitamos una base de datos que nuestra aplicación de autenticación pueda usar para almacenar a nuestros usuarios. Así que enciende la base de datos con la que te sientas más cómodo usando, personalmente, prefiero MySQL junto con PHPMyAdmin. He creado una nueva base de datos vacía llamada: laravel-auth.

Ahora conectemos esta base de datos a nuestra aplicación. En app/config, abre la database.php. Ingresa en tu base de datos apropiada las credenciales, las mías son las siguientes:

1

// Default Database Connection Name

2

3

'default' => 'mysql',

4

5

// Database Connections

6

7

	'connections' => array(

8

9

		'mysql' => array(

10

			'driver'    => 'mysql',

11

			'host'      => '127.0.0.1',

12

			'database'  => 'laravel-auth',

13

			'username'  => 'root',

14

			'password'  => '',

15

			'charset'   => 'utf8',

16

			'collation' => 'utf8_unicode_ci',

17

			'prefix'    => '',

18

		),

19

20

		// the rest of your database.php file's code ...

Crea la tabla de usuarios

Con nuestra base de datos creada, no será muy útil a menos que tengamos una tabla para almacenar a nuestros usuarios. Usemos artisan para crear un nuevo archivo de migración llamado: create-users-table:

1

php artisan migrate:make create-users-table

Editemos ahora nuestro archivo de migración recién creado para crear nuestra tabla de users utilizando el Generador de esquemas. Comenzaremos con el método up():

1

public function up()

2

{

3

	$table->increments('id');

4

	$table->string('firstname', 20);

5

	$table->string('lastname', 20);

6

	$table->string('email', 100)->unique();

7

	$table->string('password', 64);

8

	$table->timestamps();

9

}

Esto creará una tabla llamada users y tendrás un campo de id como clave principal, campos de firstname y lastname, un campo de email que requiere que el correo electrónico sea único y, finalmente, un campo para la pasword (debe tener al menos 64 caracteres de longitud), así como algunas timestamps.

Ahora tenemos que rellenar el método down() en caso de que necesitemos revertir nuestra migración, para soltar la tabla de users:

1

public function down()

2

{

3

	Schema::drop('users');

4

}

Y ahora podemos ejecutar la migración para crear nuestra tabla de users:

1

php artisan migrate

Inicia el servidor y pruébalo

Muy bien, nuestra aplicación de autenticación está llegando muy bien. Hemos hecho bastante preparación, iniciemos nuestro servidor y obtengamos una vista previa de nuestra aplicación en el navegador:

1

php artisan serve

Genial, el servidor se inicia y podemos ver nuestra página de inicio:

Haz que la aplicación se vea bonita

Antes de continuar, es hora de crear un archivo de diseño principal, que utilizarás el Twitter Bootstrap para darle un poco de estilo a nuestra aplicación de autenticación.

Creación de un archivo de diseño principal

En app/views/ crear una nueva carpeta llamada layouts y dentro de ella, crear un nuevo archivo llamado main.blade.php y vamos a colocar en la siguiente estructura HTML básica:

1

<!DOCTYPE html>

2

<html lang="en">

3

  <head>

4

    <meta charset="utf-8">

5

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

6

7

    <title>Authentication App With Laravel 4</title>

8

  </head>

9

10

  <body>

11

12

  </body>

13

</html>

Vinculación en los archivos CSS

A continuación, debemos vincular nuestro archivo CSS de arranque, así como nuestro propio archivo CSS main, en nuestra etiqueta head, justo debajo de nuestro title:

1

	<head>

2

    	<meta charset="utf-8">

3

    	<meta name="viewport" content="width=device-width, initial-scale=1.0">

4

5

    	<title>Authentication App With Laravel 4</title>

6

    	{{ HTML::style('packages/bootstrap/css/bootstrap.min.css') }}

7

    	{{ HTML::style('css/main.css')}}

8

  	</head>

Ahora solo necesitamos crear este archivo main.css donde podemos agregar nuestro propio estilo personalizado para nuestra aplicación. En el directorio public, crea una nueva carpeta llamada css y dentro de ella crea un nuevo archivo llamado main.css.

Termina el diseño principal

Dentro de nuestra etiqueta body, vamos a crear un pequeño menú de navegación con algunos enlaces para registrarse e iniciar sesión en nuestra aplicación:

1

<body>

2

3

  	<div class="navbar navbar-fixed-top">

4

	  	<div class="navbar-inner">

5

	    	<div class="container">

6

				<ul class="nav">  

7

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

8

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

9

				</ul>  

10

	    	</div>

11

	  	</div>

12

	</div> 

13

14

</body>

Observa el uso de varias clases bootstrap para aplicar un estilo adecuado a la barra de navegación. Aquí solo estamos usando un par de DIV para envolver una lista desordenada de enlaces de navegación, bastante simple.

Para nuestra aplicación, vamos a querer dar a nuestros usuarios mensajes flash simples, como un mensaje de éxito cuando el usuario se registra. Estableceremos este mensaje flash desde dentro de nuestro controlador, pero nos haremos eco del valor del mensaje aquí en nuestro diseño. Así que vamos a crear otro div con una clase de .container y mostrar cualquier mensaje flash disponible justo después de nuestra barra de navegación:

1

<body>

2

3

  	<div class="navbar navbar-fixed-top">

4

	  	<div class="navbar-inner">

5

	    	<div class="container">

6

				<ul class="nav">  

7

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

8

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

9

				</ul>  

10

	    	</div>

11

	  	</div>

12

	</div> 

13

14

15

    <div class="container">

16

    	@if(Session::has('message'))

17

			<p class="alert">{{ Session::get('message') }}</p>

18

		@endif

19

    </div>

20

21

	</body>

Para mostrar el mensaje flash, primero he usado una instrucción Blade if para comprobar si tenemos un mensaje flash para mostrar. Nuestro mensaje flash estará disponible en la sesión bajo message. Así que podemos usar el método Session::has() para comprobar ese mensaje. Si eso se evalúa como true, creamos un párrafo con la clase de alert de arranque de Twitter y llamamos al método Session::get() para mostrar el valor del mensaje.

Ahora, por último, al menos para nuestro archivo de diseño, hagamos eco de una variable $content, justo después de nuestro mensaje flash. Esto nos permitirá decirle a nuestro controlador que use este archivo de diseño, y nuestras vistas se mostrarán en lugar de esta variable $content, aquí mismo en el diseño:

1

<body>

2

3

  	<div class="navbar navbar-fixed-top">

4

	  	<div class="navbar-inner">

5

	    	<div class="container">

6

				<ul class="nav">  

7

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

8

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

9

				</ul>  

10

	    	</div>

11

	  	</div>

12

	</div> 

13

14

15

    <div class="container">

16

    	@if(Session::has('message'))

17

			<p class="alert">{{ Session::get('message') }}</p>

18

		@endif

19

20

		{{ $content }}

21

    </div>

22

23

	</body>

Estilo personalizado

Ahora que tenemos nuestro diseño completo, solo necesitamos agregar algunas pequeñas reglas CSS personalizadas a nuestro archivo main.css para personalizar nuestro diseño un poco más. Sigue adelante y agrega el siguiente fragmento de CSS, es bastante autoexplicativo:

1

body {

2

	padding-top: 40px;

3

}

4

5

.form-signup, .form-signin {

6

	width: 400px;

7

	margin: 0 auto;

8

}

Agregué solo una pequeña cantidad de relleno en la parte superior de la etiqueta del body para evitar que nuestra barra de navegación se superponga a nuestro contenido principal. Luego me pongo en las clases .form-signup y .form-signin de Bootstrap, que aplicaremos a nuestros formularios de registro e inicio de sesión para establecer su ancho y centrarlos en la página.

Creación de la página de registro

Ahora es el momento de comenzar a construir la primera parte de nuestra aplicación de autenticación y esa es nuestra página de registro.

El controlador de usuarios

Comenzaremos creando un nuevo UsersController dentro de nuestra carpeta de app / controllers y en ella, definiremos nuestra clase UsersController:

1

<?php

2

3

class UsersController extends BaseController {

4

5

}

6

?>

A continuación, le digamos a este controlador que use nuestro diseño main.blade.php. En la parte superior de nuestro controlador, establece la propiedad $layout:

1

<?php

2

3

class UsersController extends BaseController {

4

	protected $layout = "layouts.main";

5

}

6

?>

Ahora dentro de nuestro UsersController, necesitamos una acción para nuestra página de registro. Nombré mi acción getRegister:

1

public function getRegister() {

2

	$this->layout->content = View::make('users.register');

3

}

Aquí simplemente establecemos la propiedad de diseño de content (esta es la variable $content que hacemos eco en nuestro archivo de diseño) para mostrar un archivo de vista users.register.

Las rutas del controlador de usuarios

Con nuestro controlador creado a continuación, necesitamos configurar las rutas para todas las acciones que podamos crear dentro de nuestro controlador. Dentro de nuestra app / routes.php archivo primero eliminemos el valor predeterminado / ruta y luego agreguemos el siguiente código para crear nuestras rutas usersController:

1

Route::controller('users', 'UsersController');

Ahora, cada vez que creemos una nueva acción, estará disponible utilizando un URI en el siguiente formato: /users/actionName. Por ejemplo, tenemos una acción getRegister, podemos acceder a esta utilizando el siguiente URI: /users/register.

Creación de la vista Registro

Dentro de la app/views, crea una nueva carpeta denominada users. Esto mantendrá todos los archivos de vista de nuestro UsersController. Dentro de la carpeta de users, crea un nuevo archivo denominado register.blade.php y coloca el siguiente código dentro de él:

1

{{ Form::open(array('url'=>'users/create', 'class'=>'form-signup')) }}

2

	<h2 class="form-signup-heading">Please Register</h2>

3

4

	<ul>

5

		@foreach($errors->all() as $error)

6

			<li>{{ $error }}</li>

7

		@endforeach

8

	</ul>

9

10

	{{ Form::text('firstname', null, array('class'=>'input-block-level', 'placeholder'=>'First Name')) }}

11

	{{ Form::text('lastname', null, array('class'=>'input-block-level', 'placeholder'=>'Last Name')) }}

12

	{{ Form::text('email', null, array('class'=>'input-block-level', 'placeholder'=>'Email Address')) }}

13

	{{ Form::password('password', array('class'=>'input-block-level', 'placeholder'=>'Password')) }}

14

	{{ Form::password('password_confirmation', array('class'=>'input-block-level', 'placeholder'=>'Confirm Password')) }}

15

16

	{{ Form::submit('Register', array('class'=>'btn btn-large btn-primary btn-block'))}}

17

{{ Form::close() }}

Aquí usamos la clase Form para crear nuestro formulario de registro. Primero llamamos al método open(), pasando una serie de opciones. Le decimos al formulario que se envíe a un URI de users / create estableciendo la clave url. Este URI se utilizará para procesar el registro del usuario. Nos encargaremos de esto a continuación. Después de establecer la url, le damos al formulario una clase de form-signup.

Después de abrir el formulario, solo tenemos un encabezado h2 con la clase .form-signup-heading.

A continuación, usamos un bucle @foreach, que recorre todos los mensajes de error de validación de formularios y muestra cada $error en la lista desordenada.

Después de los mensajes de error de validación del formulario, creamos varios campos de entrada del formulario, cada uno con una clase de input-block-level y un valor de marcador de posición. Tenemos entradas para los campos de confirmación de nombre, apellido, correo electrónico, contraseña y contraseña. El segundo argumento del método text() se establece en null, ya que estamos usando un placeholder, no necesitamos establecer el atributo de valor de los campos de entrada, por lo que lo acabo de establecer en null en este caso.

Después de los campos de entrada, creamos nuestro botón de envío y le aplicamos varias clases diferentes para que el bootstrap de Twitter maneje el estilo por nosotros.

Por último, simplemente cerramos el formulario usando el método close().

Asegúrate de iniciar tu servidor, cambiar a tu navegador favorito, y si navegamos a http://localhost:8000/users/register deberías ver tu página de registro:

Procesamiento de la presentación del formulario de registro

Ahora, si intentaras completar los campos del formulario de registro y presionar el botón Registrarse, habría sido recibido con una excepción NotFoundHttpException, y esto se debe a que no tenemos una ruta que coincida con los users / create URI, porque no tenemos una acción para procesar el envío del formulario. ¡Así que ese es nuestro siguiente paso!

Crea de una acción postCreate

Dentro de tu UsersController vamos a crear otra acción llamada postCreate:

1

public function postCreate() {

2

3

}

Ahora esta acción debe manejar el procesamiento del envío del formulario validando los datos y mostrando mensajes de error de validación o debe crear el nuevo usuario, hashear la contraseña del usuario y guardar el usuario en la base de datos.

Validación de formularios

Comencemos con la validación de los datos del envío del formulario. Primero necesitamos crear nuestras reglas de validación con las que validaremos los datos del formulario. Prefiero almacenar mis reglas de validación en mi modelo, ya que esa es la convención a la que estoy acostumbrado, de trabajar con otros marcos. De forma predeterminada, Laravel se envía con un modelo User.php ya creado para ti.

En app/models, abre ese archivo User.php y, en la parte superior, agrega el siguiente código:

1

public static $rules = array(

2

	'firstname'=>'required|alpha|min:2',

3

	'lastname'=>'required|alpha|min:2',

4

	'email'=>'required|email|unique:users',

5

	'password'=>'required|alpha_num|between:6,12|confirmed',

6

	'password_confirmation'=>'required|alpha_num|between:6,12'

7

	);

Aquí estoy validando los campos de firstname y lastname para asegurarme de que estén presentes, solo contengan caracteres alfa y que sean de al menos dos caracteres de longitud. A continuación, válido el campo de email para asegurarme de que está presente, que es una dirección de correo electrónico válida y que es única para la tabla de usuarios, ya que no queremos tener direcciones de correo electrónico duplicadas para nuestros usuarios. Por último, válido la password y password_confirmation campos. Me aseguro de que ambos estén presentes, contengan solo caracteres alfanuméricos y que tienen entre seis y doce caracteres de longitud. Además, observa la regla de validación confirmed, esto asegura que el campo de password sea exactamente el mismo que el campo de password_confirmation coincidente, para garantizar que los usuarios hayan ingresado la contraseña correcta.

Ahora que tenemos nuestras reglas de validación, podemos usarlas en nuestro UsersController para validar el envío del formulario. En la acción postCreate de UsersController, comencemos por verificar si los datos pasan la validación, agrega el siguiente código:

1

public function postCreate() {

2

	$validator = Validator::make(Input::all(), User::$rules);

3

4

	if ($validator->passes()) {

5

		// validation has passed, save user in DB

6

	} else {

7

		// validation has failed, display error messages	

8

	}

9

}

10

}

Comenzamos creando un objeto validador llamado $validator llamando al método User::validate(). Esto acepta los dos argumentos, la entrada de formulario enviada que debe validarse y las reglas de validación con las que se deben validar los datos. Podemos obtener los datos del formulario enviados llamando al método Input::all() y lo pasamos como el primer argumento. Podemos obtener nuestras reglas de validación que creamos en nuestro modelo de user accediendo a la propiedad estática User::$rules y pasándola como segundo argumento.

Una vez que hemos creado nuestro objeto validador, llamamos a su método passes(). Esto devolverá true o false y lo usamos dentro de una instrucción if para verificar si nuestros datos han pasado la validación.

Dentro de nuestra instrucción if, si la validación ha pasado, agrega el siguiente código:

1

if ($validator->passes()) {

2

	$user = new User;

3

	$user->firstname = Input::get('firstname');

4

	$user->lastname = Input::get('lastname');

5

	$user->email = Input::get('email');

6

	$user->password = Hash::make(Input::get('password'));

7

	$user->save();

8

9

	return Redirect::to('users/login')->with('message', 'Thanks for registering!');

10

} else {

11

	// validation has failed, display error messages	

12

}

Siempre que los datos que el usuario envía hayan pasado la validación, creamos una nueva instancia de nuestro modelo de usuario: new user; almacenándolo en una variable $user. A continuación, podemos utilizar el objeto $user y establecer cada una de las propiedades del usuario utilizando los datos del formulario enviado. Podemos capturar los datos enviados individualmente usando el método Input::get('fieldName'). Donde fieldName es el valor del campo que deseas recuperar. Aquí hemos tomado los campos de nombre, apellido y correo electrónico para usar para nuestro nuevo usuario. También tomamos el valor del campo de contraseña, pero no solo queremos almacenar la contraseña en la base de datos como texto sin formato, por lo que usamos el método Hash::make() para hachear la contraseña enviada por nosotros antes de guardarla. Por último, guardamos al usuario en la base de datos llamando al método save() del objeto $user.

Después de crear el nuevo usuario, lo redirigimos a la página de inicio de sesión (crearemos la página de inicio de sesión en unos momentos) utilizando el método Redirect::to(). Esto solo toma el URI de dónde deseas redirigir. También encadenamos la llamada al método with() para darle al usuario un mensaje flash que le informa que tu registro fue exitoso.

Ahora, si la validación no pasa, necesitamos volver a mostrar la página de registro, junto con algunos mensajes de error de validación, con la entrada anterior, para que el usuario pueda corregir sus errores. Dentro de la instrucción else, agrega el código siguiente:

1

if ($validator->passes()) {

2

	$user = new User;

3

	$user->firstname = Input::get('firstname');

4

	$user->lastname = Input::get('lastname');

5

	$user->email = Input::get('email');

6

	$user->password = Hash::make(Input::get('password'));

7

	$user->save();

8

9

	return Redirect::to('users/login')->with('message', 'Thanks for registering!');

10

} else {

11

	return Redirect::to('users/register')->with('message', 'The following errors occurred')->withErrors($validator)->withInput();

12

}

Aquí simplemente redirigimos al usuario a la página de registro con un mensaje flash que te informa que se han producido algunos errores. Nos aseguramos de mostrar los mensajes de error de validación llamando al método withErrors($validator) y pasando nuestro $validator objetarlo. Finalmente, llamamos al método withInput() para que el formulario recuerde lo que el usuario escribió originalmente y eso hará que sea agradable y fácil para el usuario corregir los errores.

Agrega en el filtro CSRF Before

Ahora debemos asegurarnos de proteger nuestras acciones POST de los ataques CSRF configurando el filtro CSRF antes dentro del método constructor de nuestro UsersController. En la parte superior de UsersController, agrega el código siguiente:

1

public function __construct() {

2

	$this->beforeFilter('csrf', array('on'=>'post'));

3

}

Dentro de nuestro constructor, llamamos al método beforeFilter() y pasamos la cadena csrf, como primer argumento. csrf es el filtro que queremos aplicar a nuestras acciones. Luego pasamos una matriz como el segundo argumento y le decimos que solo aplique este filtro en las solicitudes POST. Al hacer esto, nuestros formularios pasarán un token CSRF cada vez que se envíen. Este filtro CSRF antes se asegurará de que todas las solicitudes POST a nuestra aplicación contengan este token, lo que nos da la confianza de que las solicitudes POST no se están emitiendo a nuestra aplicación desde otras fuentes externas.

Creación de la página de inicio de sesión

Antes de salir corriendo y probar tu página de registro, primero debemos crear la página de inicio de sesión para que cuando nuestro envío de formulario de registro sea exitoso, no recibamos un error. Recuerda, si la validación del formulario pasa, guardamos al usuario y lo redirigimos a la página de inicio de sesión. Sin embargo, actualmente no tenemos esta página de inicio de sesión, ¡así que vamos a crearla!

Aún dentro de usersController, crea una nueva acción denominada getLogin y colócala en el código siguiente:

1

public function getLogin() {

2

	$this->layout->content = View::make('users.login');

3

}

Esto mostrará un archivo de vista users.login. Ahora necesitamos crear ese archivo de vista. En app/views/users, crea un nuevo archivo denominado login.blade.php y agrega el código siguiente:

1

{{ Form::open(array('url'=>'users/signin', 'class'=>'form-signin')) }}

2

	<h2 class="form-signin-heading">Please Login</h2>

3

4

	{{ Form::text('email', null, array('class'=>'input-block-level', 'placeholder'=>'Email Address')) }}

5

	{{ Form::password('password', array('class'=>'input-block-level', 'placeholder'=>'Password')) }}

6

7

	{{ Form::submit('Login', array('class'=>'btn btn-large btn-primary btn-block'))}}

8

{{ Form::close() }}

Este código es muy similar al código que usamos en nuestra vista de register, por lo que simplificaré la explicación esta vez solo a lo que es diferente. Para este formulario, lo enviamos a un URI de user/singnin de sesión y cambiamos la clase del formulario a .form-signin. El h2 se ha cambiado para decir "Please Login" y tu clase también se ha cambiado a .form-signin-heading. A continuación, tenemos dos campos de formulario para que el usuario pueda ingresar su correo electrónico y contraseña, y finalmente nuestro botón de envío que solo dice "Iniciar sesión".

¡Registremos un nuevo usuario!

Finalmente estamos en un punto en el que podemos probar nuestro formulario de registro. Por supuesto, la funcionalidad de inicio de sesión aún no funciona, pero llegaremos a eso lo suficientemente pronto. Solo necesitábamos que existiera la página de inicio de sesión para que nuestra página de registro funcionara correctamente. Asegúrate de que tu servidor todavía se esté ejecutando, cambia a tu navegador y visita http://localhost:8000/users/register. Intenta introducir algunos datos de usuario no válidos para probar los mensajes de error de validación del formulario. Así es como se ve mi página con un usuario no válido:

Ahora intenta registrarte con datos de usuario válidos. Esta vez nos redirigen a nuestra página de inicio de sesión junto con nuestro mensaje de éxito, ¡excelente!

Inicio de sesión

Así que hemos registrado con éxito un nuevo usuario y tenemos una página de inicio de sesión, pero todavía no podemos iniciar sesión. Ahora necesitamos crear la acción postSignin para nuestros users / signin URI, a la que se envía nuestro formulario de inicio de sesión. Volvamos a nuestro UsersController y creemos una nueva acción llamada postSignin:

1

public function postSignin() {

2

3

}

Ahora iniciemos sesión con el usuario, utilizando los datos enviados desde el formulario de inicio de sesión. Agrega el código siguiente a la acción postSignin():

1

if (Auth::attempt(array('email'=>Input::get('email'), 'password'=>Input::get('password')))) {

2

	return Redirect::to('users/dashboard')->with('message', 'You are now logged in!');

3

} else {

4

	return Redirect::to('users/login')

5

		->with('message', 'Your username/password combination was incorrect')

6

		->withInput();

7

}

Aquí intentamos iniciar sesión en el usuario, utilizando el método Auth::attempt(). Simplemente pasamos una matriz que contiene el correo electrónico y la contraseña del usuario que enviaron desde el formulario de inicio de sesión. Este método devolverá true o false si las credenciales del usuario se validan. Así que podemos usar este método attempt() dentro de una instrucción if. Si el usuario ha iniciado sesión, simplemente lo redirigimos a una página de vista del dashboard y le damos un mensaje de éxito. De lo contrario, las credenciales del usuario no se validaron y en ese caso las redirigimos a la página de inicio de sesión, con un mensaje de error, y mostramos la entrada anterior para que el usuario pueda volver a intentarlo.

Creación del panel

Ahora, antes de intentar iniciar sesión con tu usuario recién registrado, necesitamos crear esa página de panel y protegerla de usuarios no autorizados y no registrados. La página del panel solo debe ser accesible para aquellos usuarios que se hayan registrado e iniciado sesión en nuestra aplicación. De lo contrario, si un usuario no autorizado intenta visitar el panel, lo redirigiremos y le solicitaremos que inicie sesión primero.

Mientras aún está dentro de tu UsersController, creemos una nueva acción llamada getDashboard:

1

public function getDashboard() {

2

3

}

Y dentro de esta acción solo mostraremos un archivo de vista users.dashboard:

1

public function getDashboard() {

2

	$this->layout->content = View::make('users.dashboard');

3

}

A continuación, debemos protegerlo de usuarios no autorizados utilizando el filtro de auth antes. En el complemento de usersController, agrega el siguiente código:

1

public function __construct() {

2

	$this->beforeFilter('csrf', array('on'=>'post'));

3

	$this->beforeFilter('auth', array('only'=>array('getDashboard')));

4

}

Esto usará el filtro de auth, que comprueba si el usuario actual ha iniciado sesión. Si el usuario no ha iniciado sesión, se le redirige a la página de inicio de sesión, esencialmente denegando el acceso al usuario. Observa que también estoy pasando una matriz como un segundo argumento, al establecer la only clave, puedo decirte esto antes del filtro para aplicarlo solo a las acciones proporcionadas. En este caso, estoy diciendo que proteja solo la acción getDashboard.

Personalización de filtros

De forma predeterminada, el filtro de auth redirigirá a los usuarios a un URI /login, aunque esto no funciona para nuestra aplicación. Necesitamos modificar este filtro para que redirija a un URI de users/login de sesión en su lugar, de lo contrario obtendremos un error. Abre la app/filters.php y en la sección Filtros de autenticación, cambia el filtro de autenticación para redirigir a los users/login de sesión, de la siguiente manera:

1

/*

2

|--------------------------------------------------------------------------

3

| Authentication Filters

4

|--------------------------------------------------------------------------

5

|

6

| The following filters are used to verify that the user of the current

7

| session is logged into this application. The "basic" filter easily

8

| integrates HTTP Basic authentication for quick, simple checking.

9

|

10

*/

11

12

Route::filter('auth', function()

13

{

14

	if (Auth::guest()) return Redirect::guest('users/login');

15

});

Creación de la vista panel

Antes de que podamos iniciar sesión en nuestra aplicación, debemos crear ese archivo de vista del dasboard. En app/views/users, crea un nuevo archivo denominado dashboard.blade.php e inserta el siguiente fragmento de código:

1

<h1>Dashboard</h1>

2

3

<p>Welcome to your Dashboard. You rock!</p>

Aquí estoy mostrando un párrafo muy simple para que el usuario sepa que ahora está en tu Dashboard.

¡Vamos a iniciar sesión!

Ahora deberíamos poder iniciar sesión. Busca http://localhost:8000/users/login, ingresa las credenciales de tu usuario y pruébalo.

¡Éxito!

Visualización de los vínculos de navegación adecuados

Ok, ahora podemos registrarnos e iniciar sesión en nuestra aplicación, ¡muy genial! Pero tenemos una pequeña peculiaridad aquí, si miras nuestro menú de navegación, a pesar de que hemos iniciado sesión, puedes ver que los botones de registro e inicio de sesión aún se pueden ver. Idealmente, queremos que estos solo se muestren cuando el usuario no ha iniciado sesión. Sin embargo, una vez que el usuario inicia sesión, queremos mostrar un enlace de cierre de sesión. Para realizar este cambio, abramos nuestro archivo main.blade.php de nuevo. Así es como se ve nuestro código de navbar en este momento:

1

<div class="navbar navbar-fixed-top">

2

  	<div class="navbar-inner">

3

    	<div class="container">

4

			<ul class="nav">  

5

				<li>{{ HTML::link('users/register', 'Register') }}</li>   

6

				<li>{{ HTML::link('users/login', 'Login') }}</li>   

7

			</ul>  

8

    	</div>

9

  	</div>

10

</div>

Modifiquemos esto ligeramente, reemplazando nuestro código de barra de navegación original, con lo siguiente:

1

<div class="navbar navbar-fixed-top">

2

  	<div class="navbar-inner">

3

    	<div class="container">

4

			<ul class="nav">  

5

				@if(!Auth::check())

6

					<li>{{ HTML::link('users/register', 'Register') }}</li>   

7

					<li>{{ HTML::link('users/login', 'Login') }}</li>   

8

				@else

9

					<li>{{ HTML::link('users/logout', 'logout') }}</li>

10

				@endif

11

			</ul>  

12

    	</div>

13

  	</div>

14

</div>

Todo lo que he hecho es envolver nuestras etiquetas li para nuestra barra de navegación en una declaración if para verificar si el usuario no ha iniciado sesión, usando el Método !Auth::check(). Este método devuelve true si el usuario ha iniciado sesión, de lo contrario, false. Entonces, si el usuario no ha iniciado sesión, mostramos los enlaces de registro e inicio de sesión, de lo contrario, el usuario inicia sesión y mostramos un enlace de cierre de sesión, en su lugar.

Cerrar sesión

Ahora que nuestra barra de navegación muestra los enlaces apropiados, según el estado de inicio de sesión del usuario, vamos a terminar esta aplicación creando la acción getLogout, para cerrar la sesión del usuario. Dentro de tu UsersController crea una nueva acción llamada getLogout:

1

public function getLogout() {

2

3

}

Ahora agrega el siguiente fragmento de código para cerrar la sesión del usuario:

1

public function getLogout() {

2

	Auth::logout();

3

	return Redirect::to('users/login')->with('message', 'Your are now logged out!');

4

}

Aquí llamamos al método Auth::logout(), que maneja el cierre de sesión del usuario por nosotros. Después, redirigimos al usuario a la página de inicio de sesión y le damos un mensaje flash para informarle que ha cerrado la sesión.

Conclusión

Y así concluye este tutorial de Autenticación de Laravel 4. Espero que hayas encontrado esto útil para configurar la autenticación para tus aplicaciones laravel. Si tienes algún problema o pregunta, no dudes en preguntar en los comentarios y haré todo lo posible para ayudarte. Puedes consultar el código fuente completo de la pequeña aplicación de demostración que creamos a lo largo de este tutorial en Github. Gracias por leer.