Comment puis-je le navigateur pour demander d’enregistrer le mot de passe ?

Question

Hey, je suis en train de travailler sur une application web qui a une boîte de dialogue de connexion qui fonctionne comme ceci:

1. L'utilisateur clique sur "login"
2. Formulaire de connexion HTML est chargé avec l'AJAX et s'affiche dans la DIV sur la page
3. L'utilisateur entre dans user/pass dans les champs et cliquer sur envoyer. Ce n'est PAS un <form> -- user/pass sont soumis via AJAX
4. Si user/pass sont d'accord, la page est rechargée avec de l'utilisateur connecté.
5. Si user/pass sont mauvais, la page ne se recharge PAS, mais message d'erreur s'affiche dans la DIV et l'utilisateur peut essayer de nouveau.

Voici le problème: le navigateur ne jamais propose l'habituel "Enregistrer ce mot de passe? Oui / Jamais / n'est Pas Maintenant" invite que pour les autres sites.

J'ai essayé d'emballage l' <div> en <form> balises avec "autocomplete=" on "" mais qui ne fait pas de différence.

Est-il possible d'obtenir le navigateur à proposer pour stocker le mot de passe sans une refonte complète de ma connexion flux?

merci Eric

p.s. ajouter à ma question, je suis certainement travailler avec browers qui stockent les mots de passe, et je n'ai jamais cliqué sur "jamais pour ce site" ...c'est un problème technique avec le navigateur de ne pas détecter que c'est un formulaire de connexion, pas d'erreur de l'opérateur :-)

Answer 1

J'ai trouvé une solution complète pour cette question. (J'ai testé cela en Chrome 27 et Firefox 21).

Il y a deux choses à savoir: 1.Déclencheur "Enregistrer le mot de passe' et 2.Restaurer les sauvés nom d'utilisateur/mot de passe

1.Déclencheur "Enregistrer le mot de passe":

Pour Firefox 21, 'Enregistrer le mot de passe est déclenché lorsqu'il détecte qu'il y a un formulaire contenant champ de texte de saisie et de saisie de mot de passe de domaine est soumis. Donc nous avons juste besoin d'utiliser

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

someFunctionForLogin() ne l'ajax login et recharger/redirection vers la signé en page en event.preventDefault() bloque l'origine de la redirection en raison de la soumission du formulaire.

Si vous faites affaire avec Firefox uniquement, la solution ci-dessus est suffisant, mais il ne fonctionne pas sous Chrome 27. Puis vous demandez comment déclencher "Enregistrer le mot de passe' dans google Chrome 27.

Pour google Chrome 27, 'Enregistrer le mot de passe est déclenché après il est redirigé vers la page en soumettant le formulaire qui contient le champ de saisie de texte avec l'attribut name= "nom d'utilisateur" et le mot de passe d'entrée de champ avec l'attribut name= "mot de passe". Par conséquent, nous ne pouvons pas bloquer la redirection en raison de la soumission du formulaire, mais nous pouvons faire la redirection après nous avons fait l'ajax login. (Si vous voulez l'ajax login de ne pas recharger la page ou de ne pas rediriger vers une page, malheureusement, ma solution ne fonctionne pas.) Ensuite, nous pouvons utiliser

<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>
$('#loginButton').click(someFunctionForLogin);
function someFunctionForLogin()
{
    if(//ajax login success)
    {
        $('#loginForm').submit();
    }
    else
    {
        //do something to show login fail(e.g. display fail messages)
    }
}

Bouton avec type='button' va prendre la forme de ne pas être soumis lorsque le bouton est cliqué. Ensuite, la liaison d'une fonction à la touche d'ajax login. Enfin, en appelant $('#loginForm').submit(); redirige vers la signature en page. Si la signature en page est la page en cours, alors vous pouvez remplacer 'signedIn.xxx "par page en cours pour faire de la "actualiser".

Désormais, vous trouverez dans la méthode de Chrome 27 travaille aussi dans Firefox 21. Il est donc préférable de l'utiliser.

2.Restaurer les sauvés nom d'utilisateur/mot de passe:

Si vous avez déjà le loginForm codée en dur en HTML, alors vous aurez trouvé aucun problème pour restaurer le mot de passe enregistré dans le loginForm. Cependant, les sauvés nom d'utilisateur/mot de passe ne seront pas lier à la loginForm si vous utilisez js/jquery pour rendre le loginForm de façon dynamique. Parce que les sauvés nom d'utilisateur/mot de passe est lie que lorsque le document est chargé. Par conséquent, vous avez besoin de coder en dur le loginForm que le HTML et utiliser js/jquery/afficher/masquer le loginForm de façon dynamique.

---

Remarque: Si vous ne l'ajax login, ne pas ajouter d'autocomplete= " off " dans la balise de formulaire

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

autocomplete= "off" va faire de la restauration de nom d'utilisateur/mot de passe dans le loginForm échoue parce que vous ne lui permettent pas 'auto-complété" le nom d'utilisateur/mot de passe.

Answer 2

Peut-être je peux vous aider...

Voici un exemple d’un formulaire ajax qui ne fonctionne pas (le navigateur ne proposera pas de sauvegarder le mot de passe)

Le navigateur ne proposera pas de sauvegarder le mot de passe, car cette forme n’a pas un bouton "soumettre" et pas une url valide dans le champ d’action.

Mais cela peut changer si vous faites des changements dans votre code :

Le code Javascript ressemble à ceci :

Answer 3

J'ai lutté avec moi-même, et j'ai finalement été en mesure de suivre le problème et ce qui était à l'origine de la panne.

Tout cela découle du fait que mon formulaire de connexion a été dynamiquement injecté dans la page (à l'aide de backbone.js). Dès que j'ai intégrer mon formulaire de connexion directement dans mon index.html fichier, tout a fonctionné comme un charme.

Je pense que c'est parce que le navigateur doit être conscient qu'il existe un formulaire de connexion, mais depuis que le mien a été dynamiquement injecté dans la page, il ne savait pas qu'un "vrai" formulaire de connexion n'a jamais existé.

Answer 4

Cette solution a fonctionné pour moi posté par Eric sur le codingforums

---

La raison pour laquelle il n'invite pas, c'est parce que le navigateur a besoin de la page d'phyiscally pour actualiser sur le serveur. Un petit truc que vous pouvez faire est d'effectuer deux actions avec le formulaire. La première action est onsubmit l'ai appeler votre code Ajax. Ont également la forme de la cible cachée de l'iframe.

Code:

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

Voir si cela provoque l'invite à comparaître.

Eric

---

Posté le http://www.codingforums.com/showthread.php?t=123007

Answer 5

Il y a une ultime solution pour forcer tous les navigateurs (testé: chrome 25, safari 5.1, IE10, Firefox 16) pour demander d'enregistrer le mot de passe à l'aide de jQuery et ajax demande:

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>

Le truc, c'est d'arrêter le formulaire pour soumettre sa propre voie (événement.stopPropagation()), au lieu d'envoyer votre propre code ($.ajax()) et dans l'ajax de la réussite de rappel de soumettre à nouveau le formulaire de sorte que le navigateur l'attrape et l'affichage de la demande de mot de passe enregistrer. Vous pouvez également ajouter un peu de gestionnaire d'erreur, etc.

Espérons qu'il a aidé à quelqu'un.