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

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

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.

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
}

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.

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

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.

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.

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.

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

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>

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

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.

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.

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]

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(); 

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

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. :-)

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.

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.

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>

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.