Izrada jednostavnog kontakt forme sa Angularjs i php. Sigurnost korisničkih podataka Zašto je ovaj obrazac instaliran?

Ovdje možete koristiti podatke iz gornjeg obrasca.

Email.ForgotPass:

[[+ puno ime]],

Za aktiviranje nove lozinke posjetite sljedeći link:

Želim novu lozinku

Ako je sve prošlo kako treba, moći ćete se prijaviti na svoj profil sa sljedećim informacijama:

Ulogovati se:[[+ korisničko ime]]

Lozinka:[[+ lozinka]]

hvala,
Administracija web-mjesta Primjer.Com

Sve je vrlo slično dijelu pisma za aktivaciju, samo se lozinka generira ovdje u isječku.

Posljednji dodir ostaje stvaranje resursa na koji će korisnik ići od pisma da ažurira lozinku. U ovom resursu nam je potreban poziv:

[[! ResetPassword: prazno = `

Ovaj kod će prikazati poruku ako iznenada neko ponovo zaluta na ovu stranicu ili samo slučajno. A ako je lozinka uspješno resetirana, prikazat će se poruka iz dijela Auth.ForgotPass.Reset:

Sada imamo potpuno funkcionalan sistem autorizacije i registracije korisnika. Promjena profila ovlaštenih korisnika ostaje izvan okvira članka.

1. Kreirajte stranicu za registraciju i dodajte joj isječak poziva Registrirajte se.

2. Kreirajte komade pomoću obrasca za registraciju Register.Form i aktivacijsko pismo Email.Activation.

3. Kreirajte stranicu za potvrdu registracije i uputite poziv isječka na nju ConfirmRegister.

4. Dodajte poziv s isječkom Ulogovati se gde želimo da postavimo formular za prijavu i bedž ovlašćenog korisnika.

5. Kreirajte dio sa formularom za prijavu Auth.Login , dio s informacijama o ovlaštenom korisniku Auth.Logout , komad s porukom o grešci Auth.Login.Error .

6. Kreirajte stranicu za oporavak lozinke i uputite poziv isječka na nju Zaboravili ste lozinku.

7. Kreirajte komad Auth.ForgotPass.Form sa obrascem za oporavak lozinke, komad Auth.ForgotPass.Sent sa porukom o uspješnom slanju pisma, komad Email.ForgotPass sa pismom za resetovanje lozinke.

8. Kreirajte resurs sa konačnim poništavanjem lozinke i postavite poziv isječka u njega Reset lozinke.

9. Kreirajte komad Auth.ForgotPass.Reset sa porukom o uspješnom resetovanju lozinke.

To je sve. Bit će mi drago svim dopunama i komentarima.

Foolproof je skup mjera za sprječavanje unosa netačnih informacija u obrazac. Na primjer, ako trebate unijeti pozitivan broj od 0 do 10 u polje, tada bi trebali provjeriti da korisnik ne unosi tekst ili broj koji ne leži u navedenom rasponu, tj. broj ne smije biti manji od nule ili veći od deset.

Zašto se unose netačni podaci? To je uglavnom zbog tri razloga.

1. Korisnik je slučajno napravio grešku, na primjer, nepažljivo je pročitao ono što treba da naznači.
2. Na web stranici od njih se dvosmisleno traži da unesu podatke, tako da korisnik mora pogoditi i pretpostaviti šta zapravo želi od njega. U ovom slučaju, stavovi programera i korisnika ne poklapaju se uvijek.
3. Postoji veliki broj ljudi koji uputstva shvataju kao izazov i pokušavaju da urade suprotno. Takvi korisnici rezonuju ovako: „Da, od mene se traži da unesem broj. Šta će se dogoditi ako naznačim slova?" Nakon toga traže očito netačne informacije i vide do čega će to dovesti.

Treba shvatiti da precizne i ispravne formulacije, iako smanjuju vjerovatnoću grešaka, ni na koji način vas ne spašavaju od njih. Samo tehnička sredstva na strani servera omogućavaju vam postizanje željenog rezultata i izbjegavanje unosa pogrešnih podataka. Ipak, revizija ili, kako se još naziva, validacija na strani klijenta omogućava vam da brzo provjerite ispravnost podataka koje je unio korisnik, bez slanja obrasca na server. Ovo štedi vrijeme korisnika i smanjuje opterećenje servera. Sa stanovišta upotrebljivosti, postoje i plusi - korisnik odmah dobija poruku o tome koje je podatke pogrešno naveo i može ispraviti svoju grešku.

obavezno polje

Neka polja obrasca moraju biti popunjena prije slanja na server. Ovo se, na primjer, odnosi na obrazac za registraciju, gdje se od vas traži da unesete korisničko ime i lozinku. Zahtevani atribut se koristi za specifikaciju obaveznih polja, kao što je prikazano u Primeru 1.

Primjer 1. Traženi atribut

HTML5 IE 10+ Cr Op Sa Fx

Obavezna polja moraju biti popunjena prije slanja obrasca, inače obrazac neće biti poslan serveru i pretraživač će o tome izdati upozorenje. Tip poruke zavisi od pretraživača; na primer, Chrome prikazuje tooltip, kao što je prikazano na Sl. 1.

Rice. 1. Obavezno polje nije popunjeno

Ispravnost podataka

U početku postoje dva polja u koja se automatski provjeravaju podaci koje je unio korisnik. Ovo je web adresa i adresa e-pošte. Chrome pretraživač također provjerava ispravnost polja kalendarskih podataka, ali samo zato što nema interfejs kalendara sa klikom za odabir. Ove elemente karakteriziraju sljedeća pravila.

• Web adresa ( ) mora sadržavati protokol (http: //, https: //, ftp: //).
• E-mail adresa ( ) mora sadržavati slova ili brojeve prije simbola @, nakon njega, zatim tačku i domenu prvog nivoa.

Preglednici imaju malo drugačiju politiku za provjeru valjanosti korisničkih podataka. Na primjer, Opera automatski zamjenjuje http: // protokol ispred unesenog teksta, dok drugi pretraživači to očekuju od korisnika. Chrome i Opera zahtijevaju da tačka bude u poštanskoj adresi, to je opciono za Firefox.

Primjer 2 prikazuje obrazac sa obaveznim poljima u kojima su dva polja potvrđena od strane pretraživača.

Primjer 2. Ispravnost podataka

HTML5 IE 10+ Cr Op Sa Fx

Opera provjerava valjanost elementa obrasca samo ako je prisutan atribut name.

Šta se dešava u Operi kada unesete netačne podatke prikazano je na Sl. 2.

Rice. 2. Upozorenje o netačnim podacima

Input Template

Neki podaci se ne mogu kategorizirati kao jedan tip elementa obrasca, tako da za njih morate koristiti okvir za tekst. Štaviše, njihov unos se odvija prema određenom standardu. Dakle, IP adresa sadrži četiri broja razdvojena tačkom (192.168.0.1), poštanski broj Rusije je ograničen na šest cifara (124007), telefon sadrži broj grada i određeni broj cifara često odvojenih crticom ( 391 555-341-42), itd. Pregledač treba navesti šablon za unos kako bi u skladu s njim proveravao korisnički unos. Za to se koristi atribut uzorka, a njegova vrijednost je regularni izraz. Neke tipične vrijednosti su navedene u tabeli. 1.

Primjer 3 traži heksadecimalnu vrijednost boje (# ffcc00) i ako nije u ovom rasponu, pretraživač prikazuje poruku o grešci.

Primjer 3. Predložak unosa

HTML5 IE 10+ Cr Op Sa Fx

Na sl. 3 prikazuje upozorenje u Chrome pretraživaču.

Rice. 3. Uneseni podaci ne odgovaraju predlošku

Otkazivanje validacije

Validacija nije uvijek potrebna za obrazac, na primjer, programer želi da koristi univerzalno rješenje u JavaScript-u i ne treba mu duplikat validacije od strane pretraživača. U takvim slučajevima morate onemogućiti inline validaciju. Za ovo se primjenjuje novalidate atribut oznake.

U sličnu svrhu koristi se atribut formnovalidate, koji se dodaje gumbu za podnošenje obrasca, u ovom slučaju oznaci ... U ovom slučaju, obrazac iz primjera 4 će izgledati ovako.

Za bilo kog web developera još uvijek ne postoji ozbiljniji problem od potpune kompatibilnosti njegovog proizvoda sa različitim pretraživačima. Vjerovatno je to jedan od glavnih zadataka dobrog stručnjaka: osigurati da se njegova web stranica uvijek ispravno prikazuje u svim pretraživačima.

Parametar potrebno koji se ponekad koristi za unos ne radi u drevnom IE, koji se jednostavno ne može ostaviti na taj način. Umirovljeni korisnici koji još uvijek koriste IE6 trebali bi biti jednako laki na vašoj web lokaciji kao i korisnici najnovije verzije Google Chrome-a. Ko osim web programera može brinuti o njima.

O bolnom, o Internet Exploreru

Za normalne pretraživače kao što su Firefox, Opera i Google Chrome, ovaj zadatak je relativno lak. Čak i starije verzije ovih pretraživača jednako dobro prikazuju html-kod, osim naravno ako se u njemu koristi neka nova tehnologija. Ali da bi se to postiglo u pretraživačima iz porodice Internet Explorer, potreban je ogroman trud.

Svaka verzija Internet Exlorer pretraživača ima svoju jedinstvenu glupost. Ono što radi u IE6 možda neće raditi ispravno u IE7, i obrnuto. Ovaj Microsoftov zoološki vrt nije uspio nadvladati ni u najnovijoj verziji svog pretraživača.

Ne mogu da razumem zašto programeri pretraživača ne mogu jednostavno da se otvore i pročitaju W3C standarde za izgradnju sajtova.

Stoga, kao web programer, moram da se ponašam kao neka vrsta "sloja" između hirovitih pretraživača i posetilaca sajta koji zahtevaju znanje i naočare. I sjajno je što su web programeri do sada uspjeli.

Pa kako se od vas traži da radite u starijim verzijama IE-a?

JS nam dolazi u pomoć. Ranije to nisam mogao izdržati, ali sada ne vidim dalji put bez toga u prostranstvu "ispravnog" WEB-a.

Nisam sam izmislio rešenje ispod, već sam ga preuzeo sa buržoaskog bloga. Pošto sam pohlepan, a blog je buržoaski, neću linkovati na njega.

Funkcija će biti odgovorna za sve. fnCheckFields ()... Postavite JS kod na svoju web stranicu:

Obično se preporučuje da ga postavite između html tagova HEAD na početku stranice, ali bih ipak preporučio da ga postavite na sam dno stranice prije završne oznake TIJELO... Dakle, JS ima manji uticaj na brzinu učitavanja stranice.

Prozor za unos, u koji se mora unijeti traženi parametar, trebao bi izgledati ovako na html jeziku:

Ova skripta radi vrlo jednostavno: nakon klika na dugme poslati, skripta provjerava sve ulaze na prisustvo traženog parametra i ako ga pronađe, onda u skladu s tim gleda unesenu vrijednost ovog polja. Ako se u takav unos ništa ne unese, pojavljuje se prozor upozorenja o potrebi unosa. Shodno tome, podaci se nikuda ne šalju.

Također je sjajno da ako imate normalan pretraživač koji je već naučio da razumije ovaj parametar kako se očekuje, takav prozor upozorenja neće iskočiti i standardni alati za obradu potrebnog parametra za vaš pretraživač će raditi.

Podijelite na društvenim mrežama mreže