ExtJS: accesso con funzionalità "Ricordami"

Question

Sto provando a creare una semplice finestra di accesso con la funzionalità molto comune 'Ricordami'. La convalida del login è fatta in stile AJAX, quindi il browser non ricorderà il mio input.

Il mio approccio è utilizzare la funzionalità integrata state, ma il modo in cui utilizzarlo mi confonde.

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' 
} 

so che devo per implementare il metodo getState, ma su quale componente (la mia ipotesi è sui due campi di testo)? Un'altra cosa che non riesco a capire è: in che modo il mio fa clic sull'evento sul pulsante connesso alle proprietà di stato dei miei campi di testo ?

Answer 1

Non utilizzare lo stato. Stai memorizzando la password dell'utente in testo normale nei cookie del browser. Chiunque abbia accesso al browser può leggerlo e viene rispedito al server in ogni richiesta.

Si spera che si stia utilizzando una qualche forma di sessioni lato server e che non dipendano dalle informazioni di autenticazione dell'utente presenti in ogni richiesta per mantenere lo stato di accesso. Se è così, allora consiglio di sfruttare la funzione di salvataggio della password integrata nei browser più moderni per gestire la memorizzazione dell'utente per l'autenticazione iniziale in una data sessione.

Per la funzione di salvataggio della password del browser affinché funzioni, il modulo di autenticazione deve essere presente nel documento quando la pagina viene caricata per la prima volta. Inoltre, le credenziali devono essere inviate da tale modulo in una presentazione tradizionale (non AJAX) che aggiornerà l'intera pagina.

È possibile soddisfare questi requisiti mentre si presenta ancora il modulo nell'interfaccia utente ExtJS restituendo inizialmente il modulo nascosto nel documento e quindi utilizzando le funzionalità di ExtJS per comandare gli elementi HTML esistenti.

Nel corpo put 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> 

Poi, in Ext.onReady o al momento che si sta visualizzando una forma di autenticazione costruire un pannello che si avvale di elementi modulo di cui sopra:

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(); 
      } 
     } 
    ] 
}); 

L'esatta composizione del modulo può variare. Può essere incorporato in un'istanza di Ext.Window o qualsiasi altra cosa. Cosa è importante:

• I campi nome utente e password utilizzano i campi di input esistenti tramite le proprietà di configurazione 'el' e 'autoShow'.
• Uno dei pannelli contenenti i campi fa lo stesso per l'elemento del modulo esistente.
• L'invio del modulo viene eseguito mediante un clic simulato sul pulsante di invio esistente.

Answer 2

Questo non funziona con IE 8. Viene generato un errore di runtime. Non so se è perché sto usando Google Frame, ma vorrei sottolineare che el è una delle proprietà pubbliche e non un'opzione di configurazione quindi non credo che Ext sia stato progettato per funzionare in questo modo. Anche in Google Chrome puoi selezionare il nome utente ma la password non viene visualizzata. Penso che questo faccia parte del design di Google Chrome, ma ho anche visto che funziona correttamente su altri siti con Google Chrome.Non sto usando AJAX per inviare il modulo, ma mi piace il modo in cui l'aspetto Ext textfields e mi piacciono anche i suggerimenti degli strumenti.

Non vedo come in questo modo sia più sicuro dell'utilizzo di un cookie perché ora importa come lo si implementa, la password è memorizzata sul computer client. Domani ho intenzione di provare una soluzione di archiviazione client html5.

Lasciando il controllo del browser Web ciò significa che utenti diversi possono avere esperienze diverse in base al browser a cui hanno accesso (parlando principalmente di come Google Chrome gestisce le password di salvataggio).

Tutto sommato un post molto buono, grazie.

Answer 3

Usa con l'Ajax funcionality:

{ 
    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'}); 
       } 
      } 
     } 
    ] 
}