Hey, ich arbeite an einer Web-App mit einem Anmeldedialog, der folgendermaßen funktioniert:
- Benutzer klickt auf "Login"
- Anmeldeformular HTML wird mit AJAX geladen und in DIV auf Seite angezeigt
- Benutzer gibt Benutzer / Pass in Felder ein und klickt auf Senden. Es ist KEIN
<form>
- Benutzer / Pass werden über AJAX übermittelt - Wenn Benutzer / Pass in Ordnung sind, wird die Seite mit dem angemeldeten Benutzer neu geladen.
- 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 :-)
Antworten:
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' 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
someFunctionForLogin()
führt die Ajax-Anmeldung durch und lädt / leitet auf die angemeldete Seite um, währendevent.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
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 hinzuautocomplete='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.quelle
ENTER
Schlüssel zum Senden des Formulars, daprevented default
beim Senden des Formulars durch den Benutzer nichts passiert, was eine schlechte UX ist. Sie könnenkeycode
beim Absenden nach der Eingabetaste suchen, aber Sie werden wieder zum Betteln kommen ...Verwenden einer Schaltfläche zum Anmelden:
Wenn Sie einen
type="button"
mit einemonclick
Handler verwenden, um sich mit anzumelden,ajax
bietet der Browser nicht an, das Kennwort zu speichern.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.Mit dieser Methode sollte der Browser anbieten, das Passwort zu speichern.
Hier ist das Javascript, das in beiden Methoden verwendet wird:
quelle
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.
quelle
Diese Lösung funktionierte für mich, die Eric in den Codierungsforen gepostet hat
Code:
Überprüfen Sie, ob dadurch die Eingabeaufforderung angezeigt wird.
Eric
Gepostet auf http://www.codingforums.com/showthread.php?t=123007
quelle
action
eine Dummy-Seite einstellen .iframe
Problemumgehungen mehr erforderlich. Siehe stackoverflow.com/a/33113374/810109Es 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:
HTML:
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.
quelle
login.php?username=username&password=password
Abruf durchführen, der den gesamten Zweck des Speicherns des Passworts in erster Linie zunichte machtevent listener
zur Form hinzufügen undevent.preventDefault()
plus hinzufügenevent.stopPropagation()
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):
Der HTML:
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.
quelle
/login
in Ihrem Beispiel) Text oder anderen sichtbaren Inhalt zurückgibt.iframe
Problemumgehungen mehr erforderlich. Siehe stackoverflow.com/a/33113374/810109Der 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.quelle
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)Weitere Informationen finden Sie in der Dokumentation von Apple: Aktivieren der automatischen Kennwortausfüllung für ein HTML-Eingabeelement
quelle
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.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:
HTML:
quelle
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
,email
undcurrent-password
Dann haben Sie zwei Möglichkeiten:
Sie können auch die URL der Seite ändern, dies ist jedoch nicht erforderlich, um zum Speichern des Kennworts aufzufordern:
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).
quelle
history.pushState({}, null "Your new page title");
, um die URL ohne Navigation zuDer folgende Code wird am getestet
JS-Fiddle:
http://jsfiddle.net/ocozggqu/
Postleitzahl:
Bemerkungen
window.external.AutoCompleteSaveForm
erforderlichHier ist ein Beispiel für einen Ajax-Anmeldecode:
Bemerkungen
quelle
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 Fallfaux-submit
), der in einem Element mit einem festgelegten Stil verschachtelt istdisplay:none
, wie unten dargestellt:Erstellen Sie dann einen Klickbeobachter für das
button
, der das Formular wie abgebildet "sendet":Erstellen Sie dann einen Listener für das
submit
Ereignis und stoppen Sie es.event.stop()
stoppt alle Übermittlungsereignisse im DOM, es sei denn, es ist inEvent.findElement
die Klasse der verborgenen Eingabeschaltfläche eingeschlossen (wie obenfaux-submit
):Dies funktioniert in Firefox 43 und Chrome 50.
quelle
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]
quelle
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.
quelle
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:
Der Grund, warum ich eine versteckte Schaltfläche zum Senden hinzugefügt habe, ist folgender:
würde nicht anbieten, Passwort im IE zu speichern (obwohl es in anderen Browsern funktioniert hat).
quelle
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. :-)
quelle
useful garbage
, um Benutzerinformationen zu identifizieren. Sogar SO speichert Informationen in Cookies, um Sie zu erkennen.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.
quelle
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.
quelle
Dies funktioniert für mich viel besser, da es zu 100% ajaxiert ist und der Browser das Login erkennt.
quelle
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.
quelle