Crear login con ajax y habilitar la funcion recordarme laravel4

13 abril, 201413 abril, 2014 ArielMax laravel4

INFO

En este tutorial de laravel4 veremos como crear un furmulario de login utilizando ajax, enviaremos y obtendremos peticiones del tipo json, además habilitaremos la función de recordarme (remember me) de laravel el cual nos crea una cookie en nuestro navegador permitiendo acceder al sistema en cualquier momento y sin necesidad de logearse.
El código fuente del tutorial esta aca debajo:

CODIGO FUENTE

reoutes.php

Route::get('login', function()
{

return View::make('login');

});

Route::get('logout', function()
{
    Auth::logout();
    return Redirect::to('login');
});

Route::get('admin', array('before' =&gt; 'auth', function()
{
  if(Auth::check()){
    return View::make('admin');
    }
  return View::make('login');

}));

Route::post('ajax', function(){
    //comprobamos si es una petición ajax
if(Request::ajax()){
//validamos el formulario

 $rules = array(
 'username'=&gt; 'required|min:3|max:100',
 'password'=&gt; 'required|min:3|max:100'
  );

  $messages = array(
  'required'=&gt; 'El campo :attribute es obligatorio.',
  'min'=&gt; 'El campo :attribute no puede tener menos de :min carácteres.',
  'max'=&gt; 'El campo :attribute no puede tener más de :min carácteres.'
   );

   sleep(1);// retardo de tiempo

$validation = Validator::make(Input::all(), $rules, $messages);
//si la validación falla redirigimos al formulario de login con los errores  
if ($validation-&gt;fails())
{
//como ha fallado el formulario, devolvemos los datos en formato json
   return Response::json(array(
   'success' =&gt; false,
   'errors' =&gt; $validation-&gt;getMessageBag()-&gt;toArray()
  ));

}
else{

   $credentials = array(
   'username' =&gt; Input::get('username'),
   'password' =&gt; Input::get('password') 
    );

     //check remember me

     if(Auth::attempt($credentials, Input::get('remember', 0)))
     {

      return Response::json(array(
      'success'         =&gt;     true,
      'message'         =&gt;     'Te has logeado correctamente'
       ));

      }
      else
      {
        $msg = array("El nombre de usuario o password no son correctos");
        return Response::json(array(
        'success' =&gt; false,
        'errors' =&gt; $msg 
        ));

       } 

        }
    }
});

vistas:

admin.blade.php

&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Bienvenido a la administración&lt;/h1&gt;
&lt;br&gt;
&lt;a href="{{ URL::to('logout') }}"&gt;Cerrar sesión&lt;/a&gt;
&lt;/body&gt;

&lt;/html&gt;

&lt;html&gt;
&lt;head&gt;&lt;title&gt;Acceso al sistema&lt;/title&gt;
{{ HTML::style('css/bootstrap.min.css') }}
{{ HTML::style('css/bootstrap-theme.min.css') }}
{{ HTML::style('css/signin.css') }}
{{ HTML::script('js/jquery.js') }}
{{ HTML::script('js/ajaxlogin.js') }}

&lt;/head&gt;
&lt;body&gt;
 &lt;div class="container"&gt;
{{ Form::open(array('url' =&gt; 'ajax', 'class' =&gt; 'form-signin',
 'id' =&gt; 'ajaxform')) }} 
&lt;h2 class="form-signin-heading"&gt;Acceder&lt;/h2&gt;
&lt;input type="text" class="form-control"
name="username" placeholder="Usuario"
required autofocus&gt;
&lt;input type="password" class="form-control"
name="password" placeholder="Password" required&gt;
&lt;label class="checkbox"&gt;
&lt;input type="checkbox" name="remember" value="1"&gt; Recordarme
&lt;/label&gt;
&lt;button class="btn btn-lg btn-primary btn-block" type="submit"&gt;Ingresar&lt;/button&gt;
{{ Form::close() }}
&lt;/div&gt;
&lt;div class='load' align="center" style="display: none"&gt;
&lt;img src="img/ajax-loader.gif"&gt;&lt;/div&gt;   
&lt;div class='errors'&gt;&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

ajaxlogin.js

$(document).ready(function() {

var form = $('#ajaxform').submit(function() {

$.ajax({
type: 'post',
cache: false,
dataType: 'json',
url: form.attr('action'),
data: $('#ajaxform').serialize(),
beforeSend: function(){
$(".load").show();
},

success: function (data) {
$(".load").hide();
$(".errors").html("");
if(data.success == false){
var errores = "";
for(datos in data.errors){
errores += "&lt;div class='alert alert-danger'&gt;"
+ data.errors[datos] + "&lt;/div&gt;";
}
$(form)[0].reset();
$(".errors").html(errores);

}else{

$(".errors").show().html("
&lt;div class='alert alert-success'&gt;"
+ data.message + "&lt;/div&gt;");

window.location='admin';
}
 },
error: function(errors){
$(".load").hide();
$(".errors").html("");
$(".errors").html(errors);
}
});
return false;
});
});

Enlaces adicionales:

BootStrap: http://getbootstrap.com/

Jquery: http://jquery.com/‎

Relacionado

14 comentarios en “Crear login con ajax y habilitar la funcion recordarme laravel4”

alejandro dice:

14 abril, 2014 a las 12:14

excelente tutorial 😉 mil felicitaciones tengo una pequeña duda en algun momento podrias hacer un tutorial en donde puedas hacer consulta entre varias tablas, que sea entre 3 tablas y se pueda traer los datos que se necesiten y el criterio que se pueda necesita para obtener los datos en verdad he no he podidp hacer eso tipo de consulta de la base de dato gracia felicidades saludo

Responder
1. ArielMax dice:
  
  14 abril, 2014 a las 14:14
  
  tomare en cuenta tu petición mas adelante are un tutorial para varias tablas utilizando el modelo relacional de eloquent
  
  Responder
johan osorio dice:

15 abril, 2014 a las 19:23

hola ariel como estas, he seguido todos tus tutoriales y muy interesante, por lo menos para aprender es agradable. de igual forma seguimos esperando tu nuevo programa xpress packages, encomiendas en laravel, para cuando lo lanzas…..

Responder
1. ArielMax dice:
  
  20 abril, 2014 a las 23:00
  
  el proyecto express bus package lo continuare en cuanto me desocupe de un proyecto que estoy trabajando para una empresa no podria desirte con exactitud cuando pero hare lo posible para que sea pronto
  
  Responder
Ernesto dice:

20 abril, 2014 a las 22:48

Saludos, muy buenos tus videos, segui el tutorial al pie de la letra, pero al presionar el submit y hacer la peticion ajax, en la closure de la ruta ajax en el condicional if(Request::ajax()) no entra, no detecta a petición ajax, cabe anotar que hice pruebas para probar si se estaba referenciando bien al archivo de jquery.js y al ajaxlogin.js y efectivamente funciono con otros ejemplos, pero con este en particular no, que podría ser? t agradezco de antemano la ayuda que me puedas brindar

Responder
1. ArielMax dice:
  
  20 abril, 2014 a las 23:05
  
  no se que podra se hay muchos factores. en mi caso estoy utilizando lo siguiente: laravel version 4.1, Jquery 1.5 , navegador firefox version 28, servidor xampp 1.8 , windows 8.1 64 bits
  
  Responder
bcnpmt dice:

24 abril, 2014 a las 23:26

Me pasa lo mismo que a Ernesto :-(.
en ua URL aparece http://localhost/pruebalaravel/public/ajax.
Alguna sugerencia????

Responder
1. ArielMax dice:
  
  25 abril, 2014 a las 14:41
  
  verifica la ruta del formulario puede ser por eso
  
  Responder
bcnpmt dice:

26 abril, 2014 a las 20:24

Soy novato en laravel. he estado mirando, y creo que muere en la funcion «user», dentro del controlador UserLogin.php, ya que no entra al IF. :-(.
He puesto algun ECHO de prueba y no pasa por el IF.

Responder
1. ArielMax dice:
  
  28 abril, 2014 a las 1:12
  
  reinstala laravel y prueba con un return
  
  Responder
Sonia dice:

28 abril, 2014 a las 20:35

Hola Ariel,
excelentes tus tutoriales, muy buen trabajo, tengo un problema, trabaja todo bien, muestra los mensajes en caso de error o de éxito con el ajax y redirecciona hacia admin también desde el ajax (hace la validación y la autenticación), pero al hacer el filtro, parece que perdiera la sesión, por que tanto con el filtro ‘auth’ no lo pasa, entra al if del filtro como si fuera un ‘guest’ (invitado) y me redirecciona hacia el login, también pruebo con el ‘authbasic’ que dice ‘invalid credentials’. Parece que perdiera la sesión pero no se en que parte del código y debido a que. Gracias por tu ayuda

Responder
bcnpmt dice:

8 mayo, 2014 a las 21:25

Siento volver a molestarte. Me he descargado el express bus package y con algunos retoques en las rutas de los archivos, me funciona casi perfectamente, excepto la validacion.No salen los mensajes de error, solo me sale el mensaje molesto de
«Whoops, looks like something went wrong.»
Porque puede ser?.
Gracias de antemano

Responder
1. ArielMax dice:
  
  9 mayo, 2014 a las 2:19
  
  prueba primero con un solo error de validacion, prueba actualizar laravel para corregir algunos errores
  
  Responder
Ernesto (Sonia mi novia) dice:

9 mayo, 2014 a las 22:26

Saludos,
Muchos de los errores se deben a la versión de Laravel, trabajen con la 4.1.28 y les trabajara perfectamente, con las anteriores hay algunos fallos, sobre todo con el ajax. Gracias Ariel por tus orientaciones.

Responder