HTML單頁應用程序，用瀏覽器填寫用戶名和密碼

有沒有辦法告訴瀏覽器登錄表單已經顯示，並且應該用保存的憑證填寫字段？HTML單頁應用程序，用瀏覽器填寫用戶名和密碼

我有這個水療中心加載文件後加載與Ajax登錄視圖。我設法讓Firefox在成功登錄後保存憑據，但是當我嘗試再次登錄時，字段未填充。

此外，我似乎無法讓Chrome提示保存密碼，因爲我無法重定向瀏覽器，而Chrome似乎與該事件綁定。

2013-10-24 Frank

我有同樣的問題 - 一個JavaScript SPA和Chrome不會保存用戶的密碼。我已經檢查過表單在用戶名（name =「username」）和密碼（name =「password」）字段上有「name」屬性。它似乎間歇。我如何幫助Chrome將其識別爲登錄表單並提供保存密碼？ – Rich

@Rich您是否已在鉻，鉻設置中啓用['Autofill']（https://support.google.com/chrome/answer/142893?p=settings_autofill&rd=1）？ – guest271314

@ guest271314是的，在Chrome中啓用了自動填充功能，並且可以在大多數網站上保存密碼。我詢問了我寫過的一個SPA網站，Chrome瀏覽器似乎無法識別或喜歡我的登錄表單。 – Rich

-2

一般來說，對於要存儲的用戶名和密碼來說，這是一個非常糟糕的做法，但是如果您需要長期使用它，您可以將其存儲在localStorage中，或者在瀏覽器僅打開時將其存儲在sessionStorage中，（注意它在IE8以上工作），但IE7不再支持，所以它不應該是一個問題。這是你如何做到的。我不會建議將密碼存儲在會話存儲器中我將它作爲cookie存儲，因爲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="[email protected]"> 
     <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-24 15:28:54 Jesse

謝謝，但我正在尋找更多的保存密碼的瀏覽器功能，您通常會在大多數使用普通窗體登錄的網站上看到這些功能。我可能會最終將它保存在localStorage中，即使它不是最好的方法。再次感謝 – Frank

不要將密碼保存在本地存儲，cookie或其他未加密的地方：我不認爲這回答了問題，因爲問題是如何讓瀏覽器填寫信息。當瀏覽器存儲密碼時，他們至少會加密這些密碼，這就是爲什麼它確實可以。然而，這種方法會使您的密碼在本地存儲中未加密。 – user2849406

瀏覽器本身不會執行此操作，這是與localStorage配合使用的非常糟糕的做法，因爲一旦瀏覽器關閉，您仍然有數據存儲並且未加密localStorage，我強烈的建議是，如果你有權訪問服務器使用服務器端編程來存儲變量作爲會話變量並通過Ajax加載它們。 – Jesse

這個問題有兩個部分，即使用已保存的憑證填充字段並提示用戶保存憑證。如果有保存的登錄名/密碼對，它將自動填入輸入密碼和前一個輸入字段的登錄名爲type=password id='whatever'。請注意，這兩個字段必須是名稱或id屬性，否則它將不起作用。下面是一個簡單的例子：

<body> 
    <input id="a"></input> 
    <input type="password" id="b"></input> 
    <input type="button" onclick=redirect()>GO</input> 
</body>

要提示用戶保存憑證，這2個字段必須傳遞到另一個URL，並獲得成功的回覆。最簡單的方法是使用一個形式與一些PHP的行動。下面是一個簡單的Ajax回調的重定向：

redirect =() => $.ajax({ 
    url: './someValidationURL', 
    data: {username: a.value,password: b.value}, 
    success:() => window.location.href = './someProtectedURL' 
});

來源

2016-06-02 03:47:27

瀏覽器有其特殊的默認行爲，當談到認識的形式和保存登錄數據。正確構建表單時，您所要求的內容很容易實現。

例1：

包裹的形式標記您的輸入元素：

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

這是爲了讓瀏覽器可以識別您的形式和準默認行爲。

實施例2：

製作標籤爲您的輸入元件，並將它們與名稱/ IDS關聯：

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

隨着自動完成啓用瀏覽器的ST在會話瀏覽器歷史記錄中加密的密碼/登錄數據通常位於 %APPDATA%\..\Local\Google\Chrome\User Data\Default\Login Data（至少適用於Chrome）。

當用戶點擊提交按鈕或驗證憑據後，通常會調用此本機函數。

僅供參考：我有兩個使用此語法的spa桌面應用程序，並且在自動填充/自動完成時沒有任何問題。

如何瀏覽器店登錄數據：

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-02 20:03:36 KpTheConstructor

謝謝。我相當確信我的應用遵循所有這些指導方針，但我仍然看到不一致的密碼保存行爲。奇怪的是，它在不同主機名上的不同應用程序實例之間似乎有所不同。我想知道是否有一些本地狀態（以前保存的密碼或衝突的密碼或其他），這是造成問題。 – Rich

HTML單頁應用程序，用瀏覽器填寫用戶名和密碼

回答

相關問題