Hej, pracuję nad aplikacją internetową, która ma okno dialogowe logowania, które działa tak:
- Użytkownik klika „zaloguj”
- Formularz logowania HTML jest ładowany za pomocą AJAX i wyświetlany na stronie w DIV
- Użytkownik wpisuje użytkownika / przepustkę w pola i klika „Prześlij”. To NIE jest
<form>
- użytkownik / przepustka są przesyłane przez AJAX - Jeśli użytkownik / hasło są w porządku, strona ładuje się ponownie, gdy użytkownik jest zalogowany.
- Jeśli użytkownik / hasło są złe, strona NIE ładuje się ponownie, ale w DIV pojawia się komunikat o błędzie i użytkownik może spróbować ponownie.
Oto problem: przeglądarka nigdy nie wyświetla zwykłego monitu „Zapisać to hasło? Tak / Nigdy / Nie teraz”, jak w przypadku innych witryn.
Próbowałem opakować tagi <div>
in <form>
z „autocomplete = 'on'”, ale to nie miało znaczenia.
Czy można sprawić, by przeglądarka zaoferowała przechowywanie hasła bez poważniejszej przeróbki mojego przepływu logowania?
dzięki Eric
ps aby dodać do mojego pytania, zdecydowanie pracuję z przeglądarkami przechowującymi hasła i nigdy nie kliknąłem „nigdy dla tej witryny” ... jest to problem techniczny polegający na tym, że przeglądarka nie wykrywa, że jest to formularz logowania, a nie błąd operatora :-)
Odpowiedzi:
Znalazłem kompletne rozwiązanie tego pytania. (Przetestowałem to w Chrome 27 i Firefox 21).
Należy wiedzieć dwie rzeczy:
1. Uruchom „Zapisz hasło”:
W przypadku przeglądarki Firefox 21 funkcja „Zapisz hasło” jest uruchamiana, gdy wykryje, że istnieje formularz zawierający pole wejściowe i pole hasła. Więc po prostu musimy użyć
someFunctionForLogin()
wykonuje logowanie AJAX i przeładowuje / przekierowuje do zalogowanej strony podczasevent.preventDefault()
blokując oryginalne przekierowanie z powodu przesłania formularza.Jeśli masz do czynienia tylko z Firefoksem, powyższe rozwiązanie jest wystarczające, ale nie działa w Chrome 27. Następnie zapytasz, jak uruchomić opcję „Zapisz hasło” w Chrome 27.
W przeglądarce Chrome 27 „Zapisz hasło” jest uruchamiane po przekierowaniu na stronę przez przesłanie formularza zawierającego pole tekstowe z nazwą atrybutu = „nazwa użytkownika” i pole hasła z nazwą atrybutu = „hasło” . Dlatego nie możemy zablokować przekierowania z powodu przesłania formularza, ale możemy wykonać przekierowanie po zalogowaniu się w AJAX. (Jeśli chcesz, aby login ajax nie przeładowywał strony lub nie przekierowywał do strony, niestety moje rozwiązanie nie działa.) Następnie możemy użyć
Przycisk z type = 'button' spowoduje, że formularz nie zostanie wysłany po kliknięciu przycisku. Następnie przypisujemy funkcję do przycisku logowania Ajax. Wreszcie wywołanie
$('#loginForm').submit();
przekierowuje do strony zalogowanej. Jeśli stroną, na której się zalogowano, jest bieżąca strona, możesz zastąpić „signedIn.xxx” bieżącą stroną, aby „odświeżyć”.Teraz przekonasz się, że metoda dla przeglądarki Chrome 27 działa również w przeglądarce Firefox 21. Dlatego lepiej jej używać.
2. Przywróć zapisaną nazwę użytkownika / hasło:
Jeśli masz już loginForm zakodowany na stałe w formacie HTML, nie będzie problemu z przywróceniem zapisanego hasła w loginForm.
Jednak zapisana nazwa użytkownika / hasło nie zostanie powiązana z loginForm, jeśli użyjesz js / jquery do dynamicznego utworzenia formularza loginForm, ponieważ zapisana nazwa użytkownika / hasło jest wiążąca tylko podczas ładowania dokumentu.
Dlatego trzeba było na stałe zakodować loginForm jako HTML i użyć js / jquery, aby dynamicznie przenosić / pokazywać / ukrywać loginForm.
Uwaga: Jeśli logujesz się do AJAX, nie dodawaj
autocomplete='off'
tagów w postaciautocomplete='off'
spowoduje, że przywrócenie nazwy użytkownika / hasła do formularza loginForm nie powiedzie się, ponieważ nie zezwalasz na to, że „automatycznie uzupełnia” nazwę użytkownika / hasło.źródło
ENTER
klucza do przesłania formularza, ponieważprevented default
kiedy użytkownik przesłał formularz, nic się nie stanie, czyli zły UX. Możesz sprawdzić klucz enterkeycode
podczas przesyłania, jednak wrócisz do żebrania ...Używanie przycisku do logowania:
Jeśli używasz programu
type="button"
z programemonclick
obsługi do logowania sięajax
, przeglądarka nie zaproponuje zapisania hasła.Ponieważ ten formularz nie ma przycisku przesyłania i nie ma pola akcji, przeglądarka nie zaproponuje zapisania hasła.
Korzystanie z przycisku przesyłania do logowania:
Jeśli jednak zmienisz przycisk na
type="submit"
i obsłużysz przesyłanie, przeglądarka zaproponuje zapisanie hasła.Korzystając z tej metody, przeglądarka powinna zaproponować zapisanie hasła.
Oto JavaScript używany w obu metodach:
źródło
Sam się z tym zmagałem i w końcu udało mi się wyśledzić problem i przyczynę jego niepowodzenia.
Wszystko to wynikało z faktu, że mój formularz logowania był dynamicznie wprowadzany do strony (przy użyciu backbone.js). Gdy tylko umieściłem formularz logowania bezpośrednio w pliku index.html, wszystko działało jak urok.
Myślę, że dzieje się tak, ponieważ przeglądarka musi być świadoma, że istnieje formularz logowania, ale ponieważ mój był dynamicznie wprowadzany do strony, nie wiedziała, że kiedykolwiek istniał „prawdziwy” formularz logowania.
źródło
To rozwiązanie zadziałało dla mnie opublikowane przez Erica na forach kodowania
Kod:
Sprawdź, czy to powoduje wyświetlenie monitu.
Eric
Opublikowano http://www.codingforums.com/showthread.php?t=123007
źródło
action
jakąś fikcyjną stronę.iframe
obejścia nie są już potrzebne. Zobacz stackoverflow.com/a/33113374/810109Istnieje ostateczne rozwiązanie, które zmusza wszystkie przeglądarki (przetestowane: chrome 25, safari 5.1, IE10, Firefox 16) do poproszenia o zapisanie hasła przy użyciu jQuery i żądania ajax :
JS:
HTML:
Sztuczka polega na zatrzymaniu formularza w celu przesłania go na swój własny sposób (event.stopPropagation ()), zamiast tego wysłać własny kod ($ .ajax ()) iw wywołaniu zwrotnym Ajaxa wyślij formularz ponownie, aby przeglądarka go przechwyciła i wyświetliła prośba o zapisanie hasła. Możesz także dodać obsługę błędów itp.
Mam nadzieję, że komuś pomogło.
źródło
login.php?username=username&password=password
co eliminuje cały cel zapisywania hasła w pierwszej kolejnościevent listener
do formularza i dodajevent.preventDefault()
plusevent.stopPropagation()
Wypróbowałem odpowiedź spetsona, ale to nie zadziałało w przypadku Chrome 18. Udało mi się dodać moduł obsługi obciążenia do iframe i nie przerywać przesyłania (jQuery 1.7):
HTML:
getSessions () wykonuje wywołanie AJAX i wyświetla div loginForm, jeśli się nie powiedzie. (Usługa internetowa zwróci 403, jeśli użytkownik nie jest uwierzytelniony).
Przetestowano również do pracy w FF i IE8.
źródło
/login
w twoim przykładzie) zwróci jakiś tekst lub inną widoczną zawartość.iframe
obejścia nie są już potrzebne. Zobacz stackoverflow.com/a/33113374/810109Przeglądarka może nie być w stanie wykryć, że Twój formularz jest formularzem logowania. Zgodnie z częścią dyskusji w tym poprzednim pytaniu przeglądarka szuka pól formularzy, które wyglądają jak
<input type="password">
. Czy pole formularza Twojego hasła jest podobne do tego?Edycja: Myślę, że aby odpowiedzieć na poniższe pytania, Firefox wykrywa hasła
form.elements[n].type == "password"
(iterując po wszystkich elementach formularza), a następnie wykrywa pole nazwy użytkownika, przeszukując elementy formularza wstecz w poszukiwaniu pola tekstowego bezpośrednio przed polem hasła (więcej informacji tutaj ). Z tego, co wiem, Twój formularz logowania musi być częścią pliku<form>
lub Firefox go nie wykryje.źródło
Proste podejście na rok 2020
Spowoduje to automatyczne włączenie autouzupełniania i zapisywanie hasła w przeglądarkach.
autocomplete="on"
(Formularz)autocomplete="username"
(dane wejściowe, e-mail / nazwa użytkownika)autocomplete="current-password"
(Wprowadź hasło)Więcej informacji znajdziesz w dokumentacji Apple: Włączanie autouzupełniania hasła w elemencie wejściowym HTML
źródło
preventDefault
) i nie zadziała, jeśli jest tylko jedno pole hasła (aplikacje typu cyfrowego). Udostępnianie tych wyników każdemu, kto może uznać je za przydatne.Spędziłem dużo czasu na czytaniu różnych odpowiedzi w tym wątku i dla mnie było to coś nieco innego (związanego, ale innego). W przeglądarce Mobile Safari (urządzenia z systemem iOS), jeśli formularz logowania jest UKRYTY podczas ładowania strony, monit nie pojawi się (po wyświetleniu formularza i przesłaniu go). Możesz przetestować za pomocą następującego kodu, który wyświetla formularz 5 sekund po załadowaniu strony. Usuń JS i wyświetlacz: brak i działa. Nie znalazłem jeszcze rozwiązania tego problemu, właśnie opublikowałem na wypadek, gdyby ktoś inny miał ten sam problem i nie może ustalić przyczyny.
JS:
HTML:
źródło
Żadna z odpowiedzi nie wyjaśnia już, że możesz użyć interfejsu API historii HTML5, aby poprosić o zapisanie hasła.
Najpierw musisz upewnić się, że masz przynajmniej
<form>
element z hasłem i adresem e-mail lub polem nazwy użytkownika. Większość przeglądarek obsługuje to automatycznie, o ile używasz właściwych typów danych wejściowych (hasło, adres e-mail lub nazwa użytkownika). Ale dla pewności ustaw poprawnie wartości autouzupełniania dla każdego elementu wejściowego.Listę wartości autouzupełniania można znaleźć tutaj: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Te, potrzebne są:
username
,email
orazcurrent-password
Masz wtedy dwie możliwości:
Możesz także zmienić adres URL strony, ale nie jest to wymagane do wyświetlenia monitu o zapisanie hasła:
Dokumentacja: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
Ma to dodatkową zaletę polegającą na tym, że możesz uniemożliwić przeglądarce pytanie o zapisanie hasła, jeśli użytkownik wprowadził je niepoprawnie. Pamiętaj, że w niektórych przeglądarkach przeglądarka zawsze zapyta o zapisanie poświadczeń, nawet jeśli wywołasz .preventDefault i nie użyjesz interfejsu API historii.
Jeśli nie chcesz opuszczać i / lub modyfikować historii przeglądarki, możesz zamiast tego użyć replaceState (to również działa).
źródło
history.pushState({}, null "Your new page title");
aby zmienić adres URL bez nawigacjiPoniższy kod jest testowany na
JS-Fiddle:
http://jsfiddle.net/ocozggqu/
Kod pocztowy:
Uwagi
window.external.AutoCompleteSaveForm
wymagane jest wywołanieOto przykładowy kod logowania AJAX:
Uwagi
źródło
Znalazłem dość eleganckie rozwiązanie (lub hack, cokolwiek pasuje) dla użytkowników Prototype.JS, będąc jednym z ostatnich, którzy używają Prototype. Proste zastąpienie odpowiednich metod jQuery powinno załatwić sprawę.
Najpierw upewnij się, że istnieje
<form>
tag i przycisk przesyłania z nazwą klasy, do której można się później odwołać (w tym przypadkufaux-submit
), który jest zagnieżdżony w elemencie ze stylem ustawionym nadisplay:none
, jak pokazano poniżej:Następnie utwórz obserwatora kliknięć dla
button
, który „prześle” formularz, jak pokazano na ilustracji:Następnie utwórz detektor
submit
zdarzenia i zatrzymaj go.event.stop()
zatrzyma wszystkie wysyłane zdarzenia w DOM, chyba że jest opakowane wEvent.findElement
klasę ukrytego przycisku wejściowego (jak wyżejfaux-submit
):Zostało to przetestowane pod kątem działania w przeglądarkach Firefox 43 i Chrome 50.
źródło
Twoja witryna prawdopodobnie znajduje się już na liście, na której przeglądarka ma nie pytać o zapisywanie hasła. W przeglądarce Firefox, Opcje -> Bezpieczeństwo -> Zapamiętaj hasło dla witryn [pole wyboru] - wyjątki [przycisk]
źródło
dodaj trochę więcej informacji do odpowiedzi @Michal Roharik.
jeśli twoje wywołanie ajax zwróci zwrotny adres URL, powinieneś użyć jquery do zmiany atrybutu akcji formularza na ten adres przed wywołaniem form.submit
dawny.
źródło
Miałem podobny problem, logowanie odbyło się za pomocą Ajax, ale przeglądarki (firefox, chrome, safari i IE 7-10) nie proponowały zapisania hasła, jeśli formularz (#loginForm) został przesłany za pomocą ajax.
Jako ROZWIĄZANIE dodałem ukryte dane wejściowe do przesłania (#loginFormHiddenSubmit) do formularza, który został przesłany przez ajax i po wywołaniu ajax zwróciłoby sukces, wywołałem kliknięcie, aby ukryć wejście przesyłania. Strona wymagała odświeżenia w dowolny sposób. Kliknięcie można wywołać za pomocą:
Powodem, dla którego dodałem ukryty przycisk przesyłania, jest:
nie zaproponowałby zapisania hasła w IE (chociaż działało w innych przeglądarkach).
źródło
Nie każda przeglądarka (np. IE 6) ma opcje zapamiętywania danych logowania.
Jedną z rzeczy, które możesz zrobić, to (po pomyślnym zalogowaniu się użytkownika) przechowywać informacje o użytkowniku za pomocą pliku cookie i mieć opcję „Zapamiętaj mnie na tym komputerze”. W ten sposób, gdy użytkownik przyjdzie ponownie (nawet jeśli jest wylogowany), Twoja aplikacja internetowa może pobrać plik cookie i uzyskać informacje o użytkowniku (identyfikator użytkownika + identyfikator sesji) i umożliwić mu kontynuowanie pracy.
Mam nadzieję, że to może być sugestywne. :-)
źródło
useful garbage
aby zidentyfikować informacje o użytkowniku. Nawet SO przechowuje informacje w plikach cookie, aby Cię rozpoznać.Prawda jest taka, że nie możesz zmusić przeglądarki do pytania. Jestem pewien, że przeglądarka ma swój własny algorytm odgadywania, czy wprowadziłeś nazwę użytkownika / hasło, na przykład szukając danych wejściowych
type="password"
ale nie możesz ustawić niczego, aby wymusić przeglądarkę.Możesz, jak sugerują inni, dodać informacje o użytkowniku w pliku cookie. Jeśli to zrobisz, lepiej przynajmniej zaszyfruj je i nie przechowuj ich hasła. Być może przechowuj co najwyżej ich nazwę użytkownika.
źródło
Możesz dołączyć okno dialogowe do formularza, więc wszystkie te dane wejściowe są w formularzu. Inną rzeczą jest utworzenie pola tekstowego hasła zaraz po polu tekstowym nazwy użytkownika.
źródło
U mnie działa to znacznie lepiej, ponieważ jest w 100% Ajaxowane, a przeglądarka wykrywa logowanie.
źródło
Użycie pliku cookie byłoby prawdopodobnie najlepszym sposobem, aby to zrobić.
Możesz mieć pole wyboru „Pamiętasz mnie?” i niech formularz utworzy plik cookie do przechowywania // danych logowania // użytkownika. EDYCJA: Informacje o sesji użytkownika
Aby utworzyć plik cookie, musisz przetworzyć formularz logowania w PHP.
źródło