Wie kann ich den Browser dazu bringen, zum Speichern des Passworts aufzufordern?

148

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 / Pass 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 dem angemeldeten 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 Eingabeaufforderung "Dieses Passwort speichern? Ja / Nie / Nicht jetzt" an, die er für andere Websites ausführt.

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

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

danke Eric

ps, um meiner Frage hinzuzufügen, ich arbeite definitiv mit Browsern, die Passwörter speichern, und ich habe nie auf "nie für diese Site" geklickt ... dies ist ein technisches Problem, bei dem der Browser nicht erkennt, dass es sich um ein Anmeldeformular handelt, nicht Bedienerfehler :-)

Eric
quelle
Vergessen Sie nicht, dass nicht alle Browser Passwörter speichern können.
Buhake Sindi
1
mabe der Browser angeboten, um deinen Benutzer / Pass zu speichern und du hast auf "Nie wieder fragen!" geklickt. ?
Clyfe
1
Siehe auch
user123444555621

Antworten:

72

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. Lösen Sie 'Passwort speichern' und
  2. Stellen Sie den gespeicherten Benutzernamen / das Passwort wieder her

1. Lösen Sie 'Passwort speichern' aus:

In Firefox 21 wird "Kennwort speichern" ausgelöst, wenn festgestellt wird, dass ein Formular mit einem Eingabetextfeld und einem Eingabekennwortfeld gesendet wurde. 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 auf die angemeldete Seite um, während event.preventDefault()die ursprüngliche Umleitung aufgrund des Absendens des Formulars blockiert wird.

Wenn Sie nur mit Firefox arbeiten, reicht die oben genannte Lösung aus, funktioniert jedoch nicht in Chrome 27. Anschließend werden Sie gefragt, wie Sie in Chrome 27 das Kennwort "Speichern" auslösen können.

Bei Chrome 27 wird "Kennwort speichern" ausgelöst, nachdem es auf die Seite umgeleitet wurde, indem das Formular gesendet wird, das ein Eingabetextfeld mit dem Attributnamen = "Benutzername" und ein Eingabekennwortfeld mit dem Attributnamen = "Kennwort" enthält . Daher können wir die Umleitung aufgrund des Absendens des Formulars nicht blockieren, aber wir können die Umleitung vornehmen, nachdem wir die Ajax-Anmeldung durchgeführt haben. (Wenn Sie möchten, dass der 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>

Mit der Schaltfläche mit dem Typ = 'Schaltfläche' wird das Formular nicht gesendet, wenn auf die Schaltfläche geklickt wird. Binden Sie dann eine Funktion an die Schaltfläche für die Ajax-Anmeldung. Zum Schluss werden $('#loginForm').submit();Weiterleitungen zur angemeldeten Seite aufgerufen. Wenn es sich bei der angemeldeten Seite um die aktuelle Seite handelt, können Sie 'signierteIn.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 Passwort wieder her:

Wenn Sie die loginForm bereits als HTML fest codiert haben, ist es kein Problem, das gespeicherte Kennwort in der loginForm wiederherzustellen.
Der gespeicherte Benutzername / das gespeicherte Kennwort wird jedoch nicht an die Anmeldeform gebunden, wenn Sie js / jquery verwenden, um die Anmeldeform dynamisch zu erstellen, da der gespeicherte Benutzername / das gespeicherte Kennwort nur beim Laden des Dokuments gebunden wird.
Daher mussten Sie die loginForm als HTML fest codieren und js / jquery verwenden, um die loginForm dynamisch zu verschieben / anzuzeigen / auszublenden.


Anmerkung: Wenn Sie das Ajax-Login durchführen, fügen Sie es nicht autocomplete='off'in Tag-Form wie hinzu

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

autocomplete='off' Die Wiederherstellung des Benutzernamens / Passworts in der LoginForm schlägt fehl, da Sie nicht zulassen, dass der Benutzername / das Passwort automatisch vervollständigt wird.

Zeitraum7
quelle
2
In Chrome verhindert 'event.preventDefault ()', dass die Eingabeaufforderung "Passwort speichern" angezeigt wird. Siehe folgenden Fehler: code.google.com/p/chromium/issues/detail?id=282488
mkurz
Für alle anderen, die darüber stolpern
2
Viele Benutzer verwenden den ENTERSchlüssel zum Senden des Formulars, da prevented defaultbeim Senden des Formulars durch den Benutzer nichts passiert, was eine schlechte UX ist. Sie können keycodebeim Absenden nach der Eingabetaste suchen, aber Sie werden wieder zum Betteln kommen ...
David Reinberger
2
Chrome 46 hat sein falsches Verhalten behoben - es sind keine Problemumgehungen mehr erforderlich. Siehe stackoverflow.com/a/33113374/810109
mkurz
1
Funktioniert nicht zuverlässig, einige Browser lösen die Funktion "Erinnern" nicht aus, wenn Sie über Javascript senden.
JustAMartin
44

Verwenden einer Schaltfläche zum Anmelden:

Wenn Sie einen type="button"mit einem onclickHandler verwenden, um sich mit anzumelden, ajaxbietet der Browser nicht an, das Kennwort 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 dieses Formular keine Schaltfläche zum Senden und kein Aktionsfeld enthält, bietet der Browser das Speichern des Kennworts nicht an.


Verwenden einer Senden- Schaltfläche zum Anmelden:

Wenn Sie jedoch die Schaltfläche ändern und die Übermittlung type="submit"bearbeiten, bietet der Browser an, 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 anbieten, das Passwort zu speichern.


Hier ist das Javascript, das in beiden Methoden verwendet wird:

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
quelle
1
@Bigood Weil es funktioniert, während die akzeptierte Antwort nicht funktioniert hat (zumindest für mich). Danke spetson!
Double M
1
Funktioniert auch für mich im IE. Ich könnte dich jetzt küssen!
Renra
1
Arbeitete auch für mich .. :)
Nabeel
1
Dies ist die richtige und auch die eleganteste Lösung für das Problem.
Arash Kazemi
Es funktioniert, weil ich einfach den 2. Code kopiere und ihn über das Inspect-Element in die Anmeldeseite einfüge. Geben Sie den Benutzernamen / das Passwort in das neu hinzugefügte Feld auf dieser Seite ein und drücken Sie auf Anmelden. Dann werde ich aufgefordert, Benutzer / Passwort zu speichern. Dann aktualisiere ich Seite und voila, es fordert mich auf, bereits gespeicherten Benutzer / Pass zu wählen;)
Dewlance
15

Ich habe selbst damit zu kämpfen gehabt 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 einbettete, funktionierte alles wie ein Zauber.

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

TK421
quelle
Ab Chrome Version 46 können Sie jetzt auch Formulare dynamisch einfügen. Diese werden als "echtes" Anmeldeformular erkannt, in dem Anmeldeinformationen gespeichert werden können. Siehe stackoverflow.com/a/33113374/810109
mkurz
12

Diese Lösung funktionierte für mich, die Eric in den Codierungsforen gepostet hat


Der Grund, warum es nicht dazu auffordert, ist, dass der Browser die Seite phyiskal benötigt, um auf den Server zurück zu aktualisieren. Ein kleiner Trick, den Sie ausführen können, besteht darin, zwei Aktionen mit dem Formular auszuführen. Die erste Aktion ist onsubmit. Lassen Sie Ihren Ajax-Code aufrufen. Lassen Sie das Formular auch einen versteckten Iframe als Ziel festlegen.

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 auf http://www.codingforums.com/showthread.php?t=123007

Vincent
quelle
5
Als Hinweis habe ich festgestellt, dass Chrome 11 nicht anbietet, Ihre Anmeldeinformationen zu speichern, wenn das Formular an sich selbst gesendet wird . Sie müssen also actioneine Dummy-Seite einstellen .
user123444555621
Dadurch wird das Kennwort Klartext in der URL als Abrufanforderung gesendet. Wenn die Methode in POST geändert wird, öffnet Firefox (16) den zuvor ausgeblendeten Frame in einer neuen Registerkarte. Gleiches gilt für Chrome auf Android 4 .:-(
stefan.s
Chrome 46 hat sein falsches Verhalten behoben - es sind keine iframeProblemumgehungen mehr erforderlich. Siehe stackoverflow.com/a/33113374/810109
mkurz
10

Es gibt eine ultimative Lösung, um alle Browser (getestet: Chrome 25, Safari 5.1, IE10, Firefox 16) zu zwingen, das Kennwort mithilfe von jQuery- und Ajax- Anforderungen zu speichern :

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 im erfolgreichen Rückruf des Ajax das Formular erneut zu senden, damit der Browser es abfängt und das anzeigt Anfrage zum Speichern des Passworts. Sie können auch einen Fehlerbehandler usw. hinzufügen.

Hoffe es hat jemandem geholfen.

Michal Roharik
quelle
7
Dies wird tatsächlich einen HTTP- login.php?username=username&password=passwordAbruf durchführen, der den gesamten Zweck des Speicherns des Passworts in erster Linie zunichte macht
Adaptabi
Wooooooooooooooooooooooooooooooooooooooooooooooh! Das hat bei mir funktioniert;) vielen Dank!
Hardik Thaker
1
Ja, event listenerzur Form hinzufügen und event.preventDefault()plus hinzufügenevent.stopPropagation()
Densi Tensy
7

Ich habe die Antwort von spetson ausprobiert , aber das hat bei Chrome 18 bei mir nicht funktioniert. Was funktioniert hat, war, 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 () führt einen AJAX-Aufruf durch 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.

w00t
quelle
Ich habe diese Methode in Chrome ausprobiert und sie würde nur funktionieren, wenn die Aktionsseite ( /loginin Ihrem Beispiel) Text oder anderen sichtbaren Inhalt zurückgibt.
Stephen Bunch
1
Chrome 46 hat sein falsches Verhalten behoben - es sind keine iframeProblemumgehungen mehr erforderlich. Siehe stackoverflow.com/a/33113374/810109
mkurz
4

Der Browser kann möglicherweise nicht erkennen, dass es sich bei Ihrem Formular um ein Anmeldeformular handelt. Gemäß einigen Diskussionen in dieser vorherigen Frage sucht ein Browser nach Formularfeldern, die so aussehen <input type="password">. Ist Ihr Passwortformularfeld ähnlich implementiert?

Bearbeiten: Um Ihre Fragen unten zu beantworten, erkennt Firefox meiner Meinung nach Passwörter durch form.elements[n].type == "password"(Durchlaufen aller Formularelemente) und erkennt dann das Benutzernamenfeld, indem es Formularelemente unmittelbar vor dem Passwortfeld rückwärts in Formularelementen nach dem Textfeld durchsucht (weitere Informationen hier ). Nach allem, was ich sagen kann, muss Ihr Anmeldeformular Teil eines sein, <form>oder Firefox erkennt es nicht.

bta
quelle
1
Es ist ähnlich, ja, danke, ich werde dies als offizielle Antwort akzeptieren, da dies ungefähr so ​​nah ist, wie wir es bekommen. Folgendes ist frustrierend: Ich kann anscheinend (nirgendwo im Web) keinen einfachen Blog-Beitrag finden, in dem steht: "Hier sind die Regeln, nach denen Browser erkennen, ob es sich bei dem ausgefüllten Formular um ein Anmeldeformular handelt, damit sie es anbieten können." um das Passwort des Benutzers zu speichern. " Wenn man bedenkt, dass dies ein bisschen schwarze Magie ist (und wenn man bedenkt, dass Mozilla zumindest Open Source ist), würde man meinen, jemand würde nur die Heuristiken veröffentlichen.
Eric
(Und in ähnlicher Weise scheint es für mich keine Möglichkeit zu geben, mein Anmeldeformular "anzudeuten", sodass der Browser weiß, dass es sich um ein Anmeldeformular handelt. Wiederum überrascht, dass dies im Web nicht besser dokumentiert ist. Ich denke, meine Änderungen wird auf die Formularfeldnamen und die gesamte HTML-Struktur sein, und dann hoffe ich [!], dass das Problem behoben ist.)
Eric
Okay, kein Glück. Ich habe eine neue Frage gestellt, die sich aus einem etwas anderen Blickwinkel nähert
Eric
3

Einfacher 2020-Ansatz

Dadurch wird die automatische Vervollständigung automatisch aktiviert und das Kennwort in Browsern gespeichert.

  • autocomplete="on" (bilden)
  • autocomplete="username" (Eingabe, E-Mail / Benutzername)
  • autocomplete="current-password" (Passwort eingeben)
<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Weitere Informationen finden Sie in der Dokumentation von Apple: Aktivieren der automatischen Kennwortausfüllung für ein HTML-Eingabeelement

Danny Wave
quelle
4
Zu Ihrer Information, dies scheint das Senden eines Formulars zu erfordern (XHR kann nicht verwendet werden und preventDefault) und es funktioniert nicht, wenn nur ein einziges Kennwortfeld vorhanden ist (Anwendungen vom Typ Digital Safe). Teilen Sie diese Ergebnisse mit allen anderen, die sie möglicherweise nützlich finden.
Tomáš Hübelbauer
2

Ich habe viel Zeit damit verbracht, die verschiedenen Antworten in diesem Thread zu lesen, und für mich war es tatsächlich etwas anderes (verwandt, aber anders). Wenn auf Mobile Safari (iOS-Geräte) das Anmeldeformular beim Laden der Seite VERSTECKT ist, wird die Eingabeaufforderung nicht angezeigt (nachdem Sie das Formular angezeigt und dann gesendet haben). 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 muss noch eine Lösung dafür finden, nur für den Fall, dass jemand anderes 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>
Captainclam
quelle
2

Keine der Antworten macht bereits deutlich, dass Sie die HTML5-Verlaufs-API verwenden können, um zum Speichern des Kennworts aufzufordern.

Zunächst müssen Sie sicherstellen, dass Sie mindestens ein <form>Element mit einem Kennwort und einem E-Mail- oder Benutzernamenfeld haben. Die meisten Browser behandeln dies automatisch, solange Sie die richtigen Eingabetypen (Passwort, E-Mail oder Benutzername) verwenden. Stellen Sie jedoch zur Sicherheit die Autocomplete-Werte für jedes Eingabeelement richtig ein.

Eine Liste der Autocomplete-Werte finden Sie hier: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Die , die Sie benötigen , sind: username, emailundcurrent-password

Dann haben Sie zwei Möglichkeiten:

  • Wenn Sie nach dem Senden zu einer anderen URL navigieren, werden die meisten Browser aufgefordert, das Kennwort zu speichern.
  • Wenn Sie nicht zu einer anderen URL umleiten oder die Seite neu laden möchten (z. B. eine einzelne Seitenanwendung). Verhindern Sie einfach die Ereignisstandards (mithilfe von e.preventDefault) in Ihrem Submit-Handler des Formulars. Sie können die HTML5-Verlaufs-API verwenden, um etwas in den Verlauf zu verschieben, um anzuzeigen, dass Sie in Ihrer Einzelseitenanwendung "navigiert" haben. Der Browser fordert Sie nun auf, das Passwort und den Benutzernamen zu speichern.
history.pushState({}, "Your new page title");

Sie können auch die URL der Seite ändern, dies ist jedoch nicht erforderlich, um zum Speichern des Kennworts aufzufordern:

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

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

Dies hat den zusätzlichen Vorteil, dass Sie verhindern können, dass der Browser Sie auffordert, das Kennwort zu speichern, wenn der Benutzer das Kennwort falsch eingegeben hat. Beachten Sie, dass der Browser in einigen Browsern immer nach dem Speichern der Anmeldeinformationen fragt, auch wenn Sie .preventDefault aufrufen und die Verlaufs-API nicht verwenden.

Wenn Sie nicht weg navigieren und / oder den Browserverlauf ändern möchten, können Sie stattdessen replaceState verwenden (dies funktioniert auch).

Simon Backx
quelle
Dies ist die Antwort für das Jahr 2020! Ich musste verwenden history.pushState({}, null "Your new page title");, um die URL ohne Navigation zu
ändern
1

Der folgende Code wird am getestet

  • Chrome 39.0.2171.99m: ARBEITEN
  • Android Chrome 39.0.2171.93: ARBEITEN
  • Android Stock-Browser (Android 4.4): NICHT ARBEITEN
  • 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 /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
}

Bemerkungen

  • Für dynamische Anmeldeformulare ist ein Aufruf an window.external.AutoCompleteSaveFormerforderlich
  • Internet Explorer benötigt ein "Passwort" -Feld , um den Store-Passwort-Dialog anzuzeigen
  • Internet Explorer scheint einen Klick auf die Schaltfläche " Senden" zu erfordern (auch wenn es sich um einen falschen Klick handelt).

Hier ist ein Beispiel für einen Ajax-Anmeldecode:

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
  • Eine Seitenumleitung ("manuell" durch js-Code initiiert) scheint erforderlich zu sein. Ich habe auch einen Iframe-Post getestet, aber damit war ich nicht erfolgreich.
David Rettenbacher
quelle
1

Ich habe eine ziemlich elegante Lösung (oder einen Hack, was auch immer passt) für Prototype.JS-Benutzer gefunden, da dies einer der letzten Holdouts ist, die Prototype verwenden. Eine einfache Ersetzung der entsprechenden jQuery-Methoden sollte den Trick tun.

Stellen Sie zunächst sicher, dass ein <form>Tag und eine Senden-Schaltfläche mit einem Klassennamen vorhanden sind, auf den später verwiesen werden kann (in diesem Fall faux-submit), der in einem Element mit einem festgelegten Stil verschachtelt ist 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 "sendet":

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

Erstellen Sie dann einen Listener für das submitEreignis und stoppen Sie es. event.stop()stoppt alle Übermittlungsereignisse im DOM, es sei denn, es ist in Event.findElementdie Klasse der verborgenen Eingabeschaltfläche eingeschlossen (wie oben faux-submit):

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

Dies funktioniert in Firefox 43 und Chrome 50.

mwieczorek
quelle
0

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

Dave.Sol
quelle
0

Fügen Sie der Antwort von @Michal Roharik etwas mehr Informationen hinzu.

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

Ex.

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

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

Als LÖSUNG habe ich dem Formular, das von Ajax gesendet wurde, eine versteckte Übermittlungseingabe (#loginFormHiddenSubmit) hinzugefügt. Nachdem der Ajax-Aufruf den Erfolg zurückgegeben hat, habe ich einen Klick auf die versteckte Übermittlungseingabe ausgelöst. Die Seite muss auf irgendeine Weise aktualisiert werden. Der Klick kann ausgelöst werden mit:

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

Der Grund, warum ich eine versteckte Schaltfläche zum Senden hinzugefügt habe, ist folgender:

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

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

Igor
quelle
-1

Nicht jeder Browser (z. B. IE 6) verfügt über Optionen zum Speichern von Anmeldeinformationen.

Sie können die Benutzerinformationen (sobald sich der Benutzer erfolgreich angemeldet hat) per Cookie speichern und die Option "Auf diesem Computer speichern" aktivieren. Auf diese Weise kann Ihre Webanwendung, wenn der Benutzer erneut kommt (auch wenn er abgemeldet ist), das Cookie abrufen, die Benutzerinformationen (Benutzer-ID + Sitzungs-ID) abrufen und ihm die Arbeit ermöglichen.

Hoffe, das kann suggestiv sein. :-)

Buhake Sindi
quelle
Ich würde keine Benutzerinformationen in einem Cookie speichern, zumindest nichts Sensibles.
Jack Marchetti
Ich wollte nicht das Benutzerpasswort speichern. Natürlich müssten Sie sehr kreativ sein, wie Sie erstellen müssen useful garbage, um Benutzerinformationen zu identifizieren. Sogar SO speichert Informationen in Cookies, um Sie zu erkennen.
Buhake Sindi
fair genug, aber ich würde immer noch so viel wie möglich verschlüsseln.
Jack Marchetti
@JackMarchetti es clientseitig zu verschlüsseln wäre eine schlechte (und irgendwie nutzlose) Idee. Da der zum Verschlüsseln erforderliche Code sichtbar ist, kann jeder die .js-Datei finden und entschlüsseln. Dies bedeutet, dass Sie die Daten nicht in einem Cookie speichern sollten
Universal Electricity
-1

Die Wahrheit ist, Sie können den Browser nicht zwingen zu fragen. Ich bin sicher, der Browser verfügt über einen eigenen Algorithmus zum Erraten, ob Sie einen Benutzernamen / ein Kennwort eingegeben haben, z. B. nach einer Eingabe von suchen, type="password"aber Sie können nichts festlegen, um den Browser zu erzwingen.

Sie können, wie andere vorschlagen, Benutzerinformationen in ein Cookie einfügen. Wenn Sie dies tun, sollten Sie es zumindest besser verschlüsseln und das Kennwort nicht speichern. Vielleicht höchstens ihren Benutzernamen speichern.

Jack Marchetti
quelle
Und Sie schlagen Cookies vor?
Buhake Sindi
Ich sage, zu verschlüsseln, was auch immer Sie in ihnen speichern.
Jack Marchetti
1
Kekse? Das ist eine schlechte Idee, die darauf wartet, passiert zu werden
NightSkyCode
-1

Sie können den Dialog an das Formular anhängen, sodass sich alle diese Eingaben in einem Formular befinden. Die andere Sache ist, das Passwort-Textfeld direkt nach dem Benutzernamen-Textfeld zu erstellen.

Kait
quelle
-1

Dies funktioniert für mich viel besser, da es zu 100% ajaxiert ist und der Browser das Login erkennt.

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

Die Verwendung eines Cookies wäre wahrscheinlich der beste Weg, dies zu tun.

Sie könnten ein Kontrollkästchen für "Erinnerst du dich an mich?" und lassen Sie das Formular ein Cookie erstellen, um die // Anmeldeinformationen des Benutzers zu speichern. BEARBEITEN: Informationen zur Benutzersitzung

Um ein Cookie zu erstellen, müssen Sie das Anmeldeformular mit PHP verarbeiten.

Mandrig
quelle