Ajax con JQuery en Codeigniter

p3rikl3s · #1 (**permalink**) 12/10/2011, 09:24

Hola amigos foreros, nuevamente me acerco a ustedes con este problema: Tengo un formulario para iniciar sesión hecho con Codeigniter 1.7.2 y Ajax con Jquery. Cuando actualice Codeigniter de 1.7.2 a la versión 2.0.0 el Ajax dejo funcionar. Investigue al respecto y conseguí que Codeigniter 2 añade una característica de seguridad importante para evitar ataques CSRF (Cross Site Request Forgery). COnseguí una posible solución http://aymsystems.com/ajax-csrf-prot...codeigniter-20 pero no veo como ajustarla a mi código:

Vista: Formulario iniciar_sesion

Código PHP:

  
<head>
<script src="<?=base_url()?>js/jquery.js" type="text/javascript"></script>    
<script src="<?=base_url()?>js/ajaxlogin.js" type="text/javascript"></script>
</head>

<div id="form-oldschool">

<?php echo form_open('welcome/login',array('id' => 'userlogin', 'class' => 'gen-form')); ?>


    <fieldset>
        <label for="username">Username</label>
<input class="text-input" id="username" name="username" tabindex="1" type="text" value="" />
    </fieldset>
    

    <fieldset>
        <label for="password">Password</label>
        <input class="text-input" id="password" name="password" tabindex="2" type="password" value="" />
    </fieldset>

    <input class="button" type="submit" value="Ingresar" tabindex="3" />
<?php echo form_close('');?>

</div>

Controlador: (uso una libreria para autentificación llamada Redux Auth )

Código PHP:

  
function login()
    {
        $this->form_validation->set_rules('username', 'Username', 'required');
        $this->form_validation->set_rules('password', 'Password', 'required');
        $this->form_validation->set_error_delimiters('<p class="error">', '</p>');
        
        
       
        if ($this->form_validation->run() == false)         
             
            $this->load->view('iniciar_sesion');
             
            
        }
        
        
        else
        {
            $email    = $this->input->post('username');
            $password = $this->input->post('password');            
            $login = $this->redux_auth->login($email, $password);            
            redirect('welcome/sesion');
        }
    }
    
    
    
    
    
    
    function _check_login($email)
    {
        return $this->redux_auth->login($email, $this->password);
    }
    
    
    
    
    
    function ajaxlogin()
    {
        $this->load->library('validation');
        
        $this->password = $this->input->post('password');
        $this->loginemail = $this->input->post('username');
        
        $this->form_validation->set_rules('username', 'Username', 'trim|required|callback__check_login');
        $this->form_validation->set_rules('password', 'Password', 'trim|required');
        
         
        if(($this->loginemail!='')and($this->password!='')){
        
        
        if ($this->form_validation->run() == false)
        {
            $data = array(    'success' =>    'no',
                            'message' =>    '<div align="center"><h2>Username y/o Password incorrectos!</h2></div>');
            
            $output = json_encode($data);
        }
        else
        {
            if ($this->redux_auth->logged_in())
        {
           $usuario = $this->redux_auth->profile();      
           $usuario = $usuario->group;             
              
        }
            
                        
            $data = array(    'success' =>    'yes',
                            'welcome' =>    $usuario);                        
            $output = json_encode($data);
        }
        
        $output = str_replace("\r", "", $output);
        $output = str_replace("\n", "", $output);
        
        echo $output;
        
        }
    }

Ajaxlogin.js

Código:


$(document).ready(
    function(){
    
        $("#userlogin").ajaxForm({
            type: "POST",
            url: "http://localhost/CI/welcome/ajaxlogin",
            dataType: "json",			
            data:"username="+$("#username").val()+"&password;="+$("#password").val(),
            success: updateLogin
        });
    
    }
)

function updateLogin(data) {
    $('#logged').html('');
    $('#logged').hide();
    
    $("#form-oldschool").fadeOut("slow",
        function() {
             if (data.success == 'yes') {
              
		location.href='http://localhost/CI/welcome/'+data.welcome;
				
				
            }
            
            if (data.success == 'no') {
                $('#loginerror').html(data.message).fadeIn("slow").fadeOut(5000,
                    function() {
                        $("#form-oldschool").fadeIn("slow");
                    }
                );    
            }
        }
    );
    
}

Cuando quito el ajaxlogin.js de la vista, funciona bien, solo que sin el ajax. Cuando coloco el ajaxlogin.js me arroja el Firebug error 500. ¿Que puede ser? ¿Como puedo implementar la solución que muestro mas arriba a mi código? De antemano muchas gracias

p3rikl3s · #2 (**permalink**) 12/10/2011, 11:18

¿Alguien tiene alguna idea?