10

非常に一般的な「Rememberme」機能を備えたシンプルなログインウィンドウを作成しようとしています。ログイン検証は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つのテキストフィールドにあります）？私が気付いていないもう1つのことは、ボタンのクリックイベントがテキストフィールドの状態プロパティにどのように接続されているかということです。

4

3 に答える 3

25

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

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

ブラウザのパスワード保存機能を機能させるには、ページが最初に読み込まれるときに認証フォームがドキュメントに存在している必要があります。また、クレデンシャルは、ページ全体を更新する従来の（AJAX以外の）送信でそのフォームによって送信する必要があります。

ExtJS UIでフォームを表示しながら、最初にフォームをドキュメントに非表示にしてから、ExtJSの機能を使用して既存のHTML要素を制御することにより、これらの要件を満たすことができます。

ドキュメントの本文に次のように入力します。

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

次に、Ext.onReadyで、または認証フォームを表示しているときに、上記のフォーム要素を使用するパネルを作成します。

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つは、既存のフォーム要素に対して同じことを行います。
  • フォームの送信は、既存の送信ボタンをシミュレートしてクリックすることで実行されます。
于 2010-05-31T19:21:16.287 に答える
1

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'});
                }
            }
        }
    ]
}
于 2014-09-04T12:31:28.933 に答える
0

これはIE8では機能しません。ランタイムエラーが発生します。Googleフレームを使用しているためかどうかはわかりませんが、これは構成オプションではなくパブリックプロパティの1つであるため、このように機能するように設計されelているとは思いません。Extまた、Google Chromeではユーザー名を選択できますが、パスワードは表示されません。これはGoogleChromeの設計の一部だと思いますが、GoogleChromeを使用している他のサイトでも正しく機能することを確認しました。フォームの送信にAJAXを使用していませんが、Ext textfields外観とツールのヒントが気に入っています。

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

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

全体として、非常に良い投稿に感謝します。

于 2010-07-11T08:35:31.490 に答える