CODEWITHSUNDEEP
jqueryajaxformsgoogle-chromepasswords
Alex
Alex

Reputation: 36131

How to make Chrome remember password for an AJAX form?

I'm using AJAX for fast input validation on my login page. If everything is correct, the user is redirected.

Here's the code:

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

It works really well in all browsers. But there's a problem in Chrome. It doesn't offer to save the password.

When JavaScript is turned off, the password is saved, so the problem is definitely in redirection to a new location.

How can I fix that?

Upvotes: 25

Views: 23655

Answers (9)

Aldis
Aldis

Reputation: 469

I had the same issue - how to force browser to store user credentials for AJAX requests. Please see my answer here - https://stackoverflow.com/a/64140352/994289.

Hope it helps. At least it worked fine for me on Chrome on Windows.

Upvotes: 0

shameleo
shameleo

Reputation: 364

So now in 2019 we can do this using Credential Management API.

NOTE: it is experimental API! Check this: https://developers.google.com/web/fundamentals/security/credential-management/save-forms

Essential code:

function onSubmit() {
    makeAjaxLoginRequest()
    .then((status) => {
        if (status.success) {
            if (window.PasswordCredential) {
                var cr = new PasswordCredential({ id: login, password: password });
                return navigator.credentials.store(cr);
            } else {
                return Promise.resolve();
            }
        }
    }).then(
        () => { // redirect || hide login window, etc... },
        () => { // show errors, etc... }
    )
}

Upvotes: 2

zeitgeist87
zeitgeist87

Reputation: 131

I have found a dirty workaround for this problem, by inserting an invisible iframe and targeting the form to it:

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

The corresponding JavaScript:

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

The trick is, that there are really two requests made. First the form gets submitted to /blank.html, which will be ignored by the server, but this triggers the password save dialog in Chrome. Additionally we make an ajax request and submit the real form to /login. Since the target of the first request is an invisible iframe the page doesn't refresh.

This is of course more useful if you don't want to redirect to another page. If you want to redirect anyway changing the action attribute is a better solution.

Edit:

Here is a simple JSFiddle version of it. Contrary to claims in the comment section, there is no reload of the page needed and it seems to work very reliably. I tested it on Win XP with Chrome and on Linux with Chromium.

Upvotes: 13

alex.net
alex.net

Reputation: 286

From yesterday, 10/07/2013, Chrome 28, it's now possible without any trick. Seems they fixed that...

Upvotes: 1

Predrag Stojadinović
Predrag Stojadinović

Reputation: 3659

I found that the username and password input fields must have the name tag set in order for Chrome to offer to save the password. This thread is about simple forms, but the same fixed my jquery AJAX form submission.

Upvotes: 1

Eugeniu Torica
Eugeniu Torica

Reputation: 7574

In my case Chrome didn't remember password because there were two different inputs of type password in one form (create/login in one form). The issue in my case was solved by using javascript manipulation of removing one of the input of type password so that browser could decide which submitted fields contains credential data.

Upvotes: 2

iexx
iexx

Reputation: 91

I have fixed it using this way:

<form action="/login"></form>

And the JavaScript:

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

Upvotes: 5

Johann du Toit
Johann du Toit

Reputation: 2667

Have a read here - why doesn't chrome recognize this login form? .

The important comment is:

Yes, it doesn't work when you remove return false. You will need to rewrite your code. Chrome does not offer to save passwords from forms that are not "submitted" as a security feature. If you want the Save Password feature to work, you're going to have to ditch the whole fancy AJAX login.

So you could maybe consider removing the Ajax and just letting the Form post to login, this will probably be the only way for Users that do not have JavaScript enabled to login with your form too.

Upvotes: 7

Marcel
Marcel

Reputation: 28087

Are you able to change the form's action value to data.redirectUrl and let the form submit as usual? This should trigger the browser's prompt to save the username and password.

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

Upvotes: 8

Related Questions