Come posso richiedere al browser di chiedere di salvare la password?

Ehi, sto lavorando a un'app Web che ha una finestra di accesso che funziona in questo modo:

1. L'utente fa clic su "Accedi"
2. Il modulo di accesso HTML viene caricato con AJAX e visualizzato in DIV sulla pagina
3. L'utente inserisce l'utente / passa i campi e fa clic su Invia. NON è un <form>- utente / pass vengono inviati tramite AJAX
4. Se l'utente / il passaggio sono corretti, la pagina viene ricaricata con l'utente connesso.
5. Se l'utente / il passaggio sono errati, la pagina NON viene ricaricata ma il messaggio di errore viene visualizzato in DIV e l'utente può riprovare.

Ecco il problema: il browser non offre mai la solita richiesta "Salva questa password? Sì / Mai / Non ora" che fa per altri siti.

Ho provato avvolgendo la <div>in <form>tag con "autocomplete = 'on'", ma che ha fatto alcuna differenza.

È possibile ottenere il browser da offrire per memorizzare la password senza un'importante rielaborazione del mio flusso di accesso?

grazie Eric

ps per aggiungere alla mia domanda, sto sicuramente lavorando con i browser che memorizzano le password e non ho mai cliccato "mai per questo sito" ... questo è un problema tecnico con il browser che non rileva che si tratta di un modulo di accesso, non errore dell'operatore :-)

Ho trovato una soluzione completa per questa domanda. (Ho provato questo in Chrome 27 e Firefox 21).

Ci sono due cose da sapere:

1. Attiva "Salva password" e
2. Ripristina il nome utente / la password salvati

1. Attiva "Salva password":

Per Firefox 21 , "Salva password" viene attivato quando rileva che è presente un modulo contenente un campo di testo di input e viene inviato un campo di input password. Quindi dobbiamo solo usare

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

someFunctionForLogin() effettua l'accesso ajax e ricarica / reindirizza alla pagina di accesso mentre event.preventDefault() blocca il reindirizzamento originale a causa dell'invio del modulo.

Se hai a che fare solo con Firefox, la soluzione sopra è sufficiente ma non funziona in Chrome 27. Quindi chiederai come attivare "Salva password" in Chrome 27.

Per Chrome 27 , "Salva password" viene attivato dopo essere reindirizzato alla pagina inviando il modulo che contiene un campo di testo di input con nome attributo = "nome utente" e un campo di password con nome nome attributo = "password" . Pertanto, non possiamo bloccare il reindirizzamento a causa dell'invio del modulo, ma possiamo effettuare il reindirizzamento dopo aver effettuato l'accesso ajax. (Se vuoi che il login ajax non ricarichi la pagina o non reindirizzi a una pagina, sfortunatamente, la mia soluzione non funziona.) Quindi, possiamo usare

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

Il pulsante con type = 'button' renderà il modulo da non inviare quando si fa clic sul pulsante. Quindi, associando una funzione al pulsante per l'accesso ajax. Finalmente chiamando$('#loginForm').submit(); reindirizzamenti alla pagina di accesso. Se la pagina di accesso è la pagina corrente, è possibile sostituire "signedIn.xxx" con la pagina corrente per eseguire "aggiorna".

Ora, scoprirai che il metodo per Chrome 27 funziona anche in Firefox 21. Quindi è meglio usarlo.

2. Ripristina il nome utente / la password salvati:

Se hai già loginForm hardcoded come HTML, non troverai alcun problema per ripristinare la password salvata in loginForm.
Tuttavia, il nome utente / la password salvati non verranno associati a loginForm se si utilizza js / jquery per rendere loginForm dinamicamente, poiché il nome utente / la password salvati vengono associati solo quando il documento viene caricato.
Pertanto, è necessario codificare il loginForm come HTML e utilizzare js / jquery per spostare / mostrare / nascondere il loginForm in modo dinamico.

Nota: se si effettua l'accesso ajax, non aggiungere autocomplete='off'in forma tag come

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

autocomplete='off' farà sì che il ripristino del nome utente / password nel loginForm fallisca perché non gli permetti di 'completare automaticamente' il nome utente / password.

Utilizzando un pulsante per accedere:

Se si utilizza a type="button"con un onclickgestore per accedere utilizzando ajax, il browser non offrirà di salvare la password.

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

Poiché questo modulo non ha un pulsante di invio e non ha campi di azione, il browser non offrirà di salvare la password.

Utilizzando un pulsante di invio per accedere:

Tuttavia, se si modifica il pulsante type="submit"e si gestisce l'invio, il browser offrirà di salvare la password.

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

Utilizzando questo metodo, il browser dovrebbe offrire di salvare la password.

Ecco il Javascript utilizzato in entrambi i metodi:

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
}

Ho lottato con questo me stesso e alla fine sono stato in grado di rintracciare il problema e ciò che stava causando il fallimento.

Tutto derivava dal fatto che il mio modulo di accesso veniva iniettato dinamicamente nella pagina (usando backbone.js). Non appena ho incorporato il mio modulo di accesso direttamente nel mio file index.html, tutto ha funzionato come un fascino.

Penso che ciò sia dovuto al fatto che il browser deve essere consapevole che esiste un modulo di accesso esistente, ma poiché il mio veniva iniettato dinamicamente nella pagina, non sapeva che esistesse mai un modulo di accesso "reale".

Questa soluzione ha funzionato per me, pubblicata da Eric nei forum di programmazione

Il motivo per cui non lo richiede è perché il browser ha bisogno che la pagina si aggiorni in modo phyiscal al server. Un piccolo trucco che puoi fare è eseguire due azioni con il modulo. La prima azione è onsubmit che chiama il tuo codice Ajax. Inoltre, il modulo ha come target un iframe nascosto.

Codice:

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

Verifica se ciò provoca la visualizzazione del prompt.

Eric

Pubblicato su http://www.codingforums.com/showthread.php?t=123007

Esiste una soluzione definitiva per forzare tutti i browser (testati: Chrome 25, Safari 5.1, IE10, Firefox 16) a chiedere di salvare la password usando jQuery e la richiesta Ajax :

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>

Il trucco sta nel fermare il modulo per inviare a modo suo (event.stopPropagation ()), invece invia il tuo codice ($ .ajax ()) e nel callback di successo di ajax invia nuovamente il modulo in modo che il browser lo catturi e visualizzi il richiesta di salvataggio password. Puoi anche aggiungere qualche gestore degli errori, ecc.

Spero che abbia aiutato qualcuno.

Ho provato la risposta di Spetson ma non ha funzionato per me su Chrome 18. Quello che ha funzionato è stato aggiungere un gestore di carico all'iframe e non interrompere l'invio (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();

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 () esegue una chiamata AJAX e mostra il div loginForm se non riesce. (Il servizio Web restituirà 403 se l'utente non è autenticato).

Testato per funzionare anche in FF e IE8.

Il browser potrebbe non essere in grado di rilevare che il modulo è un modulo di accesso. Secondo alcune delle discussioni in questa domanda precedente , un browser cerca i campi modulo che sembrano <input type="password">. Il campo del modulo password è implementato in modo simile a quello?

Modifica: per rispondere alle tue domande di seguito, penso che Firefox rilevi le password form.elements[n].type == "password"(ripetendo tutti gli elementi del modulo) e quindi rilevi il campo del nome utente cercando indietro tra gli elementi del modulo per il campo di testo immediatamente prima del campo della password (maggiori informazioni qui ). Da quello che posso dire, il tuo modulo di accesso deve essere parte di un <form>o Firefox non lo rileverà.

Approccio semplice 2020

Ciò consentirà automaticamente il completamento automatico e il salvataggio della password nei browser.

• autocomplete="on" (modulo)
• autocomplete="username" (input, email / nome utente)
• autocomplete="current-password" (inserire password)

<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Scopri di più sulla documentazione di Apple: Abilitazione del riempimento automatico della password su un elemento di input HTML

Ho trascorso molto tempo a leggere le varie risposte su questo thread e, per me, in realtà era qualcosa di leggermente diverso (correlato, ma diverso). Su Safari per dispositivi mobili (dispositivi iOS), se il modulo di accesso è NASCOSTO quando la pagina viene caricata, il prompt non verrà visualizzato (dopo aver mostrato il modulo quindi inviarlo). È possibile verificare con il seguente codice, che visualizza il modulo 5 secondi dopo il caricamento della pagina. Rimuovere JS e il display: nessuno e funziona. Devo ancora trovare una soluzione a questo, appena pubblicato nel caso in cui qualcun altro abbia lo stesso problema e non riesca a capire la causa.

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>

Nessuna delle risposte chiarisce già che è possibile utilizzare l'API della cronologia HTML5 per richiedere di salvare la password.

Innanzitutto, devi assicurarti di avere almeno un <form> elemento con una password e un campo e-mail o nome utente. La maggior parte dei browser lo gestisce automaticamente finché si utilizzano i tipi di input corretti (password, e-mail o nome utente). Ma per sicurezza, imposta correttamente i valori di completamento automatico per ogni elemento di input.

Puoi trovare un elenco dei valori di completamento automatico qui: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Quelle che ti servono sono: username,email ecurrent-password

Quindi hai due possibilità:

• Se si passa a un URL diverso dopo l'invio, la maggior parte dei browser richiederà di salvare la password.
• Se non si desidera reindirizzare a un URL diverso o ricaricare la pagina (ad esempio un'applicazione a pagina singola). Impedisci le impostazioni predefinite dell'evento (utilizzando e.preventDefault) nel gestore di invio del modulo. Puoi utilizzare l'API della cronologia HTML5 per inserire qualcosa nella cronologia per indicare che hai "navigato" all'interno dell'applicazione a pagina singola. Il browser chiederà ora di salvare la password e il nome utente.

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

Puoi anche modificare l'URL della pagina, ma non è richiesto per richiedere di salvare la password:

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

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

Ciò ha l'ulteriore vantaggio di impedire al browser di chiedere di salvare la password se l'utente ha inserito la password in modo errato. Si noti che in alcuni browser il browser chiederà sempre di salvare le credenziali, anche quando si chiama .preventDefault e non si utilizza l'API della cronologia.

Se non vuoi allontanarti e / o modificare la cronologia del browser, puoi usare invece SostituisciStato (funziona anche questo).

Il seguente codice è testato

• Chrome 39.0.2171.99m: FUNZIONANTE
• Android Chrome 39.0.2171.93: FUNZIONANTE
• Browser stock Android (Android 4.4): NON FUNZIONANTE
• Internet Explorer 5+ (emulato): FUNZIONANTE
• Internet Explorer 11.0.9600.17498 / Versione aggiornamento: 11.0.15: FUNZIONANTE
• Firefox 35.0: FUNZIONANTE

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

Codice postale:

// 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
}

Osservazioni

• Per i moduli di accesso dinamici window.external.AutoCompleteSaveFormè necessaria una chiamata a
• Internet Explorer ha bisogno di un campo "password" per mostrare la finestra di dialogo password-archivio
• Internet Explorer sembra richiedere un clic sul pulsante di invio (anche se si tratta di un clic falso)

Ecco un esempio di codice di accesso 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
    });
};

Osservazioni

• "account / login" imposta un cookie in caso di successo
• Il reindirizzamento della pagina ("manualmente" avviato da js-code) sembra essere richiesto. Ho anche testato un post iframe, ma non ci sono riuscito.

Ho trovato una soluzione abbastanza elegante (o hack, qualunque sia adatta) per gli utenti di Prototype.JS, essendo uno degli ultimi holdout che usano Prototype. Una semplice sostituzione dei corrispondenti metodi jQuery dovrebbe fare il trucco.

Innanzitutto, assicurati che ci sia un <form>tag e un pulsante di invio con un nome di classe a cui possa fare riferimento in seguito (in questo caso faux-submit) che è nidificato all'interno di un elemento con uno stile impostato su display:none, come illustrato di seguito:

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

Quindi creare un osservatore clic per il " buttonche invierà" il modulo come illustrato:

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

Quindi crea un listener per l' submitevento e fermalo. event.stop()interromperà tutti gli eventi di invio nel DOM a meno che non siano inclusi nella Event.findElementclasse del pulsante di input nascosto (come sopra faux-submit):

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

Questo è testato come funzionante in Firefox 43 e Chrome 50.

Probabilmente il tuo sito è già nell'elenco in cui viene richiesto al browser di non richiedere il salvataggio di una password. In firefox, Opzioni -> Sicurezza -> Memorizza password per siti [casella di controllo] - eccezioni [pulsante]

aggiungi un po 'più di informazioni alla risposta di @Michal Roharik.

se la tua chiamata ajax restituirà un url di ritorno, dovresti usare jquery per cambiare l'attributo dell'azione del modulo in quell'URL prima di chiamare form.submit

ex.

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

Ho avuto un problema simile, il login è stato fatto con Ajax, ma i browser (Firefox, Chrome, Safari e IE 7-10) non si sarebbero offerti di salvare la password se il modulo (#loginForm) fosse inviato con Ajax.

Come soluzione ho aggiunto l'input di invio nascosto (#loginFormHiddenSubmit) al modulo che è stato inviato da Ajax e dopo che una chiamata Ajax avrebbe restituito il successo, avrei attivato un clic per l'input di invio nascosto. La pagina deve essere aggiornata in qualsiasi modo. Il clic può essere attivato con:

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

Il motivo per cui ho aggiunto il pulsante di invio nascosto è perché:

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

non offrirebbe di salvare la password in IE (anche se ha funzionato in altri browser).

Non tutti i browser (ad es. IE 6) hanno opzioni per ricordare le credenziali.

Una cosa che puoi fare è (una volta che l'utente ha effettuato correttamente l'accesso) memorizzare le informazioni dell'utente tramite cookie e avere un'opzione "Ricordami su questa macchina". In questo modo, quando l'utente ritorna (anche se si è disconnesso), l'applicazione Web può recuperare i cookie e ottenere le informazioni dell'utente (ID utente + ID sessione) e consentirgli di continuare a lavorare.

Spero che questo possa essere suggestivo. :-)

La verità è che non puoi forzare il browser a chiedere. Sono sicuro che il browser ha il suo algoritmo per indovinare se hai inserito un nome utente / password, come cercare un input type="password"ma non puoi impostare nulla per forzare il browser.

Come altri potrebbero suggerire, è possibile aggiungere informazioni sugli utenti in un cookie. Se lo fai, è meglio crittografarlo almeno e non memorizzare la loro password. Forse memorizzare il loro nome utente al massimo.

È possibile allegare la finestra di dialogo al modulo, quindi tutti quegli input sono in un modulo. L'altra cosa è rendere il campo di testo della password subito dopo il campo di testo del nome utente.

Questo funziona molto meglio per me, perché è al 100% ajaxed e il browser rileva l'accesso.

<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'uso di un cookie sarebbe probabilmente il modo migliore per farlo.

Potresti avere una casella di controllo per "Ricordami?" e fai in modo che il modulo crei un cookie per memorizzare // informazioni di accesso // dell'utente. EDIT: informazioni sulla sessione utente

Per creare un cookie, dovrai elaborare il modulo di accesso con PHP.