10

ログインフォームが表示され、保存された資格情報をフィールドに入力する必要があることをブラウザーに伝える方法はありますか?

ドキュメントがロードされた後にajaxでログインビューをロードするこのSPAがあります。ログインに成功した後、Firefoxに認証情報を保存させることができましたが、再度ログインしようとすると、フィールドが入力されません。

また、ブラウザをリダイレクトできず、Chrome がそのイベントにバインドされているように見えるため、Chrome にパスワードの保存を求めるプロンプトを表示させることができないようです。

4

3 に答える 3

4

ブラウザには、フォームの認識とログイン データの保存に関して、特別なデフォルトの動作があります。あなたが求めていることは、フォームを正しく構築するときに簡単に達成できます。

例 1:

入力要素を form タグでラップします。

<form method="post" action="/form">
 <input type="password" id="name"></input>
  ect...
</form>

これは、ブラウザがフォームを認識し、デフォルトの動作を関連付けるためです。

例 2:

入力要素のラベルを作成し、それらを名前/ID に関連付けます。

<form method="post" action="/form">
<label for="pssw-1" >Name : </label> 

 <input name="password" type="password" id="pssw-1" ></input>

  ect...
</form>

例 3:

必要に応じて、フォームおよび入力要素に autocomplete 属性を適用します。

<form method="post" action="/form" autocomplete="on">
<label for="pssw-1" >Name : </label> 

 <input name="password" type="password" id="pssw-1" autocomplete="password"></input>

  ect...
</form>

オートコンプリートを有効にすると、ブラウザーは暗号化されたパスワード/ログイン データをセッション ブラウザー履歴に保存します %APPDATA%\..\Local\Google\Chrome\User Data\Default\Login Data(少なくとも Chrome の場合)。

このネイティブ関数は、ユーザーが送信ボタンを押すか、資格情報が検証されると呼び出されることがよくあります。

参考までに: この構文を使用する 2 つのスパ デスクトップ アプリがあり、オートフィル/オートコンプリートに問題はありません。

ブラウザがログイン データを保存する方法:

http://raidersec.blogspot.com/2013/06/how-browsers-store-your-passwords-and.html

ベストプラクティス：

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en

于 2016-06-02T20:03:36.153 に答える
-4

一般的に言えば、これはユーザー名とパスワードを保存するための非常に悪い習慣ですが、長期間保存したい場合は localStorage に保存し、ブラウザーが開いている間のみ保存した​​い場合は sessionStorage に保存できます (IE8 で動作することに注意してください)。 IE7 はサポートされていないため、問題にはなりません。これはあなたがそれを行う方法です。セッションストレージにパスワードを保存することはお勧めしません.Cookieとして保存するか、サーバーにアクセスできる場合はセッション変数を使用してパスワードを保存します.セッション内の情報とローカル ストレージは悪い習慣です。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
    <form action="">
        <input type="text" name="username" id="username" value="username@login">
        <input type="password" name="password" id="password" value="password">
    </form>
</body>
</html>
<script>

    window.onload = function(){

        if(window.sessionStorage){
            //depending on which one you would want to use 
            var form = document.getElementsByTagName('form')[0];
            //optionally you can use querySelector instead
            var user = document.getElementById('username');
            var password = document.getElementById('password'); 

            console.log(user);
            console.log(password);

            if(!sessionStorage.getItem("username")){

                sessionStorage.setItem("username", user.value);


            } else {

                user.value = sessionStorage.getItem("username");


            }

            if(!sessionStorage.getItem("password")){

                sessionStorage.setItem("password", password.value);

            } else {

                password.value = sessionStorage.getItem("password");

            }
        }

        console.log(sessionStorage);

    }

</script>
于 2013-10-24T15:28:54.347 に答える