どうすればブラウザにパスワードの保存を促すことができますか？

ねえ、私はこのように機能するログインダイアログを備えたウェブアプリに取り組んでいます：

1. ユーザーが「ログイン」をクリックする
2. ログインフォームHTMLはAJAXでロードされ、ページのDIVに表示されます
3. ユーザーはユーザー/パスをフィールドに入力し、[送信]をクリックします。それはaではありません<form>-ユーザー/パスはAJAX経由で送信されます
4. ユーザー/パスに問題がなければ、ユーザーがログインした状態でページがリロードされます。
5. ユーザー/パスが悪い場合、ページはリロードされませんが、DIVにエラーメッセージが表示され、ユーザーは再試行できます。

ここに問題があります。ブラウザは、他のサイトに表示される通常の「このパスワードを保存しますか？はい/いいえ/今はありません」というプロンプトを表示しません。

<div>in <form>タグを「autocomplete = 'on'」でラップしてみましたが、違いはありませんでした。

ログインフローを大幅にやり直すことなく、パスワードを保存するようにブラウザーに指示することはできますか？

エリックありがとう

私の質問に追加するps、私は間違いなくパスワードを保存するブラウザを使用しており、「このサイトでは決して」をクリックしたことがありません...これは、ブラウザがログインフォームであることを検出しない、オペレーターエラー:-)

この質問に対する完全な解決策を見つけました。（私はこれをChrome 27とFirefox 21でテストしました）。

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

1. 「パスワードの保存」をトリガーし、
2. 保存したユーザー名/パスワードを復元する

1.「パスワードの保存」をトリガーします。

以下のためのFirefox 21それが提出された入力テキストフィールドと入力されたパスワードフィールドを含むフォームがあることを検出したとき、「保存パスワードが」トリガされます。したがって、使用する必要があるのは

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

someFunctionForLogin()ajaxログインを実行し、サインインしたページにリロード/リダイレクトする一方でevent.preventDefault()、フォームの送信により元のリダイレクトをブロックします。

Firefoxのみを扱う場合は、上記のソリューションで十分ですが、Chrome 27では機能しません。次に、Chrome 27で「パスワードの保存」をトリガーする方法を尋ねます。

以下のためにクロム27、「保存パスワードが」トリガされた後、それは入力テキストフィールドを含むフォーム提出することによってページにリダイレクトされた属性名=「ユーザ名」で、入力パスワードフィールド属性名=「パスワード」でを。したがって、フォームを送信するためにリダイレクトをブロックすることはできませんが、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.保存したユーザー名/パスワードを復元します。

loginFormがすでにHTMLとしてハードコーディングされている場合は、loginFormに保存されたパスワードを復元しても問題はありません。
ただし、js / jqueryを使用してloginFormを動的に作成すると、保存されたユーザー名/パスワードはloginFormにバインドされません。保存されたユーザー名/パスワードはドキュメントが読み込まれるときにのみバインドされるためです。
したがって、loginFormをHTMLとしてハードコーディングし、js / jqueryを使用して動的にloginFormを移動/表示/非表示にする必要がありました。

備考： ajaxログインを行う場合は、次のautocomplete='off'ようなタグ形式で追加しないでください

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

autocomplete='off' ユーザー名/パスワードの「オートコンプリート」を許可しないため、loginFormへのユーザー名/パスワードの復元が失敗します。

ボタンを使用してログインする：

を使用してtype="button"でonclickログインするajax場合、ブラウザはパスワードの保存を提案しません。

<form id="loginform">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="button" value="Login" onclick="login(this.form);" />
</form>

このフォームには送信ボタンとアクションフィールドがないため、ブラウザはパスワードの保存を提案しません。

送信ボタンを使用してログインする：

ただし、ボタンをに変更しtype="submit"て送信を処理すると、ブラウザはパスワードの保存を提案します。

<form id="loginform" action="login.php" onSubmit="return login(this);">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="submit" value="Login" />
</form>

この方法を使用すると、ブラウザはパスワードの保存を提案するはずです。

ここだJavascriptが両方の方法で使用されます：

function login(f){
    var username = f.username.value;
    var password = f.password.value;

    /* Make your validation and ajax magic here. */

    return false; //or the form will post your data to login.php
}

私自身もこれに苦労しており、ようやく問題とその原因を突き止めることができました。

すべての原因は、私のログインフォームが動的にページに挿入されていたことにあります（backbone.jsを使用）。ログインフォームをindex.htmlファイルに直接埋め込むとすぐに、すべてが魅力的に機能しました。

これは、ブラウザが既存のログインフォームがあることを認識している必要があるためだと思いますが、私のページに動的に挿入されていたため、「実際の」ログインフォームが存在することを知りませんでした。

このソリューションは、エリックがコーディングフォーラムに投稿した私にとってはうまくいきました

メッセージが表示されないのは、ブラウザが物理的にページを更新してサーバーに更新する必要があるためです。あなたができる小さなトリックは、フォームで2つのアクションを実行することです。最初のアクションはonsubmitで、Ajaxコードを呼び出します。また、フォームターゲットに非表示のiframeを設定します。

コード：

<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">

それによってプロンプトが表示されるかどうかを確認します。

エリック

http://www.codingforums.com/showthread.php?t=123007に投稿されました

すべてのブラウザー（テスト済み：chrome 25、safari 5.1、IE10、Firefox 16）がjQueryとajaxリクエストを使用してパスワードの保存を要求するように強制する究極のソリューションがあります。

JS：

$(document).ready(function() {
    $('form').bind('submit', $('form'), function(event) {
        var form = this;

        event.preventDefault();
        event.stopPropagation();

        if (form.submitted) {
            return;
        }

        form.submitted = true;

        $.ajax({
            url: '/login/api/jsonrpc/',
            data: {
                username: $('input[name=username]').val(),
                password: $('input[name=password]').val()
            },
            success: function(response) {
                form.submitted = false;
                form.submit(); //invoke the save password in browser
            }
        });
    });
});

HTML：

<form id="loginform" action="login.php" autocomplete="on">
    <label for="username">Username</label>
    <input name="username" type="text" value="" autocomplete="on" />
    <label for="password">Password</label>
    <input name="password" type="password" value="" autocomplete="on" />
   <input type="submit" name="doLogin" value="Login" />
</form>

トリックは、フォームを停止して独自の方法（event.stopPropagation（））で送信する代わりに、独自のコード（$ .ajax（））を送信し、ajaxの成功コールバックでフォームを再度送信して、ブラウザーがフォームをキャッチして表示することですパスワードの保存を要求します。エラーハンドラなどを追加することもできます。

誰かのお役に立てば幸いです。

私はspetsonの答えを試しましたが、Chrome 18では動作しませんでした。動作したのは、iframeにロードハンドラーを追加し、送信を中断しないことでした（jQuery 1.7）：

function getSessions() {
    $.getJSON("sessions", function (data, textStatus) {
        // Do stuff
    }).error(function () { $('#loginForm').fadeIn(); });
}
$('form', '#loginForm').submit(function (e) {
    $('#loginForm').fadeOut();
}); 
$('#loginframe').on('load', getSessions);
getSessions();

HTML：

<div id="loginForm">
    <h3>Please log in</h3>
    <form action="/login" method="post" target="loginframe">
            <label>Username :</label>
            <input type="text" name="login" id="username" />
            <label>Password :</label>
            <input type="password" name="password" id="password"/>
            <br/>
            <button type="submit" id="loginB" name="loginB">Login!</button>
    </form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>

getSessions（）はAJAX呼び出しを実行し、失敗するとloginForm divを表示します。（ユーザーが認証されていない場合、Webサービスは403を返します）。

FFおよびIE8でも動作することがテストされています。

ブラウザーがフォームがログインフォームであることを検出できない場合があります。この前の質問のいくつかの議論によると、ブラウザは次のようなフォームフィールドを探します<input type="password">。あなたのパスワードフォームフィールドはそれと同じように実装されていますか？

編集：以下の質問に答えるために、Firefoxはパスワードをform.elements[n].type == "password"（すべてのフォーム要素を反復処理して）検出し、フォームフィールドを逆方向に検索してパスワードフィールドの直前のテキストフィールドを検出することでユーザー名フィールドを検出すると思います（詳細はこちら）。私の知る限りでは、ログインフォームはの一部である<form>必要があります。そうでない場合、Firefoxはそれを検出しません。

シンプルな2020アプローチ

これにより、オートコンプリートが自動的に有効になり、パスワードがブラウザに保存されます。

• autocomplete="on" （形）
• autocomplete="username" （入力、メール/ユーザー名）
• autocomplete="current-password" （入力、パスワード）

<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Appleのドキュメントで詳細を確認してください： HTML入力要素でのパスワードオートフィルの有効化

私はこのスレッドのさまざまな答えを読むのに長い時間を費やしましたが、私にとっては、実際には少し異なる（関連していますが、異なる）ものでした。Mobile Safari（iOSデバイス）では、ページのロード時にログインフォームがHIDDENの場合、プロンプトは表示されません（フォームを表示してから送信した後）。次のコードでテストできます。これは、ページのロードから5秒後にフォームを表示します。JSとディスプレイを削除します。どれも動作しません。私はこれに対する解決策をまだ見つけていません。他の誰かが同じ問題を抱えていて原因を理解できない場合に備えて投稿されています。

JS：

$(function() {
  setTimeout(function() {
    $('form').fadeIn();
  }, 5000);
});

HTML：

<form method="POST" style="display: none;">
  <input name='email' id='email' type='email' placeholder='email' />
  <input name='password' id='password' type='password' placeholder='password' />
  <button type="submit">LOGIN</button>
</form>

HTML5 History APIを使用してパスワードを保存するように求めることができるという明確な回答はまだありません。

最初に、少なくとも<form>パスワードと電子メールまたはユーザー名フィールドを持つ要素があることを確認する必要があります。ほとんどのブラウザーは、正しい入力タイプ（パスワード、Eメール、またはユーザー名）を使用している限り、これを自動的に処理します。ただし、念のため、入力要素ごとにオートコンプリート値を正しく設定してください。

オートコンプリート値のリストは、https：//developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocompleteにあります。

必要なものは：username、emailおよびcurrent-password

次に、2つの可能性があります。

• 送信後に別のURLに移動すると、ほとんどのブラウザでパスワードの保存を求められます。
• 別のURLにリダイレクトしたくない場合や、ページを再ロードしたくない場合（単一ページアプリケーションなど）。フォームの送信ハンドラで（e.preventDefaultを使用して）イベントのデフォルトを防止するだけです。HTML5履歴APIを使用して、履歴に何かをプッシュし、単一ページアプリケーション内で「ナビゲート」したことを示すことができます。ブラウザはパスワードとユーザー名を保存するように促します。

history.pushState({}, "Your new page title");

ページのURLを変更することもできますが、パスワードの保存を要求する必要はありません。

history.pushState({}, "Your new page title", "new-url");

ドキュメント：https : //developer.mozilla.org/en-US/docs/Web/API/History/pushState

これには、ユーザーがパスワードを誤って入力した場合にブラウザーがパスワードの保存を要求するのを防ぐことができるという追加の利点があります。一部のブラウザーでは、履歴APIを使用せずに.preventDefaultを呼び出した場合でも、ブラウザーは常に資格情報の保存を要求することに注意してください。

別の場所に移動したり、ブラウザーの履歴を変更したくない場合は、代わりにreplaceStateを使用できます（これも機能します）。

次のコードはテストされています

• Chrome 39.0.2171.99m：機能しています
• Android Chrome 39.0.2171.93：機能しています
• Androidストックブラウザー（Android 4.4）：機能しません
• Internet Explorer 5以降（エミュレート）：機能
• Internet Explorer 11.0.9600.17498 /更新バージョン：11.0.15：機能
• Firefox 35.0：機能しています

JS-フィドル：http :
//jsfiddle.net/ocozggqu/

郵便番号：

// modified post-code from /programming/133925/javascript-post-request-like-a-form-submit
function post(path, params, method)
{
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.

    var form = document.createElement("form");
    form.id = "dynamicform" + Math.random();
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    form.setAttribute("style", "display: none");
    // Internet Explorer needs this
    form.setAttribute("onsubmit", "window.external.AutoCompleteSaveForm(document.getElementById('" + form.id + "'))");

    for (var key in params)
    {
        if (params.hasOwnProperty(key))
        {
            var hiddenField = document.createElement("input");
            // Internet Explorer needs a "password"-field to show the store-password-dialog
            hiddenField.setAttribute("type", key == "password" ? "password" : "text");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    var submitButton = document.createElement("input");
    submitButton.setAttribute("type", "submit");

    form.appendChild(submitButton);

    document.body.appendChild(form);

    //form.submit(); does not work on Internet Explorer
    submitButton.click(); // "click" on submit-button needed for Internet Explorer
}

備考

• 動的ログインフォームの場合、呼び出しwindow.external.AutoCompleteSaveFormが必要です
• Internet Explorer には、ストアパスワードダイアログを表示 するための「パスワード」フィールドが必要です。
• Internet Explorerでは、送信ボタンのクリックが必要なようです（たとえそれが偽のクリックであっても）

以下はajaxログインコードのサンプルです。

function login(username, password, remember, redirectUrl)
{
    // "account/login" sets a cookie if successful
    return $.postJSON("account/login", {
        username: username,
        password: password,
        remember: remember,
        returnUrl: redirectUrl
    })
    .done(function ()
    {
        // login succeeded, issue a manual page-redirect to show the store-password-dialog
        post(
            redirectUrl,
            {
                username: username,
                password: password,
                remember: remember,
                returnUrl: redirectUrl
            },
            "post");
    })
    .fail(function ()
    {
        // show error
    });
};

備考

• 「account / login」は成功した場合にCookieを設定します
• ページのリダイレクト（js-codeによって「手動で」開始される）が必要なようです。iframe-postもテストしましたが、うまくいきませんでした。

私は、Prototype.JSユーザーにとってかなり洗練されたソリューション（またはハッキングなど）を見つけました。これは、Prototypeを使用する最後のホールドアウトの1つです。対応するjQueryメソッドを単純に置き換えるだけでうまくいくはずです。

最初に、次の図に示すように、<form>タグと、後で参照できるクラス名の送信ボタン（この場合はfaux-submit）が、スタイルがに設定された要素内にネストさdisplay:noneれていることを確認します。

<form id="login_form" action="somewhere.php" method="post">
    <input type="text" name="login" />
    <input type="password" name="password" />
    <div style="display:none">
        <input class="faux-submit" type="submit" value="Submit" />
    </div>
    <button id="submit_button">Login</button>
</form>

次に、のクリックオブザーバーを作成しますbutton。これにより、図のようにフォームが「送信」されます。

$('submit_button').observe('click', function(event) {
    $('login_form').submit();
});

次に、submitイベントのリスナーを作成して停止します。（上記のように）非表示の入力ボタンのクラスでevent.stop()ラップされない限り、DOM内のすべての送信イベントを停止しEvent.findElementますfaux-submit。

document.observe('submit', function(event) {
    if (event.findElement(".faux-submit")) { 
        event.stop();
    }
});

これは、Firefox 43およびChrome 50で動作することがテストされています。

あなたのサイトはおそらくブラウザがパスワードの保存を要求しないように言われているリストにすでにあります。Firefoxでは、オプション->セキュリティ->サイトのパスワードを記憶する[チェックボックス]-例外[ボタン]

@Michal Roharikの回答にもう少し情報を追加してください。

ajax呼び出しが戻りURLを返す場合は、form.submitを呼び出す前に、jqueryを使用してフォームアクション属性をそのURLに変更する必要があります。

例。

$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit(); 

同様の問題がありました。ログインはajaxで行われましたが、フォーム（#loginForm）がajaxで送信された場合、ブラウザー（firefox、chrome、safari、IE 7-10）はパスワードの保存を提供しませんでした。

以下のようSOLUTION私は、Ajaxによって提出されたとAjax呼び出しが成功を返します後、私は隠された入力を提出するクリックをトリガーするフォームに入力（#loginFormHiddenSubmit）を提出隠さ追加されました。ページを更新するために必要な方法。クリックは次の方法でトリガーできます。

jQuery('#loginFormHiddenSubmit').click();

非表示の送信ボタンを追加した理由は次のとおりです。

jQuery('#loginForm').submit();

IEでパスワードを保存することはできません（他のブラウザでも機能します）。

すべてのブラウザー（IE 6など）に資格情報を記憶するオプションがあるわけではありません。

（ユーザーが正常にログインしたら）Cookieを介してユーザー情報を保存し、「このマシンに記憶する」オプションを設定することができます。このようにして、ユーザーが（ログオフしている場合でも）再びアクセスすると、WebアプリケーションはCookieを取得してユーザー情報（ユーザーID +セッションID）を取得し、作業を続行できます。

これが示唆に富むことを願っています。:-)

真実は、ブラウザに強制的に問い合わせることはできないということです。入力の検索など、ユーザー名/パスワードを入力したかどうかを推測するための独自のアルゴリズムがブラウザにあると確信してtype="password"いますが、ブラウザを強制的に設定することはできません。

他の人が示唆するように、ユーザー情報をCookieに追加することができます。これを行う場合は、少なくとも暗号化を強化し、パスワードを保存しないでください。おそらく、最大でユーザー名を保存します。

ダイアログをフォームに添付できるので、これらの入力はすべてフォーム内にあります。もう1つは、ユーザー名テキストフィールドの直後にパスワードテキストフィールドを作成することです。

これは100％Ajaxであり、ブラウザがログインを検出するので、私にとってははるかにうまくいきます。

<form id="loginform" action="javascript:login(this);" >
 <label for="username">Username</label>
 <input name="username" type="text" value="" required="required" />
 <label for="password">Password</label>
 <input name="password" type="password" value="" required="required" />
 <a href="#" onclick="document.getElementById("loginform").submit();"  >Login</a>
</form>

これを行うには、おそらくCookieを使用するのが最善の方法です。

「私を記憶しますか？」//フォームにユーザーのログイン情報//を保存するCookieを作成させます。編集：ユーザーセッション情報

Cookieを作成するには、PHPでログインフォームを処理する必要があります。