Comment puis-je demander au navigateur d'enregistrer le mot de passe?

149

Hé, je travaille sur une application Web qui a une boîte de dialogue de connexion qui fonctionne comme ceci:

  1. L'utilisateur clique sur "connexion"
  2. Le HTML du formulaire de connexion est chargé avec AJAX et affiché dans DIV sur la page
  3. L'utilisateur entre l'utilisateur / passe dans les champs et clique sur Soumettre. Ce n'est PAS un <form>- l'utilisateur / le pass sont soumis via AJAX
  4. Si l'utilisateur / le passe sont corrects, la page se recharge avec l'utilisateur connecté.
  5. Si l'utilisateur / pass est incorrect, la page ne se recharge PAS mais un message d'erreur apparaît dans DIV et l'utilisateur peut réessayer.

Voici le problème: le navigateur n'offre jamais l'invite habituelle "Enregistrer ce mot de passe? Oui / Jamais / Pas maintenant" qu'il le fait pour d'autres sites.

J'ai essayé d'encapsuler les balises <div>in <form>avec "autocomplete = 'on'" mais cela n'a fait aucune différence.

Est-il possible de faire en sorte que le navigateur propose de stocker le mot de passe sans une refonte majeure de mon flux de connexion?

merci Eric

ps pour ajouter à ma question, je travaille définitivement avec des navigateurs qui stockent des mots de passe, et je n'ai jamais cliqué sur "jamais pour ce site" ... c'est un problème technique avec le navigateur ne détectant pas qu'il s'agit d'un formulaire de connexion, pas erreur d'opérateur :-)

Eric
la source
N'oubliez pas que tous les navigateurs ne peuvent pas stocker les mots de passe.
Buhake Sindi
1
mabe le navigateur a proposé de sauvegarder votre utilisateur / pass et vous avez cliqué sur "Ne plus jamais demander!" ?
clyfe
1
En relation: stackoverflow.com/questions/6142725/…
user123444555621

Réponses:

72

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

Il y a deux choses à savoir:

  1. Déclenchez 'Enregistrer le mot de passe', et
  2. Restaurer le nom d'utilisateur / mot de passe enregistré

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

Pour Firefox 21 , «Enregistrer le mot de passe» est déclenché lorsqu'il détecte qu'il existe un formulaire contenant un champ de texte d'entrée et un champ de mot de passe d'entrée est soumis. Donc nous avons juste besoin d'utiliser

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

someFunctionForLogin()effectue la connexion ajax et recharge / redirige vers la page de connexion tout en event.preventDefault()bloquant la redirection d'origine en raison de la soumission du formulaire.

Si vous utilisez uniquement Firefox, la solution ci-dessus est suffisante mais elle ne fonctionne pas dans Chrome 27. Ensuite, vous demanderez comment déclencher «Enregistrer le mot de passe» dans Chrome 27.

Pour Chrome 27 , "Enregistrer le mot de passe" est déclenché après avoir été redirigé vers la page en soumettant le formulaire qui contient un champ de texte de saisie avec l'attribut name = "username" et le champ de saisie du mot de passe avec l'attribut name = "password" . Par conséquent, nous ne pouvons pas bloquer la redirection en raison de la soumission du formulaire, mais nous pouvons effectuer la redirection après avoir effectué la connexion ajax. (Si vous voulez que la connexion ajax ne recharge pas la page ou ne redirige pas 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>
<script>
    $('#loginButton').click(someFunctionForLogin);
    function someFunctionForLogin(){
        if(/*ajax login success*/) {
            $('#loginForm').submit();
        }
        else {
            //do something to show login fail(e.g. display fail messages)
        }
    }
</script>

Le bouton avec type = 'button' fera que le formulaire ne sera pas soumis lorsque le bouton sera cliqué. Ensuite, lier une fonction au bouton pour la connexion ajax. Enfin, l'appel $('#loginForm').submit();redirige vers la page de connexion. Si la page de connexion est la page actuelle, vous pouvez remplacer «signedIn.xxx» par la page actuelle pour effectuer la «régénération».

Maintenant, vous constaterez que la méthode pour Chrome 27 fonctionne également dans Firefox 21. Il vaut donc mieux l'utiliser.

2. Restaurez le nom d'utilisateur / mot de passe enregistré:

Si vous avez déjà le loginForm codé en dur au format HTML, vous ne trouverez aucun problème pour restaurer le mot de passe enregistré dans le loginForm.
Cependant, le nom d'utilisateur / mot de passe enregistré ne sera pas lié au loginForm si vous utilisez js / jquery pour créer le loginForm dynamiquement, car le nom d'utilisateur / mot de passe enregistré est lié uniquement lorsque le document se charge.
Par conséquent, vous deviez coder en dur le loginForm au format HTML et utiliser js / jquery pour déplacer / afficher / masquer le loginForm dynamiquement.


Remarque: Si vous faites la connexion ajax, n'ajoutez pas autocomplete='off'de formulaire de balise comme

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

autocomplete='off' fera échouer la restauration du nom d'utilisateur / mot de passe dans le loginForm car vous ne l'autorisez pas à «compléter automatiquement» le nom d'utilisateur / mot de passe.

Espace temporel7
la source
2
Dans Chrome, "event.preventDefault ()" empêche l'affichage de l'invite "Enregistrer le mot de passe", voir ce bogue: code.google.com/p/chromium/issues/detail?id=282488
mkurz
Pour tous les autres qui trébuchent sur cela, je pense qu'ils publient un correctif: code.google.com/p/chromium/issues/detail?id=357696
2
De nombreux utilisateurs utilisent la ENTERclé pour soumettre le formulaire, car prevented defaultlorsque l'utilisateur a soumis le formulaire, rien ne se passera, c'est une mauvaise UX. Vous pouvez vérifier la clé d'entrée keycodelors de la soumission, mais vous reviendrez à la mendicité ...
David Reinberger
2
Chrome 46 a corrigé son mauvais comportement - aucune solution de contournement n'est plus nécessaire. Voir stackoverflow.com/a/33113374/810109
mkurz
1
Ne fonctionne pas de manière fiable, certains navigateurs ne déclenchent pas la fonction «se souvenir» si vous soumettez à partir de Javascript.
JustAMartin
44

Utilisation d'un bouton pour vous connecter:

Si vous utilisez un type="button"avec un onclickgestionnaire pour vous connecter en utilisant ajax, le navigateur ne proposera pas d'enregistrer le mot de passe.

<form id="loginform">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="button" value="Login" onclick="login(this.form);" />
</form>

Étant donné que ce formulaire n'a pas de bouton d'envoi et n'a pas de champ d'action, le navigateur ne proposera pas d'enregistrer le mot de passe.


L' utilisation d' un soumettre le bouton pour vous connecter:

Cependant, si vous changez le bouton type="submit"et gérez la soumission, le navigateur vous proposera d'enregistrer le mot de passe.

<form id="loginform" action="login.php" onSubmit="return login(this);">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="submit" value="Login" />
</form>

En utilisant cette méthode, le navigateur devrait proposer d'enregistrer le mot de passe.


Voici le Javascript utilisé dans les deux méthodes:

function login(f){
    var username = f.username.value;
    var password = f.password.value;

    /* Make your validation and ajax magic here. */

    return false; //or the form will post your data to login.php
}
Spetson
la source
1
@Bigood Parce que cela fonctionne alors que la réponse acceptée ne l'a pas (pour moi, du moins). Merci spetson!
Double M le
1
Fonctionne aussi pour moi dans IE. Je pourrais t'embrasser maintenant!
Renra
1
A travaillé pour moi aussi .. :)
Nabeel
1
C'est la bonne solution et aussi la solution la plus élégante au problème.
Arash Kazemi
Cela fonctionne parce que je copie simplement le 2ème code et le colle dans la page de connexion via l'élément inspect, entrez le nom d'utilisateur / mot de passe dans le champ nouvellement ajouté sur cette page et appuyez sur connexion, puis cela m'invite à enregistrer l'utilisateur / mot de passe. Ensuite, je rafraîchis la page et le tour est joué, cela m'invite à choisir l'utilisateur / pass déjà enregistré;)
Dewlance
15

J'ai moi-même été aux prises avec ce problème et j'ai finalement été en mesure de localiser le problème et les causes de son échec.

Tout cela découlait du fait que mon formulaire de connexion était injecté dynamiquement dans la page (en utilisant backbone.js). Dès que j'ai intégré mon formulaire de connexion directement dans mon fichier index.html, 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 existant, mais comme le mien était injecté dynamiquement dans la page, il ne savait pas qu'un formulaire de connexion "réel" existait.

TK421
la source
À partir de la version 46 de Chrome, vous pouvez maintenant également injecter des formulaires de manière dynamique et ils seront reconnus comme un formulaire de connexion "réel" dont les informations d'identification peuvent être enregistrées. Voir stackoverflow.com/a/33113374/810109
mkurz
12

Cette solution a fonctionné pour moi publiée par Eric sur les forums de codage


La raison pour laquelle il ne l'invite pas est que le navigateur a besoin que la page soit actualisée physiquement pour revenir au serveur. Une petite astuce que vous pouvez faire est d'effectuer deux actions avec le formulaire. La première action consiste à soumettre votre code Ajax. Le formulaire cible également une iframe masquée.

Code:

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

Voyez si cela fait apparaître l'invite.

Eric


Publié sur http://www.codingforums.com/showthread.php?t=123007

Vincent
la source
5
Pour rappel, j'ai constaté que Chrome 11 ne propose pas d'enregistrer vos informations d'identification si le formulaire est soumis à lui-même . Vous devez donc définir actionune page factice.
user123444555621
Cela enverra le texte brut du mot de passe dans l'URL en tant que demande d'obtention. Si la méthode est modifiée en POST, Firefox (16) ouvrira le cadre anciennement masqué dans un nouvel onglet. La même chose est vraie pour Chrome sur Android 4. :-(
stefan.s
Chrome 46 a corrigé son mauvais comportement - aucune iframesolution de contournement n'est plus nécessaire. Voir stackoverflow.com/a/33113374/810109
mkurz
10

Il existe une solution ultime pour forcer tous les navigateurs (testés: chrome 25, safari 5.1, IE10, Firefox 16) à demander à enregistrer le mot de passe en utilisant jQuery et ajax request:

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>

L'astuce consiste à arrêter le formulaire pour le soumettre à sa manière (event.stopPropagation ()), à envoyer à la place votre propre code ($ .ajax ()) et dans le rappel de succès de l'ajax, soumettre à nouveau le formulaire afin que le navigateur le détecte et affiche le demande de sauvegarde du mot de passe. Vous pouvez également ajouter un gestionnaire d'erreurs, etc.

J'espère que cela a aidé quelqu'un.

Michal Roharik
la source
7
Cela fera en fait un HTTP pour accéder à ce login.php?username=username&password=passwordqui efface tout le but de l'enregistrement du mot de passe en premier lieu
Adaptabi
Wooooooooooooooooooooooooooooooooooooooooooooooh! Cela a fonctionné pour moi;) merci beaucoup!
Hardik Thaker
1
Oui, ajouter event listenerau formulaire et ajouter event.preventDefault()plusevent.stopPropagation()
Densi Tensy
7

J'ai essayé la réponse de spetson, mais cela n'a pas fonctionné pour moi sur Chrome 18. Ce qui a fonctionné était d'ajouter un gestionnaire de charge à l'iframe et de ne pas interrompre l'envoi (jQuery 1.7):

function getSessions() {
    $.getJSON("sessions", function (data, textStatus) {
        // Do stuff
    }).error(function () { $('#loginForm').fadeIn(); });
}
$('form', '#loginForm').submit(function (e) {
    $('#loginForm').fadeOut();
}); 
$('#loginframe').on('load', getSessions);
getSessions();

Le HTML:

<div id="loginForm">
    <h3>Please log in</h3>
    <form action="/login" method="post" target="loginframe">
            <label>Username :</label>
            <input type="text" name="login" id="username" />
            <label>Password :</label>
            <input type="password" name="password" id="password"/>
            <br/>
            <button type="submit" id="loginB" name="loginB">Login!</button>
    </form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>

getSessions () effectue un appel AJAX et affiche la div loginForm en cas d'échec. (Le service Web renverra 403 si l'utilisateur n'est pas authentifié).

Testé pour fonctionner également dans FF et IE8.

w00t
la source
J'ai essayé cette méthode dans Chrome, et cela ne fonctionnerait que si la page d'action ( /logindans votre exemple) renvoyait du texte ou un autre contenu visible.
Stephen Bunch
1
Chrome 46 a corrigé son mauvais comportement - aucune iframesolution de contournement n'est plus nécessaire. Voir stackoverflow.com/a/33113374/810109
mkurz
4

Le navigateur peut ne pas être en mesure de détecter que votre formulaire est un formulaire de connexion. Selon certaines des discussions de cette question précédente , un navigateur recherche des champs de formulaire qui ressemblent à <input type="password">. Votre champ de formulaire de mot de passe est-il implémenté de la même manière?

Edit: Pour répondre à vos questions ci-dessous, je pense que Firefox détecte les mots de passe en form.elements[n].type == "password"(itérant à travers tous les éléments du formulaire), puis détecte le champ du nom d'utilisateur en recherchant en arrière dans les éléments du formulaire pour le champ de texte immédiatement avant le champ du mot de passe (plus d'informations ici ). D'après ce que je peux dire, votre formulaire de connexion doit faire partie d'un <form>ou Firefox ne le détectera pas.

bta
la source
1
C'est similaire, oui, merci, j'accepterai cela comme la réponse officielle car c'est à peu près aussi proche que possible. Voici quelque chose de frustrant: je n'arrive pas à trouver (n'importe où sur le Web) un article de blog simple qui dit "Voici les règles que les navigateurs utilisent pour détecter si le formulaire que vous remplissez est un formulaire de connexion, afin qu'ils puissent offrir pour enregistrer le mot de passe de l'utilisateur. " Considérant qu'il s'agit d'un peu de magie noire (et considérant que Mozilla, au moins, est open source), on pourrait penser que quelqu'un publierait simplement l'heuristique.
Eric
(Et de même, il ne semble pas y avoir de moyen pour moi d '"indiquer" mon formulaire de connexion afin que le navigateur sache qu'il s'agit d'un formulaire de connexion. Encore une fois, surpris que ce ne soit pas mieux documenté sur le Web. Je pense que mes modifications sera aux noms des champs de formulaire et à la structure HTML globale, et j'espère que [!] cela résoudra le problème.)
Eric
D'accord, pas de chance. J'ai posé une nouvelle question, en l'abordant sous un angle légèrement différent: stackoverflow.com/questions/2398763/…
Eric
3

Approche 2020 simple

Cela activera automatiquement la saisie semi-automatique et enregistrera le mot de passe dans les navigateurs.

  • autocomplete="on" (forme)
  • autocomplete="username" (entrée, email / nom d'utilisateur)
  • autocomplete="current-password" (saisir mot de passe)
<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Pour en savoir plus, consultez la documentation Apple: Activation de la saisie automatique de mot de passe sur un élément d'entrée HTML

Danny Wave
la source
4
Pour info, cela semble nécessiter la soumission d'un formulaire (ne peut pas utiliser XHR et preventDefault) et cela ne fonctionnera pas s'il n'y a qu'un seul champ de mot de passe (applications de type sécurité numérique). Partager ces résultats pour quiconque pourrait le trouver utile.
Tomáš Hübelbauer
2

J'ai passé beaucoup de temps à lire les différentes réponses sur ce fil, et pour moi, c'était en fait quelque chose de légèrement différent (lié, mais différent). Sur Mobile Safari (appareils iOS), si le formulaire de connexion est HIDDEN lorsque la page se charge, l'invite n'apparaîtra pas (après avoir affiché le formulaire, puis l'envoyer). Vous pouvez tester avec le code suivant, qui affiche le formulaire 5 secondes après le chargement de la page. Retirez le JS et l'écran: aucun et cela fonctionne. Je n'ai pas encore trouvé de solution à cela, juste posté au cas où quelqu'un d'autre aurait le même problème et ne pourrait pas en comprendre la cause.

JS:

$(function() {
  setTimeout(function() {
    $('form').fadeIn();
  }, 5000);
});

HTML:

<form method="POST" style="display: none;">
  <input name='email' id='email' type='email' placeholder='email' />
  <input name='password' id='password' type='password' placeholder='password' />
  <button type="submit">LOGIN</button>
</form>
capitaine clam
la source
2

Aucune des réponses n'indique déjà clairement que vous pouvez utiliser l'API HTML5 History pour vous demander d'enregistrer le mot de passe.

Tout d'abord, vous devez vous assurer d'avoir au moins un <form>élément avec un mot de passe et un champ d'adresse e-mail ou de nom d'utilisateur. La plupart des navigateurs gèrent cela automatiquement tant que vous utilisez les bons types d'entrée (mot de passe, e-mail ou nom d'utilisateur). Mais pour être sûr, définissez correctement les valeurs de saisie semi-automatique pour chaque élément d'entrée.

Vous pouvez trouver une liste des valeurs de saisie semi-automatique ici: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Ceux dont vous avez besoin sont: username, emailetcurrent-password

Ensuite, vous avez deux possibilités:

  • Si vous naviguez vers une URL différente après la soumission, la plupart des navigateurs vous inviteront à enregistrer le mot de passe.
  • Si vous ne souhaitez pas rediriger vers une URL différente ou même recharger la page (par exemple, une application d'une seule page). Empêchez simplement les événements par défaut (en utilisant e.preventDefault) dans votre gestionnaire d'envoi du formulaire. Vous pouvez utiliser l'API d'historique HTML5 pour pousser quelque chose sur l'historique pour indiquer que vous avez «navigué» dans votre application à page unique. Le navigateur demandera maintenant d'enregistrer le mot de passe et le nom d'utilisateur.
history.pushState({}, "Your new page title");

Vous pouvez également modifier l'URL de la page, mais cela n'est pas nécessaire pour demander à enregistrer le mot de passe:

history.pushState({}, "Your new page title", "new-url");

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Cela présente l'avantage supplémentaire que vous pouvez empêcher le navigateur de demander à enregistrer le mot de passe si l'utilisateur a mal saisi le mot de passe. Notez que dans certains navigateurs, le navigateur demandera toujours d'enregistrer les informations d'identification, même lorsque vous appelez .preventDefault et n'utilisez pas l'API d'historique.

Si vous ne souhaitez pas quitter et / ou modifier l'historique du navigateur, vous pouvez utiliser replaceState à la place (cela fonctionne également).

Simon Backx
la source
c'est la réponse de l'année 2020! J'ai dû utiliser history.pushState({}, null "Your new page title");pour changer l'url sans aucune navigation
Delcon
1

Le code suivant est testé sur

  • Chrome 39.0.2171.99m: FONCTIONNE
  • Android Chrome 39.0.2171.93: FONCTIONNE
  • Navigateur de stock Android (Android 4.4): NE FONCTIONNE PAS
  • Internet Explorer 5+ (émulé): FONCTIONNE
  • Internet Explorer 11.0.9600.17498 / Update-Version: 11.0.15: FONCTIONNEMENT
  • Firefox 35.0: FONCTIONNE

JS-Fiddle:
http://jsfiddle.net/ocozggqu/

Code postal:

// modified post-code from /programming/133925/javascript-post-request-like-a-form-submit
function post(path, params, method)
{
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.

    var form = document.createElement("form");
    form.id = "dynamicform" + Math.random();
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    form.setAttribute("style", "display: none");
    // Internet Explorer needs this
    form.setAttribute("onsubmit", "window.external.AutoCompleteSaveForm(document.getElementById('" + form.id + "'))");

    for (var key in params)
    {
        if (params.hasOwnProperty(key))
        {
            var hiddenField = document.createElement("input");
            // Internet Explorer needs a "password"-field to show the store-password-dialog
            hiddenField.setAttribute("type", key == "password" ? "password" : "text");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    var submitButton = document.createElement("input");
    submitButton.setAttribute("type", "submit");

    form.appendChild(submitButton);

    document.body.appendChild(form);

    //form.submit(); does not work on Internet Explorer
    submitButton.click(); // "click" on submit-button needed for Internet Explorer
}

Remarques

  • Pour les formulaires de connexion dynamiques, un appel à window.external.AutoCompleteSaveFormest nécessaire
  • Internet Explorer a besoin d'un champ "mot de passe" pour afficher la boîte de dialogue de mot de passe de stockage
  • Internet Explorer semble nécessiter un clic sur le bouton d'envoi (même s'il s'agit d'un faux clic)

Voici un exemple de code de connexion ajax:

function login(username, password, remember, redirectUrl)
{
    // "account/login" sets a cookie if successful
    return $.postJSON("account/login", {
        username: username,
        password: password,
        remember: remember,
        returnUrl: redirectUrl
    })
    .done(function ()
    {
        // login succeeded, issue a manual page-redirect to show the store-password-dialog
        post(
            redirectUrl,
            {
                username: username,
                password: password,
                remember: remember,
                returnUrl: redirectUrl
            },
            "post");
    })
    .fail(function ()
    {
        // show error
    });
};

Remarques

  • "compte / connexion" définit un cookie en cas de succès
  • La redirection de page ("manuellement" initiée par js-code) semble être nécessaire. J'ai aussi testé un iframe-post, mais je n'ai pas réussi avec ça.
David Rettenbacher
la source
1

J'ai trouvé une solution assez élégante (ou hack, quelle que soit la solution) pour les utilisateurs de Prototype.JS, étant l'un des derniers retranchements utilisant Prototype. Une simple substitution des méthodes jQuery correspondantes devrait faire l'affaire.

Tout d'abord, assurez-vous qu'il existe une <form>balise et un bouton d'envoi avec un nom de classe qui peut être référencé plus tard (dans ce cas faux-submit) qui est imbriqué dans un élément avec un style défini sur display:none, comme illustré ci-dessous:

<form id="login_form" action="somewhere.php" method="post">
    <input type="text" name="login" />
    <input type="password" name="password" />
    <div style="display:none">
        <input class="faux-submit" type="submit" value="Submit" />
    </div>
    <button id="submit_button">Login</button>
</form>

Ensuite, créez un observateur de clic pour le button, qui "soumettra" le formulaire comme illustré:

$('submit_button').observe('click', function(event) {
    $('login_form').submit();
});

Créez ensuite un écouteur pour l' submitévénement et arrêtez-le. event.stop()arrêtera tous les événements de soumission dans le DOM à moins qu'il ne soit inclus dans Event.findElementla classe du bouton d'entrée masqué (comme ci-dessus, faux-submit):

document.observe('submit', function(event) {
    if (event.findElement(".faux-submit")) { 
        event.stop();
    }
});

Ceci est testé comme fonctionnant dans Firefox 43 et Chrome 50.

mwieczorek
la source
0

Votre site est probablement déjà dans la liste où le navigateur est invité à ne pas demander d'enregistrer un mot de passe. Dans Firefox, Options -> Sécurité -> Mémoriser le mot de passe pour les sites [case à cocher] - exceptions [bouton]

Dave.Sol
la source
0

ajoutez un peu plus d'informations à la réponse de @Michal Roharik.

si votre appel ajax renverra une URL de retour, vous devez utiliser jquery pour changer l'attribut d'action de formulaire en cette URL avant d'appeler form.submit

ex.

$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit(); 
maxisam
la source
0

J'ai eu un problème similaire, la connexion a été effectuée avec ajax, mais les navigateurs (firefox, chrome, safari et IE 7-10) ne proposent pas d'enregistrer le mot de passe si le formulaire (#loginForm) est soumis avec ajax.

En tant que SOLUTION, j'ai ajouté une entrée de soumission cachée (#loginFormHiddenSubmit) au formulaire qui a été soumis par ajax et après que l'appel ajax retourne le succès, je déclencherais un clic pour masquer l'entrée de soumission. La page devait être actualisée de toute façon. Le clic peut être déclenché avec:

jQuery('#loginFormHiddenSubmit').click();

La raison pour laquelle j'ai ajouté un bouton d'envoi masqué est que:

jQuery('#loginForm').submit();

n'offrirait pas d'enregistrer le mot de passe dans IE (bien que cela ait fonctionné dans d'autres navigateurs).

Igor
la source
-1

Tous les navigateurs (par exemple IE 6) n'ont pas la possibilité de mémoriser les informations d'identification.

Une chose que vous pouvez faire est (une fois que l'utilisateur se connecte avec succès) stocker les informations de l'utilisateur via un cookie et avoir une option "Se souvenir de moi sur cette machine". De cette façon, lorsque l'utilisateur revient (même s'il est déconnecté), votre application Web peut récupérer le cookie et obtenir les informations de l'utilisateur (ID utilisateur + ID de session) et lui permettre de continuer à travailler.

J'espère que cela peut être suggestif. :-)

Buhake Sindi
la source
Je ne stockerais pas les informations utilisateur dans un cookie, du moins rien de sensible.
Jack Marchetti
Je ne voulais pas stocker le mot de passe de l'utilisateur. De toute évidence, vous devrez être très créatif dans la façon dont vous devrez créer useful garbagepour identifier les informations utilisateur. Même SO stocke des informations dans des cookies afin de vous reconnaître.
Buhake Sindi
assez juste, mais je crypterais toujours autant que vous le pourriez.
Jack Marchetti
@JackMarchetti le chiffrer côté client serait une mauvaise (et un peu inutile) idée. Le code nécessaire au chiffrement étant visible, n'importe qui peut trouver le fichier .js et le déchiffrer. Cela signifie que vous ne devez pas stocker les données dans un cookie
Universal Electricity
-1

La vérité est que vous ne pouvez pas forcer le navigateur à demander. Je suis sûr que le navigateur a son propre algorithme pour deviner si vous avez entré un nom d'utilisateur / mot de passe, par exemple pour rechercher une entrée de type="password"mais vous ne pouvez rien définir pour forcer le navigateur.

Vous pouvez, comme d'autres le suggèrent, ajouter des informations utilisateur dans un cookie. Si vous faites cela, vous feriez mieux de le crypter au moins et de ne pas stocker leur mot de passe. Peut-être stocker au maximum leur nom d'utilisateur.

Jack Marchetti
la source
Et vous suggérez des cookies?
Buhake Sindi
Je dis de crypter tout ce que vous y stockez.
Jack Marchetti
1
Biscuits? C'est une mauvaise idée qui attend d'arriver
NightSkyCode
-1

Vous pouvez joindre la boîte de dialogue au formulaire afin que toutes ces entrées soient dans un formulaire. L'autre chose est de créer le champ de texte du mot de passe juste après le champ de texte du nom d'utilisateur.

Kait
la source
-1

Cela fonctionne beaucoup mieux pour moi, car il est 100% ajaxé et le navigateur détecte la connexion.

<form id="loginform" action="javascript:login(this);" >
 <label for="username">Username</label>
 <input name="username" type="text" value="" required="required" />
 <label for="password">Password</label>
 <input name="password" type="password" value="" required="required" />
 <a href="#" onclick="document.getElementById("loginform").submit();"  >Login</a>
</form>
ShelatoBaboon
la source
-2

L'utilisation d'un cookie serait probablement la meilleure façon de procéder.

Vous pourriez avoir une case à cocher pour "Se souvenir de moi?" et demandez au formulaire de créer un cookie pour stocker // les informations de connexion // de l'utilisateur. EDIT: informations de session utilisateur

Pour créer un cookie, vous devrez traiter le formulaire de connexion avec PHP.

Mandrig
la source