ExtJS: inicie sesión con la funcionalidad 'Remember me'

Question

Estoy tratando de crear una ventana de inicio de sesión simple con la funcionalidad muy común 'Recordarme'. La validación de inicio de sesión está hecha en estilo AJAX, por lo que el navegador no recordará mi entrada.

Mi enfoque es utilizar la funcionalidad incorporada state, pero la forma de usarlo me confunde.

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({ 
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now 
})); 

... 

{ 
    xtype: 'textfield', 
    fieldLabel: 'User name', 
    id: 'txt-username', 
    stateful: true, 
    stateId: 'username' 
}, { 
    xtype: 'textfield', 
    fieldLabel: 'Password', 
    id: 'txt-password', 
    inputType: 'password', 
    stateful: true, 
    stateId: 'password' 
}, { 
    xtype: 'button', 
    text: 'Validate', 
    stateEvents: 'click' 
} 

Yo sé que tengo que poner en práctica el método getState, sino en lo que el componente (Mi conjetura es en los dos campos de texto)? Otra cosa que no me doy cuenta es, ¿cómo es mi haga clic en evento en el botón conectado a las propiedades del estado de mis campos de texto ?

Answer 1

No utilice el estado. Está almacenando la contraseña del usuario en texto sin formato en las cookies del navegador. Cualquiera que tenga acceso al navegador puede leerlo y lo está enviando al servidor en cada solicitud.

Afortunadamente está utilizando alguna forma de sesiones del lado del servidor y no depende de que la información de autenticación del usuario esté presente en cada solicitud para mantener el estado de inicio de sesión. Si es así, le recomiendo que aproveche la función de guardar contraseña integrada en la mayoría de los navegadores modernos para gestionar el recuerdo del usuario para la autenticación inicial en cualquier sesión.

Para que la función de guardar la contraseña del navegador funcione, el formulario de autenticación debe estar presente en el documento cuando se carga la página por primera vez. Además, las credenciales deben enviarse mediante ese formulario en un envío tradicional (que no sea AJAX) que actualizará toda la página.

Puede cumplir estos requisitos mientras sigue presentando el formulario en la interfaz de usuario de ExtJS imprimiendo inicialmente el formulario oculto en el documento y luego usando las capacidades de ExtJS para controlar los elementos HTML existentes.

En puso el cuerpo del documento:

<form id="auth-form" action="/url/of/your/login/action" method="POST"> 
    <input id="auth-username" type="text" name="username" class="x-hidden"> 
    <input id="auth-password" type="password" name="password" class="x-hidden"> 
    <input id="auth-submit" type="submit" class="x-hidden"> 
</form> 

Luego, en Ext.onReady o en el momento se está mostrando una forma de autenticación de construir un panel que hace uso de los elementos del formulario anteriores:

new Ext.Panel({ 
    el: 'auth-form', 
    autoShow: true, 
    layout: 'form', 
    items: [ 
     { 
      xtype: 'textfield', 
      el: 'auth-username', 
      autoShow: true, 
      name: 'username', 
      fieldLabel: 'Username', 
      anchor: '100%' 
     }, 
     { 
      xtype: 'textfield', 
      el: 'auth-password', 
      autoShow: true, 
      name: 'password', 
      fieldLabel: 'Password', 
      anchor: '100%' 
     } 
    ], 
    buttons: [ 
     { 
      text: 'Log in', 
      handler: function() { 
       Ext.get('auth-submit').dom.click(); 
      } 
     } 
    ] 
}); 

La composición exacta del formulario puede variar. Puede estar integrado en una instancia de Ext.Window o lo que sea. Lo que es importante:

• Los campos de nombre de usuario y contraseña hacen uso de los campos de entrada existentes a través de las propiedades de configuración 'el' y 'autoShow'.
• Uno de los paneles que contiene los campos hace lo mismo para el elemento de formulario existente.
• El envío del formulario se realiza mediante un clic simulado en el botón de envío existente.

Answer 2

Esto no funciona con IE 8. Se produce un error de tiempo de ejecución. No sé si es porque estoy usando Google Frame, pero me gustaría señalar que el es una de las propiedades públicas, no una opción de configuración, así que no creo que Ext haya sido diseñado para funcionar así. También en Google Chrome puede seleccionar el nombre de usuario pero la contraseña no se muestra. Creo que esto es parte del diseño de Google Chrome, pero también lo he visto funcionar correctamente en otros sitios con Google Chrome.No estoy usando AJAX para enviar el formulario, pero me gusta la apariencia del Ext textfields y también me gustan las sugerencias de herramientas.

No veo cómo esta forma es más segura que usar una cookie porque ahora, independientemente de cómo la implemente, la contraseña se almacena en la máquina del cliente. Mañana voy a probar una solución de almacenamiento de cliente html5.

Dejar que el navegador web controle esto funcionalmente significa que diferentes usuarios pueden tener diferentes experiencias basadas en el navegador al que tienen acceso (hablando principalmente de cómo Google Chrome maneja las contraseñas de guardado).

En conjunto, una publicación muy buena gracias.

Answer 3

uso con el Ajax funcionalidad:

{ 
    xtype: 'form', 
    autoEl: { 
     //normal post for false submit 
     tag: 'form', 
     action: "#", 
     method: 'post' 
    }, 
    items: [ 
     { 
      xtype: 'textfield', 
      name: 'username', 
      fieldLabel: 'Username', 
      listeners: { 
       afterrender:function(cmp){ 
        cmp.inputEl.set({ 
         autocomplete:'on' 
        }); 
       } 
      } 
     }, 
     { 
      xtype: 'textfield', 
      name: 'password', 
      inputType: 'password', 
      fieldLabel: 'Password', 
      listeners: { 
       afterrender:function(cmp){ 
        cmp.inputEl.set({ 
         autocomplete:'on' 
        }); 
       }, 
      } 
     }, 
     { 
      xtype: 'button', 
      text: 'Login', 
      handler: function() { 
       Ext.Ajax.request(); //login ajax request 
       Ext.get('falsesubmit').dom.click(); //false submit 
      }, 
     }, 
     { 
      //button with submit input for false submit 
      xtype: 'button', 
      hidden:true, 
      listeners: { 
       afterrender: function() { 
        this.el.createChild({tag: 'input', type: 'submit', id: 'falsesubmit'}); 
       } 
      } 
     } 
    ] 
}