Login CakePHP y AngularJS

402 views
Skip to first unread message

Christian Rodriguez

unread,
May 6, 2013, 6:58:02 PM5/6/13
to cakep...@googlegroups.com
Hola compañeros:

Les comento que estoy creando una api con Cake, la Cuestión es que ocupo hacer login mediante ajax pero estoy usando
AngularJS, ya he logrado comunicación, pero la pregunta es:

Como debo mandar los datos a cake para que la función api_login funcione, que datos enviar en el post, ya que actual mente no lo logo, abajo mi código:

/////// users cotroller

public function api_login(){
      if ($this->request->is('ajax')) {
        $this->layout = 'ajax';
        If($this->Auth->user()){
         $data = $this->Auth->user();
        }
        $this->set('return', $data);
        $this->render('/Json/json/');
      }
    }


///// vista -> /Json/json.ctp

<?php
  if($return){
    echo $return; 
  } else {
    echo '[]';
  }
?>


ojalá me puedan ayudar, gracias!

romel javier gomez herrera

unread,
May 6, 2013, 8:50:14 PM5/6/13
to CakePHP en Español
Hola, 

¿como es que has logrado comunicación?, según veo el controlador no tomas la data que recibes de la solicitud ajax.

Depende de la pre configuración o cabeceras que envíes. Que CakePHP tenga o no, la data en alguna parte del array $this->request.  

En el controlador coloca un debug($this->request);  e imprime lo que retorna en la consola. Algo parecido ha esto en código Angular: 

$scope.search = function () {
        $scope.twitterResult = $scope.twitter.get({q:$scope.searchTerm},function(result){
            console.log(result);
        });
 };

Eso te dará una idea donde y como están los datos que recibes de la consulta, extrae los datos determinar con una consulta si existe un usuario con tal correo y clave proporcionada. 

Si es una solicitud GET  la data pueda que este en $this->request->query  y si es POST en $this->request->data.

Un ejemplo es esta consulta que trata sobre lo que comente en la segunda linea.  Yo pregunte como obtener el objeto JSON de la consulta, luego de establecer una solicitud ajax con una definición mas correcta.  Todavía estoy esperando una respuesta.  


Luego de entender un poco spring voy a retomar mis estudios en AngularJs, ¿que tanto has aprendido de angular? lo de las vistas y layout,  lo dominas? 
 
saludos.
 



  


--
Has recibido este mensaje porque estás suscrito al grupo "CakePHP en Español" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus correos electrónicos, envía un correo electrónico a cakephp-esp...@googlegroups.com.
Para publicar una entrada en este grupo, envía un correo electrónico a cakep...@googlegroups.com.
Visita este grupo en http://groups.google.com/group/cakephp-esp?hl=es.
Para obtener más opciones, visita https://groups.google.com/groups/opt_out.
 
 

Christian Rodriguez

unread,
May 7, 2013, 12:28:22 AM5/7/13
to cakep...@googlegroups.com
Gracias por tu pronta respuesta Romel:

Creo que más que cake, mi problema está en Angular, ya que estoy mandando mal la data, pues 
imprimí la respuesta  y es éste json:

{
  "params": {
    "plugin": null,
    "controller": "users",
    "action": "api_login",
    "named": [],
    "pass": [
      "[object Object]"
    ],
    "prefix": "api",
    "api": true,
    "models": {
      "User": {
        "plugin": null,
        "className": "User"
      }
    }
  },
  "data": [],
  "query": [],
  "url": "api/users/login/%5Bobject%20Object%5D",
  "base": "/maabenapi",
  "webroot": "/maabenapi/",
  "here": "/maabenapi/api/users/login/%5Bobject%20Object%5D"

Sé que éste grupo no es de Angular pero pues aqui dejo mi servicio  y el controller

/// service

angular.module('maabenLogin', ['ngResource'])
 .factory('Login', function($resource){
    return $resource(
    'maabenapi/api/users/login/:data',
    {
      data: ''
    }, {
      query: { methot: 'POST', params: {
          data: ''
        }
      }, isArray: true
    });
  });

///////Controller

function MaabenLogin($scope, $routeParams, Login){
  var me = $scope;
  me.pwd='';
  me.alias='';
  me.onSubmitLogin = function(){
    if(me.pwd == '' || me.alias == ''){
      alert('Alias o contaseña vacios');
      return false;
    }
    me.login = Login.query({
        data: {
          user: {
            password: me.pwd,
            username: me.alias
          }
        }
      },
      function(out){
        console.log(out);
      });
  }  
}

Y respecto a tus preguntas de Angular, las vistas y layouts, no las domino pero no se me dificultan tampoco el controlador,
ya que trabajo con Backbone y Handlebars, pero como verás con los servicios estoy peleando un poco; real mente éste proyecto
solo es para conocer nuevas herramientas. Saludos y de nuevo gracias!

romel javier gomez herrera

unread,
May 7, 2013, 4:29:36 AM5/7/13
to CakePHP en Español
Hola Christian. 

Hasta donde yo se cakephp no soporta objetos anidados. Es decir algo como esto: 

{"llave":{"clave":"cakephp"}}   

solo soporta objeto simples como este:  

{"hola":"mundo"}  

y puedes contar con esa data en $this->request 


Sin embargo se puede enviar objetos anidados si el objeto se envía como un cadena

obj = {"llave":{"clave":"cakephp"}}
a = JSON.stringify(obj)

// a  ->  "{"llave":{"clave":"cakephp"}}"
 
luego usas http://www.php.net/manual/en/function.json-decode.php para procesar la data. 

Saludos.

--

romel javier gomez herrera

unread,
May 7, 2013, 4:58:53 AM5/7/13
to CakePHP en Español
Yo tengo planeado hacer un experimento con angular al entender spring y google app engine

Donde tengo tres instancias y una fuente de datos . 

          { El almacén de datos de App Engine }
         
          //                                                \\
         //                                                  \\

1) spring app                                         2) django app 
          
           \\                                               //
            \\                                             //

                      3) AngularJS app  

La forma en que la app angular se nutriera de data seria a través de solicitudes http jsonp a las APIs, quiero saber que tan viable, segura y escalable seria una app con este esquema. 

por eso te pregunte sobre las vistas y layout, pueda que mas adelante te consulte sobre eso. 

Saludos, estimado. 


  

Christian Rodriguez

unread,
May 8, 2013, 12:29:07 AM5/8/13
to cakep...@googlegroups.com
Ya lo pude resolver!

La respuesta fué enviar por la url el pass y usuario, luego en la funcion de cake cachar esos valores y setearlos
en el request y hacer el login. 

Pensaba que no funcionaba por que al mandar los datos buenos primero, ya me logueaba, despues yo mandaba datos erroneos
y me regresaba los datos del usuario, y esto pasa por que ya estoy logueado; en cambio, si primero mando datos errones no me loguea
hata que mando los buenos. abajo dejo mi código por si luego ocupan referencias. Gracias Romel pues te interesaste en ayudarme!!

//// Servicio de Angular

angular.module('maabenLogin', ['ngResource']).
factory('Login', function($resource){
    return $resource('maabenapi/api/users/login/:pwd/:alias', {
      pwd: '@pwd',
      alias:'@alias'
     });
  });

//// funcion de cakePHP  

public function api_login($pwd, $alias){
      if ($this->request->is('ajax')) {
            $this->layout = 'ajax';
        if(!$pwd || !$alias){
            $data = [];
        } else {
            $this->request->data['User']['password'] = $pwd;
            $this->request->data['User']['username'] = $alias;
            if ($this->Auth->login()) {
                $data = $this->Auth->user();
            } else {
                $data = [];
            }
        }
        //$data = $this->request;

Christian Rodriguez

unread,
May 8, 2013, 12:30:10 AM5/8/13
to cakep...@googlegroups.com
En lo que pueda ayudarte lo haré amigo!!!, cuenta con ello

romel javier gomez herrera

unread,
May 8, 2013, 3:06:40 AM5/8/13
to CakePHP en Español
hola Christian. 

Yo también uso login ajax en mis aplicaciones, actualmente todas en desarrollo. 

Yo recomiendo que la solicitud sea del tipo POST. Ya que se trata de data sensible.  lo ideal seria enviar la data a través de una solicitud post https encriptada, pero no he llegado hasta ese punto por ahora.  


public function beforeFilter(){
$this->Auth->allow(array('add','check_email','in','recover_account'));
parent::beforeFilter();

public function login(){
}
public function logout(){
$this->Auth->logout();
$this->redirect('/');
}
public function in(){
if($this->request->is('post')){
$request = $this->request->data;
}else{
$request = $this->request->query; 
}
$options = array(
'conditions' => array(
'User.email' => $request['email'],
'User.password' => $this->Auth->password($request['password'])
)
);
$user = $this->User->find('first',$options);
if($user == true){
if($this->Auth->login($user)){
$return['login'] = true;
}else{
$return['login'] = false;
}
}else{
$return['login'] = false;
}
$this->set('return',$return);
$this->render('ajax_view','ajax');
}

por convención yo uso las url en ingles para solicitudes ajax y las que quedan en español son las que el usuario ve. 


Router::connect('/salir', array('controller' => 'users', 'action' => 'logout')); // Accion Get  - Para salir de la aplicación
Router::connect('/entrar', array('controller' => 'users', 'action' => 'login')); // Accion Get  - Interfaz de entrada a la aplicación o registro de un nuevo usuario.
Router::connect('/login', array('controller' => 'users', 'action' => 'in')); // Accion Ajax - Para entrar a la aplicación.
Router::connect('/new_user', array('controller' => 'users', 'action' => 'add')); // Acción Ajax - Para registrar un nuevo usurio.
Router::connect('/check_email', array('controller' => 'users', 'action' => 'check_email')); // Acción Ajax - Para determinar si el correo ya se ha registrado.  
Router::connect('/recover_account', array('controller' => 'users', 'action' => 'recover_account')); // Acción Ajax - Para recuperar una cuenta.  


Como notaras tengo una acción login que no tiene nada de lógica por que su función es mostrar la vista que el usuario ve al intentar loguearse y es solicitada por la url /entrar cuando el usuario intenta loguearse acede a a la accion /in en una solicitud ajax. Esta acción recibe los datos por via post, luego a través de una consulta determino si existe o no tal usuario en la base de datos. si existe, creo el usuario al pasar los datos a $this->Auth->login($user)    


********************************************************************************************************
eso debería responder la interrogante 

"Pero siempre me regresa el primer usuario de la BD aún estando mal los datos enviados.
¿Cómo deberia setear los datos?"

en tu código: 

if ($this->Auth->login()) {  // esta preguntando si esta logueado. lo cual no tiene sentido por que la idea es que aceda, por lo tanto siempre se va ejecutar la segunda sentencia que es regresar la data de la solicitud.  
        $data = $this->Auth->user(); // 
} else {
       $data = $this->request;
}

**********************************************************************************************************

Desde el controlador puedes acceder a los datos con este código: 

$this->Auth->User()

en AppController tengo este código para disponer en las vista tipo GET la data del usuario

public function beforeRender(){
// Destrulle la sección al abrir x links en otra pestaña si se coloca en la funcion beforeFilter. 
if($this->Auth->User()){
$this->set('userLogged',$this->Auth->User());
}
}

todos los controladores deberían tener acceso restringido si la configuración de Auth es la correcta.   

public $components = array(
'Auth' => array(
'authenticate' => array(
'Form' => array(
'fields' => array('username' => 'email')
)
),
'loginAction'=>'entrar',
'loginRedirect' => 'cuenta',
'logoutRedirect'=> '',
'ajaxLogin'=>'expired_session'
),
'Cookie',
'Session'
);



//expired_session es un elemento que muestro cuando se vence la sección

<?php 
$return['expired_session'] = true;
echo json_encode($return);
?>

Hasta el momento uso jquery y jquery-validation para mis solicitudes y validación ajax.  Con AngularJs he realizado varios experimentos a la ves que voy documentándolos. Ahora voy a retomarlo nuevamente ya que voy hacer unas pruebas con spring. 

Imágenes integradas 2

Imágenes integradas 3


Imágenes integradas 4


Imágenes integradas 5

saludos. 


Captura de pantalla de 2013-05-08 02:13:17.png
Captura de pantalla de 2013-05-08 02:08:12.png
Captura de pantalla de 2013-05-08 02:13:39.png
Captura de pantalla de 2013-05-08 02:17:31.png

romel javier gomez herrera

unread,
May 8, 2013, 3:17:34 AM5/8/13
to CakePHP en Español
Excelente, Christian, encontraste otra forma de resolver el problema. ahora estoy mas claro en el proceso del login en cakephp. Saludos y Enhorabuena.       


--
Reply all
Reply to author
Forward
0 new messages