ExtJS: Connexion avec la fonctionnalité « Se souvenir de moi »

Question

Je suis en train de créer un simple fenêtre de connexion avec la fonctionnalité très commune « Se souvenir de moi ». La validation de la connexion se fait de style AJAX, donc le navigateur ne me souviendrai de mon entrée.

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

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 à comprendre est, comment est mon cliquez sur événement bouton connecté aux propriétés de l'état de mon textfields

Answer 1

Ne pas utiliser l'état. Vous stockez le mot de passe de l'utilisateur en texte clair dans les cookies du navigateur. Toute personne qui a accès au navigateur peut le lire et il est envoyé au serveur à chaque demande.

Il faut espérer que vous utilisez une certaine forme de sessions côté serveur et ne sont pas en fonction de l'information d'authentification de l'utilisateur étant présent dans chaque demande de maintien de l'état connecté. Si oui, alors je vous recommande de profiter de la fonction d'économie d'un mot de passe intégré à la plupart des navigateurs modernes pour gérer se souvenir de l'utilisateur pour l'authentification initiale dans une session donnée.

Pour fonction d'économie le mot de passe du navigateur pour travailler le formulaire d'authentification doit être présent dans le document lorsque la page est d'abord chargée. En outre, les pouvoirs doivent être soumis par cette forme dans un cadre traditionnel (non-AJAX) qui présentent rafraîchir la page.

Vous pouvez répondre à ces exigences tout en présentant la forme dans l'interface utilisateur ExtJS en rendant d'abord la forme cachée dans le document, puis en utilisant les capacités de ExtJS à réquisitionner des éléments existants HTML.

Dans la vente du corps du document:

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

Ensuite, 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 ou tout autre méthode Ext.Windows. Ce qui est important:

• Les champs nom d'utilisateur et mot de passe utilisent les champs d'entrée existants à travers 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 sur le bouton simulé existant soumettre.

Answer 2

Utilisation avec des fonctionnalités Ajax:

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

Answer 3

Cela ne fonctionne pas avec IE 8. Une erreur d'exécution est produit. Je ne sais pas si c'est parce que j'utilise Google cadre, mais je voudrais souligner que el est l'une des propriétés publiques non une option de configuration, donc je ne crois pas que Ext était la conception au travail comme celui-ci. Aussi dans Google Chrome, vous pouvez sélectionner le nom d'utilisateur, mais le mot de passe n'affiche pas. Je pense que cela fait partie de la conception de Google Chrome, mais je l'ai vu aussi fonctionner correctement sur d'autres sites avec Google Chrome. Je ne suis pas en utilisant AJAX pour soumettre le formulaire mais je aime la façon dont le look Ext textfields et je comme les conseils d'outils aussi bien.

Je ne vois pas comment cette façon est plus sûr que d'utiliser un cookie parce que la matière maintenant comment vous le mettre en œuvre le mot de passe est stocké sur la machine cliente. Demain, je vais essayer une solution de stockage client html5.

Laisser le contrôle du navigateur Web de ce moyen sur le plan fonctionnel que les différents utilisateurs peuvent avoir des expériences différentes en fonction du navigateur qu'ils ont accès à (parle surtout dans la façon dont Google gère les mots de passe chrome économie).

Dans l'ensemble un très bon merci de poste.