Comment puis-je obtenir que le navigateur invite à enregistrer le mot de passe?

J’ai trouvé une solution complète pour cette question. (Je l’ai testé dans Chrome 27 et Firefox 21).

Il y a deux choses à savoir:

1. Déclencher ‘Enregistrer le mot de passe’, et
2. Restaurer le nom d’utilisateur / mot de passe enregistré

1. Déclencher ‘Enregistrer le mot de passe’:

Pour Firefox 21 , «Enregistrer le mot de passe» est déclenché lorsqu’il détecte la présence d’un formulaire contenant un champ de texte de saisie et que le champ du 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 event.preventDefault() tandis que event.preventDefault() bloque la redirection d’origine en raison de la soumission du formulaire.

Si vous traitez uniquement avec Firefox, la solution ci-dessus est suffisante mais elle ne fonctionne pas dans Chrome 27. Vous allez ensuite demander 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 saisie avec l’atsortingbut name = ‘username’ et le mot de passe d’entrée avec l’atsortingbut 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

    Login   

Button with type = ‘button’ fera que le formulaire ne sera pas soumis lorsque l’utilisateur cliquera sur le bouton. Ensuite, lier une fonction au bouton pour une connexion ajax. Enfin, en appelant $('#loginForm').submit(); redirige vers la page de connexion. Si la page de connexion est la page en cours, vous pouvez remplacer ‘signedIn.xxx’ par la page en cours pour effectuer l’actualisation.

Maintenant, vous constaterez que la méthode pour Chrome 27 fonctionne également dans Firefox 21. Il est donc préférable de l’utiliser.

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

Si vous avez déjà le code de connexion loginForm en 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 dynamicment le loginForm, car le nom d’utilisateur / mot de passe enregistré est lié uniquement lorsque le document est chargé.
Par conséquent, vous devez coder en dur le loginForm au format HTML et utiliser js / jquery pour déplacer / afficher / masquer dynamicment le loginForm.

Remarque: Si vous vous connectez à ajax, n’ajoutez pas autocomplete='off' sous forme de tag comme

autocomplete='off' fera échouer le nom d’utilisateur / mot de passe de restauration dans le loginForm parce que vous ne l’autorisez pas à effectuer automatiquement le nom d’utilisateur / mot de passe.

Utiliser un bouton pour vous connecter:

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

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

Utiliser un bouton de soumission pour vous connecter:

Toutefois, si vous modifiez le bouton pour type="submit" et gérez l’envoi, le navigateur vous proposera d’enregistrer le mot de passe.

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 } 

Je me suis débattu avec ce problème et j’ai finalement pu identifier le problème et ce qui le faisait échouer.

Tout est dû au fait que mon formulaire de connexion était dynamicment injecté 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 savoir qu’il existe un formulaire de connexion existant, mais comme le mien était dynamicment injecté dans la page, il ne savait pas qu’un vrai formulaire de connexion existait.

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

La raison pour laquelle il ne le demande pas est que le navigateur a besoin de la page pour se rafraîchir physiquement sur le serveur. Un petit truc que vous pouvez faire est d’effectuer deux actions avec le formulaire. La première action est onsubmit le faire appeler votre code Ajax. Le formulaire doit également cibler un iframe masqué.

Code:

Voir si cela provoque l’invite à apparaître.

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 de sauvegarder 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:

 
 Username  Password    

L’astuce consiste à arrêter le formulaire pour soumettre son propre chemin (event.stopPropagation ()), au lieu d’envoyer votre propre code ($ .ajax ()) et dans le callback réussi ajax soumet le formulaire à nouveau pour que le navigateur l’attrape et affiche le demande de sauvegarde de mot de passe. Vous pouvez également append un gestionnaire d’erreurs, etc.

J’espère que ça 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’append un gestionnaire de chargement à 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:

 
 
Please log in
 
 Username :  Password :  
 Login! 
 
  

getSessions () effectue un appel AJAX et affiche le div loginForm s’il échoue. (Le service Web renverra 403 si l’utilisateur n’est pas authentifié).

Testé pour fonctionner dans FF et IE8 également.

Le navigateur peut ne pas être en mesure de détecter que votre formulaire est un formulaire de connexion. Selon une partie de la discussion de cette question précédente , un navigateur recherche les champs de formulaire qui ressemblent à . Votre champ de mot de passe est-il similaire à celui-ci?

Edit: Pour répondre à vos questions ci-dessous, je pense que Firefox détecte les mots de passe par form.elements[n].type == "password" (itération à travers tous les éléments de formulaire) et détecte ensuite le champ nom d’utilisateur en effectuant une recherche immédiatement avant le champ mot de passe (plus d’infos ici ). D’après ce que je peux dire, votre formulaire de connexion doit faire partie d’un

ou Firefox ne le détectera pas.

J’ai passé beaucoup de temps à lire les différentes réponses sur ce sujet, 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 CACHÉ 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’affichage: aucun et cela fonctionne. Je n’ai pas encore trouvé de solution à cela, juste au cas où quelqu’un d’autre aurait le même problème et ne pourrait pas en trouver la cause.

JS:

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

HTML:

 
   LOGIN  

Le code suivant est testé sur

• Chrome 39.0.2171.99m: TRAVAIL
• Android Chrome 39.0.2171.93: TRAVAIL
• Android stock-browser (Android 4.4): NE FONCTIONNE PAS
• Internet Explorer 5+ (émulé): WORKING
• Internet Explorer 11.0.9600.17498 / Version de mise à jour: 11.0.15: FONCTIONNEMENT
• Firefox 35.0: TRAVAILLER

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

Code postal:

 // modified post-code from https://stackoverflow.com/questions/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.setAtsortingbute("method", method); form.setAtsortingbute("action", path); form.setAtsortingbute("style", "display: none"); // Internet Explorer needs this form.setAtsortingbute("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.setAtsortingbute("type", key == "password" ? "password" : "text"); hiddenField.setAtsortingbute("name", key); hiddenField.setAtsortingbute("value", params[key]); form.appendChild(hiddenField); } } var submitButton = document.createElement("input"); submitButton.setAtsortingbute("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 dynamics, un appel à window.external.AutoCompleteSaveForm est nécessaire
• Internet Explorer a besoin d’un champ “password” pour afficher la boîte de dialog store-password
• Internet Explorer semble nécessiter un clic sur le bouton de soumission (même si c’est 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

• “account / login” définit un cookie en cas de succès
• La page-redirect (“manuellement” initiée par js-code) semble être nécessaire. J’ai également testé un iframe-post, mais cela n’a pas été un succès.

J’ai trouvé une solution assez élégante (ou un hack, quoi qu’il en soit) pour les utilisateurs de Prototype.JS, étant l’un des derniers utilisateurs de Prototype. Une simple substitution des méthodes jQuery correspondantes devrait faire l’affaire.

Tout d’abord, assurez-vous qu’il y a une

et un bouton de soumission avec un nom de classe pouvant être référencé ultérieurement (dans ce cas, un faux-submit ) nested dans un élément avec un ensemble de style à display:none , comme illustré ci-dessous :

 
   
  
 Login  

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’événement de submit et arrêtez-le. event.stop() arrête tous les événements de soumission dans le DOM sauf s’il est enveloppé dans Event.findElement avec la 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 l’enregistrement d’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 retourne une URL de retour, vous devez utiliser jquery pour changer l’atsortingbut d’action de formulaire à cette URL avant d’appeler form.submit

ex.

 $(form).attr('action', ReturnPath); form.submitted = false; form.submit(); 

J’ai eu le même problème, la connexion a été faite avec ajax, mais les navigateurs (firefox, chrome, safari et IE 7-10) n’offriraient 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 un appel ajax, le résultat serait positif. La page de toute façon devait être rafraîchie. Le clic peut être déclenché avec:

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

La raison pour laquelle j’ai ajouté le bouton d’envoi caché est que:

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

n’offrirait pas d’enregistrer le mot de passe dans IE (bien qu’il ait fonctionné dans d’autres navigateurs).

Tous les navigateurs (par exemple IE 6) ne disposent pas d’options permettant de mémoriser les informations d’identification.

Une chose que vous pouvez faire est de (une fois que l’utilisateur se connecte avec succès) stocker les informations utilisateur via un cookie et avoir l’option “Se souvenir de moi sur cette machine”. De cette manière, lorsque l’utilisateur revient (même s’il est déconnecté), votre application Web peut récupérer le cookie et obtenir les informations 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, append des informations utilisateur dans un cookie. Si vous faites cela, vous feriez mieux de le chiffrer au minimum et de ne pas stocker leur mot de passe. Peut-être stocker leur nom d’utilisateur au maximum.

Vous pouvez joindre la boîte de dialog au formulaire, de sorte que toutes ces entrées sont dans un formulaire. L’autre chose est de rendre 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 ajusté à 100% et le navigateur détecte la connexion.

 
 Username  Password  Login  

Utiliser un cookie serait probablement le meilleur moyen de le faire.

Vous pourriez avoir une case à cocher pour “Se souvenir de moi?” et faire en sorte que le formulaire crée un cookie pour stocker les informations de connexion // de l’utilisateur //. EDIT: Informations sur la session utilisateur

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