Pole pro zadání hesla je běžné textové pole, zadaný text se v závislosti na prohlížeči zobrazuje jako hvězdičky nebo tečky. Tato funkce je navržena tak, aby nikdo nemohl nahlédnout zadané heslo. Přestože se zadaný text nezobrazuje na obrazovce, zadané informace se na server přenášejí jako prostý text bez šifrování. Proto použití tohoto pole neposkytuje zabezpečení dat a může být zachyceno.

Syntaxe pro vytváření je následující.

Atributy jsou stejné jako atributy textového pole a jsou uvedeny v tabulce. 1.

Pole pro heslo se na stránkách široce používá k autorizaci uživatelů a rozlišování přístupu k částem stránek, kde potřebujete potvrdit své oprávnění. Příklad 1 ukazuje, jak taková pole vytvořit.

Příklad 1. Pole hesla

Přihlásit se:

Heslo:

Ve výsledku dostaneme následující (obr. 1).

Rýže. 1. Pohled na pole hesla

Na pole hesla se použijí vlastnosti stylu, které určují parametry barvy, pozadí, rámečku atd. Příklad 2 ukazuje přidání obrázků pozadí do polí formuláře. Vezměme si za základ styl jako u textových polí.

Příklad 2. Přidání obrázku do textového pole

Výsledek tohoto příkladu je znázorněn na Obr. 2. Obrázky jsou přidány jako pozadí, takže text musí být posunut doprava přes padding-left, jinak se zobrazí přes obrázek.

V tomto článku se to dozvíte jak vytvořit registrační a autorizační formulář pomocí HTML, JavaScriptu, PHP a MySql. Takové formuláře se používají téměř na každém webu bez ohledu na jeho typ. Jsou vytvořeny jak pro fórum, tak pro internetový obchod a pro sociální sítě (jako je například Facebook, Twiter, Odnoklassniki) a pro mnoho dalších typů stránek.

Pokud máte web na místním počítači, doufám, že ho již máte. Bez toho nebude nic fungovat.

Vytvoření tabulky v databázi

Abychom mohli implementovat registraci uživatelů, potřebujeme v první řadě Databázi. Pokud už to máte, tak skvělé, jinak si to musíte vytvořit. V tomto článku podrobně vysvětluji, jak na to.

A tak máme Databáze (zkráceně databáze), nyní musíme vytvořit tabulku uživatelů do kterého přidáme naše registrované uživatele.

V článku jsem také vysvětlil, jak vytvořit tabulku v databázi. Před vytvořením tabulky si musíme definovat, jaká pole bude obsahovat. Tato pole budou odpovídat polím z registračního formuláře.

Přemýšleli jsme, představili jsme si, jaká pole bude mít náš formulář, a vytvořili jsme tabulku uživatelů s poli jako je toto:

• id- Identifikátor. Pole id každá tabulka z databáze by měla mít.
• jméno- Chcete-li uložit jméno.
• příjmení- Pro ukládání příjmení.
• e-mailem- Chcete-li uložit poštovní adresu. Jako přihlášení použijeme e-mail, takže toto pole musí být jedinečné, to znamená, že musí mít UNIKÁTNÍ index.
• stav_e-mailu- Pole pro označení, zda je e-mail potvrzený nebo ne. Pokud je mail potvrzen, pak bude mít hodnotu 1, jinak hodnotu 0.
• Heslo- Chcete-li uložit heslo.

Pokud chcete, aby váš registrační formulář měl ještě další pole, můžete je přidat také zde.

Všechno, náš stůl uživatelů připraveno. Pojďme k dalšímu kroku.

Připojení k databázi

Vytvořili jsme databázi, nyní se k ní potřebujeme připojit. Připojíme se pomocí rozšíření PHP MySQLi.

Ve složce našeho webu vytvořte soubor s názvem dbconnect.php a napíšeme do něj následující skript:

Chyba připojení DB... Popis chyby: ".mysqli_connect_error ()."

Tento soubor dbconnect.php budou muset být připojeny, aby vytvořily obslužné nástroje.

Pozor na proměnnou $ address_site, zde jsem uvedl název mého testovacího webu, na kterém budu pracovat. Uveďte název svého webu.

Struktura webu

Nyní se podívejme na strukturu HTML našeho webu.

Přesuneme záhlaví a zápatí webu na samostatné soubory, hlavička.php a patička.php... Uvedeme je na všech stránkách. Konkrétně na hlavní (soubor index.php), na stránku s registračním formulářem (soubor formulář_registr.php) a na stránku s autorizačním formulářem (soubor form_auth.php).

Blokujte pomocí našich odkazů, Registrace a oprávnění, přidejte do záhlaví webu, aby se zobrazily na všech stránkách. Vstoupí jeden odkaz stránka registračního formuláře(soubor formulář_registr.php) a druhý na stránku s autorizační formulář(soubor form_auth.php).

Obsah souboru header.php:

Název našeho webu

V důsledku toho hlavní stránka vypadá takto:

Vaše stránky mohou mít samozřejmě úplně jinou strukturu, ale to pro nás nyní není důležité. Hlavní věc je, že existují odkazy (tlačítka) pro registraci a autorizaci.

Nyní přejdeme k registračnímu formuláři. Jak jste již pochopili, máme to ve složce formulář_registr.php.

Přejděte do Databáze (v phpMyAdmin), otevřete strukturu tabulky uživatelů a uvidíme, jaká pole potřebujeme. To znamená, že potřebujeme pole pro zadání jména a příjmení, pole pro zadání poštovní adresy (Email) a pole pro zadání hesla. A z bezpečnostních důvodů přidáme pole pro zadání captcha.

Na serveru může v důsledku zpracování registračního formuláře docházet k různým chybám, kvůli kterým se uživatel nebude moci registrovat. Proto, aby uživatel pochopil, proč se registrace nezdaří, je nutné zobrazovat zprávy o těchto chybách.

Před zobrazením formuláře přidejte blok pro zobrazení chybových zpráv z relace.

A ještě jedna věc, pokud je uživatel již autorizován a pro zajímavost vstoupí na registrační stránku přímo napsáním do adresního řádku prohlížeče site_address / form_register.php, pak mu v tomto případě místo registračního formuláře zobrazíme titulek s tím, že již byl zaregistrován.

Obecně platí, že kód souboru formulář_registr.php dostali jsme to takto:

Již jste registrováni

V prohlížeči stránka s registračním formulářem vypadá takto:

Používáním povinný atribut, všechna pole jsou povinná.

Věnujte pozornost kódu registračního formuláře, kde zobrazí se captcha:

Cestu k souboru jsme zadali v hodnotě atributu src pro obrázek captcha.php který generuje tento captcha.

Podívejme se na kód souboru captcha.php:

Kód je dobře okomentován, takže se zaměřím pouze na jeden bod.

Uvnitř funkce obrázekTtfText (), je určena cesta k písmu verdana.ttf... Aby tedy captcha fungovala správně, musíme vytvořit složku fonty a vložte tam soubor s písmem verdana.ttf... Můžete jej najít a stáhnout z internetu, nebo si jej převzít z archivu s materiály tohoto článku.

Se strukturou HTML jsme skončili, je čas jít dál.

Kontrola platnosti emailu pomocí jQuery

Jakýkoli formulář potřebuje zkontrolovat platnost zadaných údajů, a to jak na straně klienta (pomocí JavaScriptu, jQuery), tak na straně serveru.

Zvláštní pozornost musíme věnovat poli Email. Je velmi důležité, aby byla zadaná poštovní adresa platná.

Pro tohoto oboru input, nastavíme typ email (type = "email"), to nás trochu varuje před nesprávnými formáty. To však nestačí, protože prostřednictvím inspektoru kódu, který nám prohlížeč poskytuje, můžete hodnotu atributu snadno změnit typ s e-mailem na text a je to, náš šek již nebude platný.

A v tom případě musíme provést spolehlivější kontrolu. K tomu použijeme knihovnu jQuery z JavaScriptu.

Chcete-li připojit knihovnu jQuery, v souboru hlavička.php mezi tagy , před závěrečnou značkou , přidejte tento řádek:

Ihned za tento řádek přidejte kontrolní kód ověření e-mailu. Zde přidáváme kód pro kontrolu délky zadaného hesla. Jeho délka musí být alespoň 6 znaků.

Pomocí tohoto skriptu kontrolujeme platnost zadané emailové adresy. Pokud uživatel zadal nesprávný email, zobrazíme mu o tom chybu a deaktivujeme tlačítko pro odeslání formuláře. Pokud je vše v pořádku, pak chybu odstraníme a aktivujeme tlačítko pro odeslání formuláře.

A tak jsme hotovi s validací formuláře na straně klienta. Nyní jej můžeme odeslat na server, kde také provedeme pár kontrol a přidáme data do databáze.

Registrace uživatele

Formulář odesíláme ke zpracování do souboru register.php, prostřednictvím metody POST. název tohoto souboru handler zadaný v hodnotě atributu akce... A způsob odeslání je uveden v hodnotě atributu metoda.

Otevřete tento soubor register.php a první věc, kterou musíme udělat, je napsat funkci pro zahájení relace a připojit soubor, který jsme vytvořili dříve dbconnect.php(V tomto souboru jsme provedli připojení k databázi). A přesto okamžitě vyhlásíme buňky chybové_zprávy a úspěšné_zprávy v globálním poli relace. PROTI error_mesages zaznamenáme všechna chybová hlášení, která se vyskytnou při zpracování formuláře, a v úspěšné_zprávy, budeme zaznamenávat radostné zprávy.

Než budeme pokračovat, musíme zkontrolovat byl vůbec předložený formulář... Útočník by se mohl podívat na hodnotu atributu akce z formuláře a zjistěte, který soubor tento formulář zpracovává. A může přijít s nápadem přejít přímo na tento soubor zadáním následující adresy do adresního řádku prohlížeče: http: //arees_site/register.php

Proto musíme zkontrolovat přítomnost buňky v globálním poli POST, jejíž název se shoduje s názvem našeho tlačítka "Registrovat" z formuláře. Zkontrolujeme tedy, zda bylo kliknuto na tlačítko „Registrovat“ či nikoli.

Pokud se útočník pokusí přejít přímo k tomuto souboru, zobrazí se mu chybová zpráva. Dovolte mi připomenout, že proměnná $ address_site obsahuje název webu a byl deklarován v souboru dbconnect.php.

Chyba! domovská stránka.

Hodnota captcha v relaci byla přidána, když byla vygenerována, do souboru captcha.php... Pro připomenutí vám znovu ukážu tento kus kódu ze souboru. captcha.php, kde je k relaci přidána hodnota captcha:

Nyní přistoupíme k samotnému ověření. V souboru register.php, uvnitř bloku if, kde zkontrolujeme, zda bylo kliknuto na tlačítko "Registrovat", nebo spíše, kde je uveden komentář " // (1) Místo pro další část kódu"píšeme:

// Kontrola výsledného captcha // Oříznutí mezer od začátku a konce řádku $ captcha = trim ($ _ POST ["captcha"]); if (isset ($ _ POST ["captcha"]) &&! prázdné ($ captcha)) (// Porovnejte přijatou hodnotu s hodnotou z relace. if (($ _ SESSION ["rand"]! = $ captcha ) && ($ _SESSION ["rand"]! = "")) (// Pokud není captcha správné, vrátíme uživatele na registrační stránku, kde se zobrazí chybová zpráva, že zadal nesprávný captcha $ error_message = "

Chyba! Zadali jste nesprávný obrázek captcha

Chyba! Neexistuje žádný ověřovací kód, tedy kód captcha. Můžete přejít na domovskou stránku.

Dále musíme zpracovat přijatá data z pole POST. Nejprve musíme zkontrolovat obsah globálního pole POST, tedy zda existují buňky, jejichž názvy odpovídají názvům vstupních polí z našeho formuláře.

Pokud buňka existuje, ořízneme mezery od začátku a od konce řádku z této buňky, jinak uživatele přesměrujeme zpět na stránku s registračním formulářem.

Poté, co jsme ořízli mezery, přidejte do proměnné řádek a zkontrolujte, zda je tato proměnná prázdná, pokud není prázdná, pokračujte, jinak uživatele přesměrujeme zpět na stránku s registračním formulářem.

Vložte tento kód na zadané místo " // (2) Místo pro další část kódu".

/ * Zkontrolujte, zda globální pole $ _POST obsahuje data odeslaná z formuláře, a uzavřete odeslaná data do běžných proměnných. * / If (isset ($ _ POST ["first_name"])) (// Ořízněte mezery od začátku a od konce řetězce $ first_name = trim ($ _ POST ["first_name"]); // Zkontrolujte, zda je proměnná prázdná, pokud (! empty ($ first_name)) (// Pro jistotu převeďte speciální znaky na HTML entity $ first_name = htmlspecialchars ($ first_name, ENT_QUOTES) ;) else (// Uložte chybovou zprávu do relace. $ _SESSION ["error_messages"]. = "

Zadejte své jméno

Chybí pole pro jméno

Zadejte své příjmení

Chybí pole příjmení

Vložte svůj e-mail

Zadejte heslo

Zvláštní význam má pole e-mailem... Musíme zkontrolovat formát přijaté poštovní adresy a její jedinečnost v databázi. To znamená, je již nějaký uživatel zaregistrován se stejnou poštovní adresou?

Na zadaném místě" // (3) Místo kódu pro kontrolu formátu poštovní adresy a její jedinečnosti"přidejte následující kód:

// Zkontrolujte formát přijaté emailové adresy pomocí regulárního výrazu $ reg_email = "/^**@(+(*+)*\.)++/i"; // Pokud formát přijaté e-mailové adresy neodpovídá regulárnímu výrazu if (! Preg_match ($ reg_email, $ email)) (// Uložte chybovou zprávu do relace. $ _SESSION ["error_messages"]. = "

Zadali jste neplatný email

Uživatel s touto e-mailovou adresou je již zaregistrován

Chyba v dotazu na databázi

A tak máme všechny kontroly za sebou, je čas přidat uživatele do databáze. Na zadaném místě" // (4) Místo pro kód pro přidání uživatele do databáze"přidejte následující kód:

// Požadavek na přidání uživatele do databáze $ result_query_insert = $ mysqli-> dotaz („INSERT INTO` users` (first_name, last_name, email, password) VALUES ("". $ First_name. "", "". $ Last_name . " "," ". $ email." "," ". $ heslo." ")"); if (! $ result_query_insert) (// Uložte chybovou zprávu do relace. $ _SESSION ["error_messages"]. = "

Nepodařilo se přidat uživatele do databázového požadavku

Registrace úspěšně dokončena!!!
Nyní se můžete přihlásit pomocí svého uživatelského jména a hesla.

Pokud dojde k chybě v požadavku na přidání uživatele do databáze, přidáme do relace zprávu o této chybě a vrátíme uživatele na registrační stránku.

V opačném případě, pokud vše proběhlo v pořádku, přidáme k relaci také zprávu, ale již příjemnější, konkrétně řekneme uživateli, že registrace byla úspěšná. A přesměrujeme ho na stránku s autorizačním formulářem.

Skript pro kontrolu formátu emailové adresy a délky hesla je v souboru hlavička.php, takže bude působit i na pole z tohoto formuláře.

Relace je také spuštěna v souboru hlavička.php, tedy v souboru form_auth.php relaci nemusíte spouštět, protože se zobrazí chyba.

Jak jsem řekl, funguje zde i skript pro kontrolu formátu emailové adresy a délky hesla. Pokud tedy uživatel zadá nesprávnou e-mailovou adresu nebo krátké heslo, okamžitě se mu zobrazí chybová zpráva. A tlačítko vejít do se stane neaktivní.

Po odstranění chyb tlačítko vejít do se stane aktivní a uživatel bude moci odeslat formulář na server, kde bude zpracován.

Autorizace uživatele

Přiřadit hodnotu akce autorizační handicap má soubor auth.php, to znamená, že formulář bude zpracován v tomto souboru.

A tak otevřete soubor auth.php a napište kód pro zpracování autorizačního formuláře. První věc, kterou musíte udělat, je zahájit relaci a připojit soubor dbconnect.php pro připojení k databázi.

// Deklarujte buňku a přidejte chyby, které se mohou vyskytnout při zpracování formuláře. $ _SESSION ["error_messages"] = ""; // Deklarujte buňku pro přidání úspěšných zpráv $ _SESSION ["success_messages"] = "";

/ * Zkontrolujte, zda byl formulář odeslán, tedy zda bylo kliknuto na tlačítko Přihlásit. Pokud ano, pokračujte, pokud ne, zobrazte uživateli chybovou zprávu, že přešel přímo na tuto stránku. * / if (isset ($ _ POST ["btn_submit_auth"]) &&! prázdné ($ _ POST ["btn_submit_auth"])) (// (1) Místo pro další část kódu) else (ukončit ("

Chyba! Na tuto stránku jste vstoupili přímo, takže zde nejsou žádná data ke zpracování. Můžete přejít na domovskou stránku.

// Zkontrolujte výsledný captcha if (isset ($ _ POST ["captcha"])) (// Ořízněte mezery od začátku a konce řádku $ captcha = trim ($ _ POST ["captcha"]); pokud (! Empty ($ captcha )) (// Porovnejte přijatou hodnotu s hodnotou z relace. If (($ _ SESSION ["rand"]! = $ Captcha) && ($ _SESSION ["rand"]! = " ")) (// Pokud není captcha správné, vrátíme uživatele na autorizační stránku a tam zobrazíme chybovou zprávu, že zadal nesprávný captcha. $ error_message = "

Chyba! Zadali jste nesprávný obrázek captcha

Chyba! Pole pro zadání captcha nesmí být prázdné.

Chyba! Chybí ověřovací kód, tedy captcha kód. Můžete přejít na domovskou stránku.

Pokud uživatel zadal ověřovací kód správně, pokračujte, jinak jej vrátíme na autorizační stránku.

Kontrola poštovní adresy

// Ořízněte mezery od začátku a konce řádku $ email = trim ($ _ POST ["e-mail"]); if (isset ($ _ POST ["e-mail"])) (if (! prázdný ($ email)) ($ email = htmlspecialchars ($ email, ENT_QUOTES); // Zkontrolujte formát přijaté e-mailové adresy pomocí regulárního výrazu $ reg_email = " /^**@(+(*+)*\.)++/i "; // Pokud formát přijaté e-mailové adresy neodpovídá regulárnímu výrazu if (! preg_match ($ reg_email, $ email)) (// Uložit do chybové zprávy relace. $ _SESSION ["error_messages"]. = "

Zadali jste nesprávný email

Pole pro zadání poštovní adresy (e-mailu) by nemělo být prázdné.

Chybí pole pro e-mail

Pokud uživatel zadal poštovní adresu ve špatném formátu nebo je hodnota pole poštovní adresy prázdná, vrátíme ji na autorizační stránku, kde o tom zobrazíme zprávu.

Kontrola hesla

Dalším polem ke zpracování je pole pro heslo. Na zadané místo" // (3) Místo pro zpracování hesla", píšeme:

If (isset ($ _ POST ["heslo"])) (// Oříznutí mezer od začátku a konce řetězce $ heslo = oříznutí ($ _ POST ["heslo"]); if (! Prázdné ($ heslo) ) ($ password = htmlspecialchars (heslo $, ENT_QUOTES); // Zašifrovat heslo $ password = md5 ($ heslo. "top_secret");) else (// Uložte chybovou zprávu do relace. $ _SESSION ["error_messages" ]. = "

Zadejte heslo

Není zde žádné pole pro zadání hesla

Zde pomocí funkce md5 () zašifrujeme přijaté heslo, jelikož v databázi máme hesla v zašifrované podobě. Další tajné slovo v šifrování, v našem případě " Přísně tajné"musí být ten, který byl použit při registraci uživatele.

Nyní je potřeba provést dotaz do databáze na vzorku uživatele, jehož poštovní adresa se rovná přijaté poštovní adrese a heslo se rovná přijatému heslu.

// Dotaz v databázi na výběr uživatele. $ result_query_select = $ mysqli-> dotaz ("SELECT * FROM` uživatelů` WHERE email = "". $ email. "" AND heslo = "". $ heslo. "" "); if (! $ result_query_select) (// Uložte chybovou zprávu do relace. $ _SESSION ["error_messages"]. = "

Chyba požadavku na načtení uživatele z databáze

Nesprávné uživatelské jméno a/nebo heslo

Odhlaste se z webu

A to poslední, co děláme, je postup pro opuštění místa... V tuto chvíli se v záhlaví zobrazují odkazy na autorizační stránku a registrační stránku.

V záhlaví webu (soubor hlavička.php), pomocí relace zkontrolujeme, zda je uživatel již přihlášen. Pokud ne, zobrazíme registrační a autorizační odkazy, v opačném případě (pokud je autorizován) pak místo registračních a autorizačních odkazů zobrazíme odkaz Výstup.

Upravený kus kódu ze souboru hlavička.php:

Registrace

Výstup

Když kliknete na výstupní odkaz z webu, dostaneme se k souboru logout.php, kde jednoduše zničíme buňky s poštovní adresou a heslem z relace. Poté vrátíme uživatele zpět na stránku, na které byl odkaz kliknut výstup.

Kód souboru logout.php:

To je vše. Teď už víte jak implementovat a zpracovávat registrační a autorizační formuláře uživatele na vašem webu. Tyto formuláře se nacházejí téměř na každém webu, takže každý programátor by měl vědět, jak je vytvořit.

Také jsme se naučili, jak ověřovat vstupní data, a to jak na straně klienta (v prohlížeči pomocí JavaScriptu, jQuery), tak na straně serveru (pomocí jazyk PHP). Také jsme se učili implementovat postup pro opuštění místa.

Všechny skripty jsou testovány a fungují. Archiv se soubory tohoto malého webu si můžete stáhnout na tomto odkazu.

V budoucnu napíšu článek, kde budu popisovat. A také plánuji napsat článek, kde vysvětlím (bez opětovného načítání stránky). Takže, abyste věděli o vydání nových článků, můžete se přihlásit k odběru mých stránek.

Máte-li jakékoli dotazy, kontaktujte nás, pokud si všimnete nějaké chyby v článku, dejte mi o ní vědět.

Plán lekce (část 5):

1. Vytvořte HTML strukturu pro přihlašovací formulář
2. Přijatá data zpracováváme
3. V záhlaví webu zobrazíme pozdrav uživatele

Líbil se vám článek?