ExtJS: Connectez-vous avec la fonctionnalité 'Se souvenir de moi'

Question

J'essaie de créer une fenêtre de connexion simple avec la fonctionnalité très courante 'Se souvenir de moi'. La validation de connexion est faite en style AJAX, ainsi le navigateur ne se souviendra pas de ma saisie.

Mon approche consiste à utiliser la fonctionnalité intégrée state, mais comment l'utiliser me perturbe.

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

Je sais que je dois mettre en œuvre la méthode getState, mais sur ce composant (je suppose sur les deux champs de texte)? Une autre chose que je ne parviens pas à réaliser est, comment mon événement clic sur le bouton connecté aux propriétés d'état de mes champs de texte?

Answer 1

Ne pas utiliser l'état. Vous stockez le mot de passe de l'utilisateur en texte brut dans les cookies du navigateur. Toute personne ayant accès au navigateur peut le lire et il est renvoyé au serveur à chaque requête.

Nous espérons que vous utilisez une certaine forme de sessions côté serveur et ne dépendez pas des informations d'authentification de l'utilisateur présentes dans chaque requête pour maintenir un état connecté. Si c'est le cas, je recommande de profiter de la fonctionnalité d'enregistrement de mot de passe intégrée à la plupart des navigateurs modernes pour gérer la mémorisation de l'utilisateur pour l'authentification initiale dans une session donnée. Pour que la fonction d'enregistrement de mot de passe du navigateur fonctionne, le formulaire d'authentification doit être présent dans le document lors du premier chargement de la page. En outre, les informations d'identification doivent être soumises par ce formulaire dans une soumission traditionnelle (non-AJAX) qui actualisera la page entière.

Vous pouvez répondre à ces exigences tout en présentant le formulaire dans l'interface utilisateur ExtJS en le rendant initialement caché dans le document, puis en utilisant les fonctionnalités de ExtJS pour réquisitionner les éléments HTML existants.

Dans le corps d'un document de vente:

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

Puis, en Ext.onReady ou au moment où vous affichez une forme d'authentification construire un panneau qui utilise des éléments de formulaire ci-dessus:

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 composition exacte de la forme peut varier. Il peut être intégré dans une instance Ext.Window ou autre. Ce qui est important:

• Les champs de nom d'utilisateur et mot de passe utilisent les champs de saisie existants via les propriétés de configuration 'el' et 'autoShow'.
• L'un des panneaux contenant les champs fait la même chose pour l'élément de formulaire existant.
• La soumission du formulaire est effectuée par un clic simulé sur le bouton d'envoi existant.

Answer 2

Ceci ne fonctionne pas avec IE 8. Une erreur d'exécution est produite. Je ne sais pas si c'est parce que j'utilise Google Frame, mais je tiens à souligner que el est l'une des propriétés publiques pas une option de configuration, donc je ne crois pas que Ext a été conçu pour fonctionner comme ça. Aussi dans Google Chrome, vous pouvez sélectionner le nom d'utilisateur, mais le mot de passe ne s'affiche pas. Je pense que cela fait partie de la conception de Google Chrome, mais je l'ai également vu fonctionner correctement sur d'autres sites avec Google Chrome.Je n'utilise pas AJAX pour soumettre le formulaire mais j'aime la façon dont le Ext textfields ressemble et j'aime aussi les astuces.

Je ne vois pas en quoi cela serait plus sûr que d'utiliser un cookie car peu importe comment vous l'implémentez, le mot de passe est stocké sur la machine client. Demain, je vais essayer une solution de stockage client html5. Laisser le navigateur web contrôler cela fonctionnellement signifie que différents utilisateurs peuvent avoir des expériences différentes en fonction du navigateur auquel ils ont accès (en parlant principalement de la façon dont google chrome gère la sauvegarde des mots de passe).

Dans l'ensemble un très bon message merci.

Answer 3

Utilisation avec Ajax fonctionalité:

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