it-swarm.com.de

Wie kann ich den Browser auffordern, das Passwort zu speichern?

Hey, ich arbeite an einer Web-App mit einem Anmeldedialog, der folgendermaßen funktioniert:

  1. Benutzer klickt auf "Login"
  2. Anmeldeformular HTML wird mit AJAX geladen und in DIV auf Seite angezeigt
  3. Benutzer gibt Benutzer/Passwort in Felder ein und klickt auf Senden. Es ist kein <form> - Benutzer/Pass werden über AJAX übermittelt
  4. Wenn Benutzer/Pass in Ordnung sind, wird die Seite mit angemeldetem Benutzer neu geladen.
  5. Wenn Benutzer/Pass schlecht sind, wird die Seite NICHT neu geladen, aber in DIV wird eine Fehlermeldung angezeigt, und der Benutzer kann es erneut versuchen.

Hier ist das Problem: Der Browser bietet niemals die übliche Aufforderung "Dieses Passwort speichern? Ja/Nie/Nicht jetzt" für andere Websites an.

Ich habe versucht, das <div> im <form>-Tags mit "autocomplete = 'on'", aber das machte keinen Unterschied.

Ist es möglich, den Browser zu veranlassen, das Speichern des Kennworts anzubieten, ohne meinen Anmeldefluss grundlegend zu überarbeiten?

danke Eric

p.s. Ich arbeite definitiv mit Browsern, die Passwörter speichern, und ich habe noch nie auf "Nie für diese Site" geklickt. Dies ist ein technisches Problem, da der Browser nicht erkennt, dass es sich um ein Anmeldeformular handelt, nicht um einen Operator Error :-)

129
Eric

Ich habe eine vollständige Lösung für diese Frage gefunden. (Ich habe dies in Chrome 27 und Firefox 21 getestet.).

Es gibt zwei Dinge zu wissen:

  1. Triggern Sie 'Passwort speichern' und
  2. Stellen Sie den gespeicherten Benutzernamen/das gespeicherte Passwort wieder her

1. Trigger 'Passwort speichern':

Bei Firefox 21 wird "Passwort speichern" ausgelöst, wenn festgestellt wird, dass ein Formular mit einem Eingabetextfeld vorhanden ist und ein Eingabekennwortfeld gesendet wird. Also müssen wir nur verwenden

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

someFunctionForLogin() führt die Ajax-Anmeldung durch und lädt/leitet zur angemeldeten Seite um, während event.preventDefault() die ursprüngliche Umleitung blockiert, da das Formular gesendet wird.

Wenn Sie sich nur mit Firefox befassen, reicht die oben beschriebene Lösung aus, funktioniert jedoch in Chrome 27 nicht. Anschließend werden Sie gefragt, wie in Chrome 27 die Option "Passwort speichern" ausgelöst werden soll.

Bei Chrome 27 wird 'Passwort speichern' ausgelöst nach wird es zur Seite umgeleitet, indem das Formular gesendet wird, das Eingaben enthält Textfeld mit Attributname = 'Benutzername' und Passwortfeld mit Attributname = 'Passwort'. Aus diesem Grund können wir die Umleitung nicht blockieren, da das Formular gesendet wurde, aber wir können die Umleitung vornehmen, nachdem wir uns bei Ajax angemeldet haben. (Wenn Sie möchten, dass das Ajax-Login die Seite nicht neu lädt oder nicht auf eine Seite umleitet, funktioniert meine Lösung leider nicht.) Dann können wir verwenden

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

Ein Button mit type = 'button' bewirkt, dass das Formular nicht gesendet wird, wenn der Button angeklickt wird. Binden Sie dann eine Funktion an die Schaltfläche für die Ajax-Anmeldung. Schließlich wird durch Aufrufen von $('#loginForm').submit(); zur angemeldeten Seite umgeleitet. Wenn es sich bei der angemeldeten Seite um die aktuelle Seite handelt, können Sie 'signedIn.xxx' durch die aktuelle Seite ersetzen, um die Aktualisierung durchzuführen.

Jetzt werden Sie feststellen, dass die Methode für Chrome 27 auch in Firefox 21 funktioniert. Daher ist es besser, sie zu verwenden.

2. Stellen Sie den gespeicherten Benutzernamen/das gespeicherte Passwort wieder her:

Wenn Sie die loginForm bereits als HTML-Code gespeichert haben, können Sie das gespeicherte Kennwort problemlos in der loginForm wiederherstellen.
Der gespeicherte Benutzername/das gespeicherte Kennwort wird jedoch nicht an das Anmeldeformular gebunden, wenn Sie js/jquery verwenden, um das Anmeldeformular dynamisch zu erstellen, da der gespeicherte Benutzername/das gespeicherte Kennwort nur beim Laden des Dokuments gebunden wird.
Daher mussten Sie das Anmeldeformular als HTML fest codieren und js/jquery verwenden, um das Anmeldeformular dynamisch zu verschieben/anzuzeigen/auszublenden.


Bemerkung: Wenn Sie sich bei Ajax anmelden, fügen Sie nicht autocomplete='off' In Tag-Form wie

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

autocomplete='off' Bewirkt, dass die Wiederherstellung des Benutzernamens/Passworts in der Login-Form fehlschlägt, da Sie nicht zulassen, dass der Benutzername/Passwort automatisch vervollständigt wird.

64
Timespace7

Mit einem Button einloggen:

Wenn Sie einen type="button" Mit einem onclick -Handler verwenden, um sich mit ajax anzumelden, bietet der Browser keine Möglichkeit, um das Passwort zu speichern.

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

Da für dieses Formular kein Senden-Button vorhanden ist und kein Aktionsfeld vorhanden ist, bietet der Browser nicht an, das zu speichern Passwort.


Mit einem submit Button einloggen:

Wenn Sie jedoch die Schaltfläche auf type="submit" Ändern und die Übermittlung abwickeln, bietet der Browser an, um das Kennwort zu speichern.

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

Mit dieser Methode sollte der Browser das Speichern des Passworts anbieten.


Hier ist das in beiden Methoden verwendete Javascript:

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
}
40
spetson

Ich hatte selbst damit zu kämpfen und konnte endlich das Problem aufspüren und herausfinden, warum es fehlgeschlagen ist.

Dies alles ergab sich aus der Tatsache, dass mein Anmeldeformular dynamisch in die Seite eingefügt wurde (mithilfe von backbone.js). Sobald ich mein Anmeldeformular direkt in meine index.html-Datei eingebettet habe, hat alles wie ein Zauber funktioniert.

Ich denke, das liegt daran, dass der Browser wissen muss, dass es ein vorhandenes Anmeldeformular gibt, aber da meines dynamisch in die Seite eingefügt wurde, wusste er nicht, dass es jemals ein "echtes" Anmeldeformular gab.

15
TK421

Diese Lösung hat bei mir funktioniert, die Eric in den Codingforen gepostet hat


Der Grund dafür, dass keine Eingabeaufforderung angezeigt wird, ist, dass der Browser die Seite für die Aktualisierung auf dem Server physisch benötigt. Ein kleiner Trick, den Sie machen können, besteht darin, mit dem Formular zwei Aktionen auszuführen. Die erste Aktion ist, wenn Sie Ihren Ajax-Code aufrufen. Lassen Sie das Formular auch auf einen versteckten Iframe abzielen.

Code:

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

Überprüfen Sie, ob dadurch die Eingabeaufforderung angezeigt wird.

Eric


Gepostet am http://www.codingforums.com/showthread.php?t=123007

12
Vincent

Es gibt eine ltimative Lösung, mit der alle Browser (getestet: chrome 25, safari 5.1, IE10, Firefox 16)) aufgefordert werden, das Passwort mit jQuery) zu speichern und Ajax Anfrage:

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>

Der Trick besteht darin, das Formular anzuhalten, um seinen eigenen Weg zu senden (event.stopPropagation ()), stattdessen Ihren eigenen Code zu senden ($ .ajax ()) und das Formular beim erfolgreichen Rückruf des Ajax erneut zu senden, damit der Browser es abfängt und anzeigt Bitte um Passwortspeicherung. Sie können auch einen Fehlerbehandler usw. hinzufügen.

Hoffe es hat jemandem geholfen.

11
Michal Roharik

Ich habe versucht Spetsons Antwort , aber das hat bei mir nicht funktioniert Chrome 18. Es hat funktioniert, dem Iframe einen Load-Handler hinzuzufügen und die Übermittlung nicht zu unterbrechen ( 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();

Der 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 () ruft AJAX auf und zeigt die loginForm div an, wenn dies fehlschlägt. (Der Webdienst gibt 403 zurück, wenn der Benutzer nicht authentifiziert ist.).

Getestet, um auch in FF und IE8 zu funktionieren.

7
w00t

Der Browser kann möglicherweise nicht erkennen, dass es sich bei Ihrem Formular um ein Anmeldeformular handelt. Gemäß einer Diskussion in diese vorherige Frage sucht ein Browser nach Formularfeldern, die wie <input type="password"> Aussehen. Ist Ihr Passwortformularfeld ähnlich implementiert?

Bearbeiten: Um Ihre folgenden Fragen zu beantworten, erkennt Firefox Passwörter nach form.elements[n].type == "password" (Durchlaufen aller Formularelemente) und erkennt dann den Benutzernamen Feld, indem Sie die Formularelemente für das Textfeld unmittelbar vor dem Kennwortfeld rückwärts durchsuchen (weitere Informationen hier ). Soweit ich weiß, muss Ihr Anmeldeformular Teil eines <form> Sein, sonst wird es von Firefox nicht erkannt.

4
bta

Ich habe viel Zeit damit verbracht, die verschiedenen Antworten auf diesen Thread zu lesen, und für mich war es tatsächlich etwas anderes (verwandt, aber anders). Wenn bei Mobile Safari (iOS-Geräte) das Anmeldeformular beim Laden der Seite AUSGEBLENDET ist, wird die Eingabeaufforderung nicht angezeigt (nachdem Sie das Formular angezeigt haben, senden Sie es ab). Sie können mit dem folgenden Code testen, der das Formular 5 Sekunden nach dem Laden der Seite anzeigt. Entfernen Sie das JS und die Anzeige: keine und es funktioniert. Ich bin noch nicht in der Lage, eine Lösung für dieses Problem zu finden. Nur für den Fall, dass jemand das gleiche Problem hat und die Ursache nicht herausfinden kann.

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

Ich fand eine ziemlich elegante Lösung (oder Hack, was auch immer passt) für Prototype.JS-Benutzer, die als eine der letzten Hemmungen Prototype verwendeten. Ein einfaches Ersetzen der entsprechenden jQuery-Methoden sollte ausreichen.

Stellen Sie zunächst sicher, dass es ein <form> - Tag und eine Senden-Schaltfläche mit einem Klassennamen gibt, auf den später verwiesen werden kann (in diesem Fall faux-submit), Die in einem Element mit einem auf display:none, Wie unten dargestellt:

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

Erstellen Sie dann einen Klickbeobachter für das button, der das Formular wie abgebildet "absendet":

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

Erstellen Sie dann einen Listener für das Ereignis submit und stoppen Sie es. event.stop() stoppt alle Sendeereignisse im DOM, sofern sie nicht in Event.findElement mit der Klasse der versteckten Eingabeschaltfläche eingeschlossen sind (wie oben, faux-submit):

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

Dies wurde getestet als funktionierend in Firefox 43 und Chrome 50.

1
mwieczorek

Der folgende Code wird am getestet

  • Chrome 39.0.2171.99m: ARBEITEN
  • Android Chrome 39.0.2171.93: WORKING
  • Android-Aktienbrowser (Android 4.4): FUNKTIONIERT NICHT
  • Internet Explorer 5+ (emuliert): ARBEITEN
  • Internet Explorer 11.0.9600.17498/Update-Version: 11.0.15: ARBEITEN
  • Firefox 35.0: ARBEITEN

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

Postleitzahl:

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

Bemerkungen

  • Für dynamische Login-Formulare rufen Sie window.external.AutoCompleteSaveForm wird benötigt
  • Internet Explorer benötigt ein "Passwort" -Feld , um den Store-Passwort-Dialog anzuzeigen
  • Internet Explorer scheint einen Klick auf den Submit-Button zu erfordern (auch wenn es sich um einen gefälschten Klick handelt)

Hier ist ein Beispiel für einen Ajax Login-Code:

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

Bemerkungen

  • "account/login" setzt bei Erfolg ein Cookie
  • Seitenumleitung ("manuell" initiiert durch js-Code) scheint erforderlich zu sein. Ich habe auch einen Iframe-Beitrag getestet, aber damit war ich nicht erfolgreich.
1

Ich hatte ein ähnliches Problem, die Anmeldung wurde mit Ajax durchgeführt, aber Browser (Firefox, Chrome, Safari und IE= 7-10) bieten nicht an, das Passwort zu speichern, wenn das Formular (#loginForm) mit Ajax gesendet wird .

Als LÖSUNG habe ich versteckte Submit-Eingaben (#loginFormHiddenSubmit) zu Formularen hinzugefügt, die von Ajax gesendet wurden, und nachdem Ajax-Aufrufe erfolgreich waren, würde ich einen Klick auf auslösen versteckte Submit-Eingabe. Die Seite musste irgendwie aktualisiert werden. Der Klick kann ausgelöst werden mit:

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

Der Grund, warum ich die Schaltfläche "Senden" ausgeblendet habe, ist folgender:

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

würde nicht anbieten, Passwort in IE (obwohl es in anderen Browsern funktioniert hat) zu speichern.

0
Igor

Ihre Site befindet sich wahrscheinlich bereits in der Liste, in der der Browser angewiesen wird, nicht zum Speichern eines Kennworts aufzufordern. In Firefox, Optionen -> Sicherheit -> Passwort für Sites speichern [Kontrollkästchen] - Ausnahmen [Schaltfläche]

0
Dave.Sol

füge @Michal Rohariks Antwort ein bisschen mehr Informationen hinzu.

wenn Ihr Ajax-Aufruf eine Rückgabe-URL zurückgibt, sollten Sie jquery verwenden, um das Attribut form action in diese URL zu ändern, bevor Sie form.submit aufrufen

ex.

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