extjs：「remember me」機能でログインします

Question

非常に一般的な「私を覚えている」機能を備えたシンプルなログインウィンドウを作成しようとしています。ログイン検証はAjaxスタイルで行われるため、ブラウザは私の入力を覚えていません。

私のアプローチは、組み込みを使用することです state 機能性ですが、それを使用する方法は私を混乱させます。

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

私は実装しなければならないことを知っています getState 方法ですが、どのコンポーネント（私の推測は2つのテキストフィールドにありますか）に？私が気づかないもう一つのことは、私のものはどうですか クリック のイベント ボタン 私の状態特性に接続されています テキストフィールド?

Answer 1

状態を使用しないでください。ユーザーのパスワードをブラウザのCookieでプレーンテキストに保存しています。ブラウザにアクセスできる人は誰でも読むことができ、すべてのリクエストでサーバーに送り返されています。

何らかの形のサーバー側のセッションを使用していることを願っていますが、ログイン状態を維持するためにすべての要求に存在するユーザーの認証情報に依存しないことを願っています。その場合は、ほとんどの最新のブラウザに組み込まれたパスワード保存機能を利用して、特定のセッションで初期認証のためにユーザーの記憶を処理することをお勧めします。

ブラウザのパスワード保存機能が機能するには、ページが最初にロードされたときに、認証フォームがドキュメントに存在する必要があります。また、資格情報は、ページ全体を更新する従来の（非ajax非ajax）送信でそのフォームで提出する必要があります。

これらの要件を満たすことができますが、最初にドキュメントに隠されたフォームをレンダリングし、extJSの機能を既存のHTML要素にコマンドアに使用することにより、extJS UIにフォームを提示できます。

ドキュメントの本文で：

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

次に、内線またはその時点で、上記のフォーム要素を使用するパネルを構築する認証フォームを表示しています。

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

フォームの正確な構成は異なる場合があります。 ext.windowインスタンスなどに組み込まれる場合があります。重要なこと：

• ユーザー名とパスワードフィールドは、「EL」と「AutoShow」構成プロパティを介して既存の入力フィールドを使用します。
• フィールドを含むパネルの1つは、既存のフォーム要素に対して同じことを行います。
• フォームの送信は、既存の送信ボタンをシミュレートしたクリックによって実行されます。

Answer 2

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

これはIE 8では機能しません。ランタイムエラーが生成されます。 Googleフレームを使用しているからかわかりませんが、それを指摘したい el パブリックプロパティの1つは構成オプションではないので、私はそれを信じていません Ext このように機能するデザインでした。また、Google Chromeでは、ユーザー名を選択できますが、パスワードには表示されません。これはGoogle Chromeのデザインの一部だと思いますが、Google Chromeを使用して他のサイトで正しく機能することも見ています。私はフォームを提出するためにAJAXを使用していませんが、私は Ext textfields 見て、私はツールのヒントも気に入っています。

クッキーを使用するよりもこの方法がどのように安全であるかはわかりません。これがどのように実装しても、パスワードはクライアントマシンに保存されているからです。明日、HTML5クライアントストレージソリューションを試してみます。

Webブラウザを制御することは、これを機能的に制御することを意味します。ユーザーは、アクセスできるブラウザに基づいて異なるエクスペリエンスを持つ可能性があります（主にGoogle Chromeがパスワードの保存方法を処理する方法について話します）。

全体として非常に良い投稿ありがとう。