Is there a way to tell the browser that a login form has been displayed and that it should fill in the field with the saved credentials?
I have this SPA that loads the login view with ajax after the document has been loaded. I have managed to get Firefox to save the credentials after a successful login but when I try to login again the fields are not filled.
Also, I can't seem to get Chrome to prompt to save password since I cannot redirect the browser and Chrome seems to bind to that event.
Browser have their special default behaviors when it comes to recognizing forms and saving login data. What you are asking for is easily achievable when building out a form correctly.
Example 1:
Wrap your input elements in a form tag:
<form method="post" action="/form">
<input type="password" id="name"></input>
ect...
</form>
This is so the browser can recognize your form and associate default behaviors.
Example 2:
Make labels for your input elements and associate them with name/ids:
<form method="post" action="/form">
<label for="pssw-1" >Name : </label>
<input name="password" type="password" id="pssw-1" ></input>
ect...
</form>
Example 3:
Apply autocomplete attribute if desired, on form and input elements:
<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>
With autocomplete enabled the browser stores encrypted password/login data in session browser history often located in
%APPDATA%\..\Local\Google\Chrome\User Data\Default\Login Data (for Chrome at least).
This native function is often called once user hits the submit button or once credentials are validated.
FYI: I have two spa desktop apps using this syntax and no trouble with autofill / autocomplete.
How browsers store login data:
http://raidersec.blogspot.com/2013/06/how-browsers-store-your-passwords-and.html
Best practices:
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en
There are 2 parts to the question, namely populate fields with saved credential and prompt user to save credential. If there are saved login/password pair, it will automatically populate to the type=password id='whatever' input with the password and the previous input field with the login. Note that this two fields must if a name or id attribute or it won't work. Here is a simple example:
<body>
<input id="a"></input>
<input type="password" id="b"></input>
<input type="button" onclick=redirect()>GO</input>
</body>
To prompt user to save credential, this 2 fields must be pass to another URL and get a successful reply. The easiest way is to use a form with action to some php. Here is a simple ajax callback redirect:
redirect = () => $.ajax({
url: './someValidationURL',
data: {username: a.value,password: b.value},
success: () => window.location.href = './someProtectedURL'
});
Generally speaking this is a really bad practice for the username and password to be stored however you can store it in localStorage if you want it there long term, or sessionStorage if you want there while the browser is open only, (Note it works in IE8 and up) but IE7 is no longer supported so it should not be an issue. this is how you would do it. I would not suggest storing the password in the session storage I would store it as a cookie because cookies or if you have access to the server use a Session Variable to store the password, but either way I will post the code even though storing the that info in session and local storage is bad practice.
<!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>
