Všechny současné prohlížeče nabízejí uživatelům možnost uložit si přihlašovací údaje, aby je nemuseli pořád zadávat.

Bohužel programátoři se všemožně snaží prohlížečům ukládání hesel znepříjemnit a znemožnit – samozřejmě ne záměrně, ale tím, že neví, jak prohlížeče ukládání provádí.

Form se Třemi inputy

Základem přihlašování je formulář, který obsahuje prvky pro zadání jména, hesla a tlačítko pro odeslání.

Input pro zadání jména musí být typu text nebo v případě potřeby email. Pole pro heslo pak musí být typu password a nakonec odesílací tlačítko musí mít typ submit. Tohle je základní předpoklad pro to, aby prohlížeč poznal, že jde o přihlašovací formulář.

 
<form method=post action="/login">
    <input name="name" type=text>
    <input name="pass" type=password>
    <input type=submit value="Login">
</form>

Ve formuláři mohou být i další prvky (např. checkbox pro „Zůstat přihlášen“), ale je důležité, aby vždy obsahovat input typu password, textové pole těsně předcházející heslu a tlačítko typu submit (ideálně na konci). Pokud byste do HTML mezi jméno a heslo vložili ještě další input, může prohlížeč svázat heslo s tímto inputem místo požadovaného jména. Ostatní prvky (DIVy, SPANy, LABELy, atd.) se samozřejmě nepočítají a vnitřní struktura formuláře může být libovolná.

Dalším předpokladem pro uložení hesla může být to, aby se formulář odesílal přes POST, protože posílat heslo GETem je špatný nápad.

Některé prohlížeče mohou upozorňovat na to, že odesílání hesla přes nezabezpečené HTTP může být nebezpečné, nicméně by to nemělo bránit jeho uložení (max. bude pak obtížnější ho do formuláře načíst).

Odeslání přes AJAX

Pokud odesíláte přihlášení přes AJAX, nemělo by to ničemu vadit za předpokladu, že máte výše uvedenou strukturu formuláře a ten se odesílá po kliknutí na submit tlačítko nebo po stisku Enter.

Důležité je, abyste AJAX posílali z metody form.onsubmit() a následně z něj vrátili false nebo zavolali Event.preventDefault(), aby současně nedošlo k odeslání formuláře přes POST.

Častá chyba je ta, že javascript sleduje onclick tlačítka a/nebo onkeypress inputů a už v nich vrací false nebo volá Event.preventDefault(). Kvůli tomu pak prohlížeč nepozná, že se formulář skutečně odeslal a nezobrazí výzvu.

Programové odeslání

Heslo se také neuloží, pokud odeslání vyvoláte programově (např. v reakci onblur inputu) a to ani v případě, že použijete nějakou programovou konstrukci typu $('#login').click() nebo form.submit().

Důležité tedy je, aby se submit() formuláře vyvolal v reakci na akci uživatele (tedy klik na tlačítko submit nebo stisk Enter).

Generování javascriptem

Některé prohlížeče mají problém s tím, pokud celý formulář vytvoříte pomocí javaskriptové funkce document.createElement() (nebo ho stáhnete přes AJAX a pak vložíte do stránky, což je prakticky to samé).

Obejít se to dá tím, že do HTML přidáte skrytý formulář, který následně přenesete na požadované místo místo toho, abyste ho dynamicky vytvářeli.

Toto řešení zároveň řeší problém s tím, že jméno a heslo se do inputů automaticky doplní pouze při načítání stránky, takže formuláře vytvořené později nebo stažené přes AJAX nebudou předvyplněné (i když máte heslo správně uložené).

Dvoufázové přihlášení

Pokud chcete, jako některé moderní stránky od Google, Microsoft, Amazon, atd., provést přihlášení dvoufázově, tedy nejprve se vyplní jméno a na další obrazovce heslo, musíte stále zachovat výše uvedenou strukturu formuláře.

I na stránce s heslem tedy pořád musí být textový input se jménem. Buď to můžete udělat tak, že obě stránky budou uvnitř jednoho formuláře a stránkování se bude provádět pomocí CSS a JS, nebo musíte jméno z první stránky překopírovat do druhé.

Problém je s tím, že každý prohlížeč se chová jinak: Firefox a Chrome hledají jméno pouze v inputech typu text nebo email, takže musíte input skrýt přes CSS:

 
<form method=post action="/login">
    <input name="name" type=text
         value="username"
         style="display:none">
    <input name="pass" type=password>
    <input type=submit value="Login">
</form>

Naopak Internet Exploreru a Edge neviditelné inputy ignorují, ale najdou jméno ve skrytém inputu:

 
<form method=post action="/login">
    <input name="name" type=hidden
        value="username">
    <input name="pass" type=password>
    <input type=submit value="Login">
</form>

Pro podporu všech prohlížečů tedy budete potřebovat dva různé inputy se jménem.