[解決済み] ブラウザでパスワードの保存を促すにはどうしたらいいですか？

質問

私は、次のようなログインダイアログを持つWebアプリケーションに取り組んでいます。

1. ユーザーがquot;login"をクリックします。
2. ログインフォームのHTMLがAJAXで読み込まれ、ページ上のDIVに表示される
3. ユーザーはフィールドにユーザー/パスを入力し、送信をクリックします。これは <form> -- ユーザー名とパスワードはAJAXで送信されます。
4. ユーザー/パスワードが問題なければ、ユーザーがログインした状態でページを再読み込みします。
5. ユーザー/パスワードが正しくない場合、ページはリロードされませんが、エラーメッセージがDIVに表示され、ユーザーは再試行することになります。

ここで問題なのは、ブラウザが通常の "このパスワードを保存しますか？Yes / Never / Not Now"という、他のサイトでは表示されるプロンプトが表示されないのです。

をラップしてみました。 <div> で <form> タグに "autocomplete='on'" を入れても、違いはありませんでした。

ログインフローを大幅に変更せずに、ブラウザにパスワードを保存するようにさせることは可能でしょうか？

感謝 エリック

p.s. 私の質問を補足すると、私は間違いなくパスワードを保存するブラウザで作業していますし、"Never for this site"をクリックしたことはありません。これは、ログインフォームであることを検出しないブラウザの技術的問題で、オペレータエラーではありません :-)。

解決するには？

この質問に対する完全な解決策を見つけました。(Chrome27とFirefox21でテストしました)。

知っておくべきことは2つあります。

1. パスワードの保存」をトリガーし
2. 保存されたユーザー名/パスワードのリストア

1. トリガー「パスワードの保存

について Firefox 21 パスワードの保存」は、入力テキストフィールドを含むフォームがあり、入力パスワードフィールドが送信されたことを検出したときにトリガーされます。そこで

$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});

someFunctionForLogin() は、ajaxによるログインとサインインページへのリロード/リダイレクトを行い、その間に event.preventDefault() は、フォームを送信したことによる本来のリダイレクトをブロックします。

Firefoxのみであれば、上記の対処法で十分ですが、Chrome 27ではうまくいきません。そこで、Chrome 27で「パスワードの保存」を起動する方法をお聞きします。

について Chrome 27 パスワードの保存」が発生する 後 というテキストフィールドを含むフォームを送信することで、そのページにリダイレクトされます。 属性name='username'を持つ とパスワード入力欄 属性名='password' . したがって、フォームを送信したことによるリダイレクトをブロックすることはできませんが、ajaxログインを行った後にリダイレクトさせることは可能です。 (もし、ajaxログインでページを再読み込みしないようにしたい場合や、ページにリダイレクトしないようにしたい場合は、残念ながら私の解決策はうまくいきません)。 次に

<form id='loginForm' action='signedIn.xxx' method='post'>
    <input type='text' name='username'>
    <input type='password' name='password'>
    <button id='loginButton' type='button'>Login</button>
</form>
<script>
    $('#loginButton').click(someFunctionForLogin);
    function someFunctionForLogin(){
        if(/*ajax login success*/) {
            $('#loginForm').submit();
        }
        else {
            //do something to show login fail(e.g. display fail messages)
        }
    }
</script>

type='button'のボタンは、ボタンがクリックされたときにフォームを送信しないようにするものです。 次に、ajaxログインのための関数をボタンにバインドします。最後に $('#loginForm').submit(); は、サインインページにリダイレクトします。もしサインインしたページが現在のページであれば、'signedIn.xxx' を現在のページに置き換えることで「更新」させることができます。

さて、Chrome 27の方法は、Firefox 21でも使えることがわかります。なので、そちらを使用した方が良いでしょう。

2. 保存したユーザー名/パスワードを復元する。

もし、既にログインフォームがHTMLとしてハードコーディングされているなら、ログインフォームに保存されたパスワードを復元することは問題ないでしょう。

しかし、js/jqueryを使用してloginFormを動的に作成した場合、保存されたユーザ名/パスワードはドキュメントを読み込むときにのみバインドされるため、loginFormにバインドされることはありません。

そのため、ログインフォームをHTMLとしてハードコーディングし、js/jqueryを使用して動的に移動/表示/非表示を行う必要がありました。

備考 ajaxログインを行う場合、以下のように autocomplete='off' のようなタグ形式で

<form id='loginForm' action='signedIn.xxx' autocomplete='off'>

autocomplete='off' は、ユーザー名/パスワードのオートコンプリートを許可していないため、ログインフォームへのユーザー名/パスワードのリストアが失敗します。