ExtJS: Anmeldung mit 'Remember me' -Funktionalität

Question

Ich versuche, ein einfaches Login-Fenster mit dem sehr häufig zu schaffen ‚Remember me‘ -Funktionalität. Die Login-Validierung ist getan AJAX-Stil, so dass der Browser meine Eingabe nicht erinnern.

Mein Ansatz ist die eingebaute in state Funktionalität zu nutzen, aber wie es mich verwirrt zu verwenden.

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

Ich weiß, ich habe die getState Methode zu implementieren, sondern auf das, was die Komponente (meine Vermutung ist, auf die beiden Textfelder)? Eine andere Sache, die ich nicht zu realisieren ist, wie ist mein klicken Veranstaltung auf die Taste mit den Zustandseigenschaften meiner Textfelder

Answer 1

Verwenden Zustand nicht. Sie speichern das Kennwort des Benutzers im Klartext in die Cookies des Browsers. Jeder, der Zugriff auf den Browser hat, kann sie lesen und es wird zurück an den Server in jeder Anfrage gesendet.

Hoffentlich Sie irgendeine Form von serverseitigen Sessions verwenden und nicht abhängig von der Authentifizierungsinformationen des Benutzers vorhanden sind, in jeder Anforderung angemeldet maintain Zustand. Wenn ja, dann empfehle ich den Vorteil des Passworts unter Feature in den meisten modernen Browsern gebaut Speicher für die erste Authentifizierung in einer bestimmten Sitzung Erinnerung des Benutzers zu behandeln.

Für das Kennwort der Browser-Funktion Speicher der Authentifizierungs-Form zu arbeiten, muß in dem Dokument vorhanden sein, wenn die Seite zum ersten Mal geladen wird. Außerdem müssen die Anmeldeinformationen von dieser Form in einem traditionellen (nicht-AJAX) eingereicht werden einzureichen, die die gesamte Seite wird aktualisiert.

Sie können diese Anforderungen erfüllen, während immer noch die Form, in der ExtJS UI präsentieren, indem man zunächst die Form in das Dokument versteckt Rendering und dann die Möglichkeiten von ExtJS mit bestehenden HTML-Elemente requirieren.

In dem Körper gelegt des Dokuments:

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

Dann in Ext.onReady oder zu dem Zeitpunkt eine Authentifizierungsform Build sind Anzeigen eine Platte, die Verwendung der oben genannten Formelemente macht:

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

Die genaue Zusammensetzung der Form variieren. Es kann in eine Ext.Window Instanz oder was auch immer gebaut werden. Was wichtig ist:

• Die Benutzername und Passwort Felder nutzen die vorhandenen Eingabefelder durch die ‚el‘ und ‚Autoshow‘ config Eigenschaften.
• Eine der Platten, die die Felder macht das gleiche für das bestehende Formularelement enthält.
• Die Vorlage des Formulars wird durch einen simulierten Klick auf den Absenden-Button bestehenden ausgeführt.

Answer 2

Verwenden Sie mit Ajax-Funktionalität:

{
    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

Das funktioniert nicht mit IE 8. Ein Laufzeitfehler erzeugt wird. Ich weiß nicht, ob es ist, weil ich Google Rahmen verwenden, aber ich mag darauf hinweisen, dass el eine der öffentlichen Eigenschaften ist keine Konfigurationsoption so dass ich glaube nicht, dass Ext Design zu arbeiten wie das war. Auch in Google Chrome können Sie den Benutzernamen auswählen, aber das Passwort nicht angezeigt. Ich denke, das Teil des Designs von Google Chrome ist, aber ich habe auch funktioniert richtig auf anderen Seiten mit Google Chrome gesehen. Ich bin mit AJAX nicht das Formular abzuschicken, aber ich mag die Art der Ext textfields Blick, und ich wie die Tooltips auch.

Ich sehe nicht, wie diese Art und Weise ist sicherer als ein Cookie verwenden, weil jetzt darauf an, wie Sie es implementieren das Passwort auf dem Client-Rechner gespeichert ist. Morgen werde ich eine html5-Client Storage-Lösung versuchen.

Lassen Sie den Webbrowser Kontrolle dieses funktionell bedeutet, dass unterschiedliche Benutzer unterschiedliche Erfahrungen basierend auf dem Browser haben sie Zugang zu (sprechen hauptsächlich in wie Google Chrome Griffe Speichern von Kennwörtern).

Alles in allem einer sehr guten Beitrag danke.