Crearea unui formular de contact simplu cu Angularjs și php. Securitatea datelor utilizatorilor De ce a fost instalat acest formular?

Aici puteți folosi datele din formularul de mai sus.

Email.ForgotPass:

[[+ nume complet]],

Pentru a vă activa noua parolă, vă rugăm să accesați următorul link:

Vreau o nouă parolă

Dacă totul a mers bine, vă veți putea conecta la profilul dvs. cu următoarele informații:

Autentificare:[[+ nume de utilizator]]

Parola:[[+ parola]]

Mulțumiri,
Administrarea site-ului Exemplu.Com

Totul este foarte asemănător cu partea din scrisoarea de activare, doar parola este generată aici în fragment.

Atingerea finală rămâne crearea unei resurse la care utilizatorul va merge de la scrisoare pentru a actualiza parola. În această resursă, avem nevoie de un apel:

[[! ResetPassword: empty = `

Acest cod va afișa un mesaj dacă dintr-o dată cineva intră din nou pe această pagină sau doar din întâmplare. Și dacă parola este resetată cu succes, va fi afișat un mesaj de la bucată Auth.ForgotPass.Reset:

Acum avem un sistem complet funcțional de autorizare și înregistrare a utilizatorilor. Modificarea profilului utilizatorilor autorizați va fi lăsată în afara domeniului de aplicare al articolului.

1. Creați o pagină de înregistrare și adăugați-i un fragment de apel Inregistreaza-te.

2. Creați bucăți cu un formular de înregistrare Înregistrare.Formular și scrisoarea de activare E-mail.Activare.

3. Creați o pagină de confirmare a înregistrării și efectuați un apel de fragment pe ea Confirmați înregistrarea.

4. Adăugați un fragment de apel Autentificare unde dorim sa plasam formularul de autentificare si insigna utilizatorului autorizat.

5. Creați o bucată cu un formular de conectare Autentificare , bucată cu informații despre utilizatorul autorizat Auth.Logout , bucată cu mesaj de eroare Auth.Login.Errore .

6. Creați o pagină de recuperare a parolei și efectuați un apel de fragment pe ea Ați uitat parola.

7. Creați o bucată Auth.ForgotPass.Form cu un formular de recuperare a parolei, bucată Auth.ForgotPass.Sent cu un mesaj despre trimiterea cu succes a scrisorii, bucată Email.ForgotPass cu o scrisoare pentru a reseta parola.

8. Creați o resursă cu o resetare finală a parolei și plasați un apel de fragment în ea Reseteaza parola.

9. Creați o bucată Auth.ForgotPass.Reset cu un mesaj despre resetarea cu succes a parolei.

Asta e tot. Mă voi bucura de orice completări și comentarii.

Foolproof este un set de măsuri pentru a preveni introducerea de informații incorecte într-un formular. De exemplu, dacă trebuie să introduceți un număr pozitiv de la 0 la 10 într-un câmp, atunci ar trebui să verificați dacă utilizatorul nu introduce text sau un număr care nu se află în intervalul specificat, de exemplu. numărul nu trebuie să fie mai mic de zero sau mai mare de zece.

De ce sunt introduse informații incorecte? Acest lucru se datorează în principal trei motive.

1. Utilizatorul a greșit din greșeală, de exemplu, a citit cu neatenție ceea ce trebuie să indice.
2. Pe o pagină web, li se cere în mod ambiguu să introducă date, astfel încât utilizatorul trebuie să ghicească și să facă o presupunere despre ceea ce își dorește cu adevărat de la el. În acest caz, opiniile dezvoltatorului și ale utilizatorului nu coincid întotdeauna.
3. Există un număr de oameni care iau instrucțiunile ca pe o provocare și încearcă să facă opusul. Astfel de utilizatori raționează astfel: „Da, mi se cere să introduc un număr. Ce se întâmplă dacă indic literele?” După aceea, ei cer informații în mod evident incorecte și văd la ce va duce.

Trebuie înțeles că formulările precise și corecte, deși reduc probabilitatea erorilor, nu te salvează în niciun caz de ele. Doar mijloacele tehnice din partea serverului vă permit să obțineți rezultatul dorit și să evitați introducerea de informații incorecte. Cu toate acestea, revizuirea sau, așa cum se mai numește, validarea la nivelul clientului vă permite să verificați rapid datele introduse de utilizator pentru corectitudine, fără a trimite formularul la server. Acest lucru economisește timp utilizatorului și reduce sarcina pe server. Din punct de vedere al utilizabilității, există și plusuri - utilizatorul primește imediat un mesaj despre ce informații a indicat incorect și își poate corecta greșeala.

câmp necesar

Unele câmpuri de formular trebuie completate înainte de a le trimite către server. Acest lucru, de exemplu, se aplică formularului de înregistrare, unde vi se cere să introduceți un nume de utilizator și o parolă. Atributul obligatoriu este utilizat pentru a specifica câmpurile obligatorii, așa cum se arată în Exemplul 1.

Exemplul 1. Atributul necesar

HTML5 IE 10+ Cr Op Sa Fx

Câmpurile obligatorii trebuie completate înainte de a trimite formularul, altfel formularul nu va fi trimis la server și browserul va emite un avertisment în acest sens. Tipul de mesaj depinde de browser; de exemplu, Chrome afișează un tooltip, așa cum se arată în Fig. 1.

Orez. 1. Câmpul obligatoriu nu este completat

Corectitudinea datelor

Inițial, există două câmpuri în care datele introduse de utilizator sunt verificate automat. Aceasta este adresa web și adresa de e-mail. Browserul Chrome verifică, de asemenea, corectitudinea câmpului de date din calendar, dar numai pentru că nu are o interfață de calendar click-to-select. Aceste elemente sunt caracterizate de următoarele reguli.

• Adresa de internet ( ) trebuie să conțină protocolul (http: //, https: //, ftp: //).
• Adresa de e-mail ( ) trebuie să conțină litere sau cifre înaintea simbolului @, după acesta, apoi o perioadă și un domeniu de nivel întâi.

Browserele au politici ușor diferite pentru validarea datelor utilizatorilor. De exemplu, Opera înlocuiește automat protocolul http: // în fața textului introdus, în timp ce alte browsere îl așteaptă de la utilizator. Chrome și Opera necesită un punct pentru a fi în adresa de corespondență, este opțional pentru Firefox.

Exemplul 2 arată un formular cu câmpuri obligatorii în care două câmpuri sunt validate de browser.

Exemplul 2. Corectitudinea datelor

HTML5 IE 10+ Cr Op Sa Fx

Opera validează un element de formular numai dacă este prezent atributul nume.

Ce se întâmplă în Opera când introduceți date incorecte este prezentat în Fig. 2.

Orez. 2. Avertisment despre date incorecte

Șablon de intrare

Unele date nu pot fi clasificate ca un singur tip de element de formular, așa că trebuie să utilizați o casetă de text pentru ele. Mai mult, intrarea lor are loc conform unui anumit standard. Deci, adresa IP conține patru numere separate printr-un punct (192.168.0.1), codul poștal al Rusiei este limitat la șase cifre (124007), telefonul conține un cod de oraș și un anumit număr de cifre adesea separate printr-o cratimă ( 391 555-341-42), etc. Browserul trebuie să specifice un șablon de intrare, astfel încât să valideze intrarea utilizatorului în funcție de acesta. Pentru aceasta, se folosește atributul model, iar valoarea acestuia este o expresie regulată. Unele valori tipice sunt enumerate în tabel. 1.

Exemplul 3 solicită o valoare de culoare hexazecimală (# ffcc00) și dacă nu se află în acest interval, browserul afișează un mesaj de eroare.

Exemplul 3. Şablon de intrare

HTML5 IE 10+ Cr Op Sa Fx

În fig. 3 arată un avertisment în browserul Chrome.

Orez. 3. Datele introduse nu se potrivesc cu șablonul

Anularea validării

Validarea nu este întotdeauna necesară pentru un formular, de exemplu, un dezvoltator dorește să folosească o soluție universală în JavaScript și nu are nevoie de validare duplicat de către browser. În astfel de cazuri, trebuie să dezactivați validarea inline. Pentru aceasta, se aplică atributul novalidate al etichetei.

Într-un scop similar, se folosește atributul formnovalidate, care se adaugă la butonul de trimitere a formularului, în acest caz la etichetă ... În acest caz, forma din exemplul 4 va arăta astfel.

Pentru orice dezvoltator web, nu există încă o problemă mai serioasă decât compatibilitatea completă între browsere a produsului său. Probabil, aceasta este una dintre sarcinile principale ale unui bun specialist: să se asigure că site-ul său este întotdeauna afișat corect în toate browserele.

Parametru necesar care este uneori folosit pentru intrare nu funcționează în IE antic, care pur și simplu nu poate fi lăsat așa. Utilizatorii pensionari care încă folosesc IE6 ar trebui să fie la fel de simpli pe site-ul dvs. ca și utilizatorii celei mai recente versiuni de Google Chrome. Cine, altul decât dezvoltatorii web, poate avea grijă de ei.

Despre dureros, despre Internet Explorer

Pentru browserele normale precum Firefox, Opera și Google Chrome, această sarcină este relativ ușoară. Chiar și versiunile mai vechi ale acestor browsere redau codul html la fel de bine, cu excepția cazului în care, desigur, este folosită o tehnologie nouă în el. Dar pentru a realiza acest lucru în browserele din familia Internet Explorer, este nevoie de un efort enorm.

Fiecare versiune a browserului Internet Exlorer are propria sa prostie unică. Ceea ce funcționează în IE6 poate să nu funcționeze corect în IE7 și invers. Această grădină zoologică a Microsoft nu a reușit să depășească nici măcar în cea mai recentă versiune a browserului său.

Nu pot înțelege de ce dezvoltatorii de browser nu pot să deschidă și să citească standardele W3C pentru construirea site-urilor.

Prin urmare, ca dezvoltator web, trebuie să acționez ca un fel de „strat” între browserele capricioase și vizitatorii site-ului care necesită cunoștințe și ochelari. Și este grozav că dezvoltatorii web au reușit până acum.

Deci, cum vi se cere să lucrați în versiuni mai vechi de IE?

JS vine în ajutorul nostru. Anterior, nu puteam suporta, dar acum nu văd o altă cale fără ea în vastitatea WEB-ului „corect”.

Nu am inventat soluția de mai jos, ci am luat-o de pe un blog burghez. Din moment ce sunt lacom, iar blogul este burghez, nu voi face link la el.

Funcția va fi responsabilă pentru tot. fnCheckFields ()... Plasați codul JS pe site-ul dvs.:

De obicei, este recomandat să îl plasați între etichetele html CAP la începutul paginii, dar aș recomanda totuși să o plasați în partea de jos a paginii înainte de eticheta de închidere CORP... Astfel, JS are un impact mai mic asupra vitezei de încărcare a paginii.

Fereastra de introducere, în care trebuie introdus parametrul necesar, ar trebui să arate astfel în limbajul html:

Acest script funcționează foarte simplu: după ce faceți clic pe butonul trimite, scriptul verifică toate intrările pentru prezența parametrului necesar și dacă îl găsește, atunci se uită la valoarea introdusă a acestui câmp în consecință. Dacă nu este introdus nimic într-o astfel de intrare, atunci este afișată o fereastră de avertizare despre necesitatea introducerii. În consecință, datele nu sunt trimise nicăieri.

De asemenea, este grozav că, dacă aveți un browser normal care a învățat deja să înțeleagă acest parametru așa cum era de așteptat, o astfel de fereastră de avertizare nu va apărea și instrumentele standard pentru procesarea parametrului necesar pentru browserul dvs. vor funcționa.

Distribuie pe rețelele sociale retelelor