Tutorijal - Forma za proveru jačine lozinke

Uvod

Tutorijal u kome ćemo prikazati postupak za izradu jednostavnog formulara za proveru jačine lozinke ....

.... biće dobra prilika da se posle kraće pauze ponovo usmerimo na praktične primere upotrebe regularnih izraza u JavaScript-u.

U prvom delu, pažnju ćemo posvetiti grafičkom dizajnu trake koja prikazuje jačinu lozinke, a u drugom delu ćemo se baviti algoritmom koji proverava jačinu lozinke preko regularnih izraza.

Dizajn trake

Dizajn trake koja prikazuje snagu lozinke podrazumeva povezivanje nekoliko stavki koje su same po sebi jednostavne za implementaciju (a nije teško ni međusobno ih povezati i uskladiti):

okvir i traka su obični <div> elementi
okvir nema zadatu boju pozadine i ima border, dok je situacija sa trakom obrnuta (pozadina je u boji, a bordera nema)
u smislu HTML strukture, okvir je noseći element (traka se nalazi unutar okvira)
traka se poravnava uz levu ivicu okvira, a širina trake se zadaje u procentima (preko JS skripte)
da se "ćoškovi" trake ne bi videli (budući da ćemo preko svojstva border-radius zaobliti ivice okvira), za okvir je potrebno koristiti svojstvo overflow, sa vrednošću
```
hidden
```

Napisaćemo prvo CSS kod koji odgovara navedenim zahtevima ....

Postavljanje elemenata

Za sam početak, poravnaćemo elemente jedan u odnosu na drugi, da bismo bolje sagledali njihovu međusobnu povezanost:

		
#lozinka_metar {
	display:         flex;
	flex-direction:  row;
	justify-content: center;
	align-items:     center;
	border:          solid 1px #000;
}

#lozinka_metar_traka {
	width:  180px;
	height: 60px;
}

Slika 1. - CSS kod za traku koja prikazuje snagu lozinke - korak 1.

Elementi su sada raspoređeni na sledeći način:

password_traka_01 — Slika 2. - Traka koja prikazuje snagu lozinke, uobličena preko CSS-a sa prethodne slike.

U sledećem koraku, traka će biti "zakačena" uz levu ivicu okvira i (takođe), razvučena po visini, posle čega jedina bitna dimenzija trake postaje širina (na koju ćemo u nastavku uticati preko JS-a).

Poravnanje trake u odnosu na okvir

Poravnanje trake u odnosu na okvir, može se obaviti promenom vrednosti svojstava justify-content i align-items, a takođe ćemo i visinu okvira podesiti tako da ceo element poprimi oblik koji smo prethodno zamislili.

Ukoliko primenimo sledeći CSS kod ....

		
#lozinka_metar {
	width:           100%;
	height:          32px;
	display:         flex;
	flex-direction:  row;
	justify-content: flex-start;
	align-items:     stretch;
	border:          solid 1px #000;
}

#lozinka_metar_traka {
	width: 40%;
	/*
	visina više nije bitna
	(traka se "proteže"
	preko cele visine okvira)
	*/
}

Slika 3. - CSS kod za traku koja prikazuje snagu lozinke - korak 2.

.... dobija se sledeći rezultat ....

password_traka_02 — Slika 4. - Traka koja prikazuje snagu lozinke, uobličena preko CSS-a sa prethodne slike.

.... i (u smislu grafičkog dizajna), preostaje samo da se zaoble ćoškovi okvira.

Zaobljavanje ivica okvira

Kao i do sada, zaobljavanje temena postiže se preko svojstva border-radius * ....

		
#lozinka_metar {
	....
	border-radius: 16px;
}

Slika 5. - CSS za zaobljavanje ćoškova okvira.

.... a upotrebom CSS selektora sa prethodne slike, dobija se sledeći rezultat:

password_traka_03 — Slika 6. - Traka koja prikazuje snagu lozinke, uobličena preko CSS-a sa prethodne slike.

Preostaje da sredimo ćoškove (koji još uvek "štrče").

Uklanjanje "ćoškova" sa trake

Ćoškovi se mogu ukloniti sa trake na dva načina.

Kao prvo, može se i na ovom mestu koristiti atribut border-radius, ali, u tom slučaju moramo biti vrlo precizni:

		
#lozinka_metar_traka {
	border-top-left-radius:    16px;
	border-bottom-left-radius: 16px;
}

Slika 7. - Komplikovanija varijanta CSS-a za zaobljavanje leve strane trake za prikaz snage lozinke.

"Odsecanje" možemo obaviti i tako što ćemo na <div> elementu lozinka_metar pristupiti svojstvu overflow i zadati vrednost hidden (i reklo bi se da je u pitanju jednostavniji i elegantniji način):

		
#lozinka_metar {
	....
	border-radius: 16px;
	overflow:      hidden
}

Slika 8. - Jednostavnija varijanta CSS-a za zaobljavanje leve strane trake za prikazivanje snage lozinke (ovoga puta, koristimo atribut overflow).

password_traka_04 — Slika 9. - Traka koja prikazuje snagu lozinke, uobličena preko CSS-a sa prethodne slike.

Traka je sada spremna za povezivanje sa JS-om.

Povezivanje trake sa JS-om

U sledećem odeljku, razmotrićemo kako se algoritamskim putem može obaviti procena snage lozinke u odnosu na dužinu i prisustvo (tj. odsustvo) cifara i specijalnih znakova, ali - prvo je potrebno definisati osnovni mehanizam za pristup traci.

Funkciji za formatiranje prikaza trake, kao argument se predaje "snaga" lozinke (koja može biti u rasponu od 0 do 100), i funkcija samo treba da pronađe traku (preko DOM strukture), pristupi svojstvu width, i zada vrednost u procentima po pravilima CSS-a (brojčana vrednost promenljive snaga, pretvorena u nisku, spaja se sa niskom "%").

		
function formatiranjeMetar(snaga) {
	let metar = document.getElementById("lozinka_metar_traka");
	metar.style.width = snaga + "%";
}

Slika 10. - Funkcija za povezivanje JavaScript-a sa trakom za prikaz snage lozinke.

Ako napravimo sledeći poziv ....

		
formatiranjeMetar(80);

Slika 11. - Pozivanje funkcije formatiranjeMetar.

.... očekivani rezultat je:

password_traka_05 — Slika 12. - Rezultat izvršavanja koda sa prethodne slike.

Sada (konačno) možemo da pređemo na JS i pozabavimo se postupcima za proveru jačine lozinke ....

Procena jačine lozinke preko regex-a

U funkciji za procenu jačine lozinke beležićemo samu jačinu lozinke, kao i listu nedostataka:

za početak, smatraćemo da nedostataka nema, i stoga će promenljiva snaga imati vrednost 100, a lista nedostataka biće prazna
potom treba izvršiti nekoliko provera, pri čemu svaka funkcija za proveru potencijalno može umanjiti snagu lozinke (u takvim slučajevima, u listu nedostataka takođe se unosi i odgovarajuća napomena)
funkcije koje proveravaju pojedinačne nedostatke, biće implementirane tako da vraćaju vrednost za koju treba redukovati snagu lozinke
posle svih pojedinačnih provera, potrebno je ažurirati traku koja prikazuje snagu (onako kako smo videli na kraju prethodnog odeljka)

Osnovna funkcija ima sledeći oblik:

		
function ProveraLozinke() {

	let lozinka      = document.getElementById("forma_lozinka").value;
	let lozinkaInfo  = document.getElementById("lozinka_info");
	let lozinkaMetar = document.getElementById("lozinka_metar_traka");
	let snaga        = 100;
	let nedostaci    = [];

	snaga -= ProveraDuzina(lozinka, nedostaci);
	snaga -= proveraBarJednoVelikoSlovo(lozinka, nedostaci);
	snaga -= proveraBarJednaCifra(lozinka, nedostaci);
	snaga -= proveraBarJedanSpecijalniZnak(lozinka, nedostaci);

	formatiranjeMetar(lozinkaMetar, snaga);
	
	if (snaga == 100) {
		lozinkaInfo.innerHTML = "<li>Lozinka je ok</li>";
	}
	else {
		lozinkaInfo.innerHTML = FormatiranjeIspisa(nedostaci);
	}
}

Slika 13. - Funkcija za proveru lozinke, koja koristi pomoćne funkcije za proveru pojedinačnih nedostataka.

Pošto smo postavili okvire, možemo se pozabaviti i pojedinačnim funkcijama za proveru nedostataka lozinke.

Za proveru dužine lozinke može se koristiti i svojstvo niski length (već poznato od ranije), ali, budući da je provera dužine samo jedna stavka (i pri tom najjednostavnija), nećemo je "izdvajati", i sve provere, uključujući i proveru dužine, obavljaćemo preko regularnih izraza (preko JS funkcije match).

Takođe, napomenimo da iza redukcija ne stoji nikakva "nauka", već samo okvirna/iskustvena procena o tome koliko koja stavka utiče na lozinke u svakodnevnim uslovima (možete se naknadno opredeliti da promenite određene parametre, a možete dodati i druge mehanizme provere, ako smatrate da je neophodno).

Provera dužine lozinke

Provera dužine je jednostavna: dovoljno je proveriti da li se bilo koji znak ponavlja bar osam puta.

		
function ProveraDuzina(lozinka, lista) {

	let obrazac = /.{8,}/;
	
	if (lozinka.match(obrazac)) {
		return 0;
	}
	
	lista.push("Dužina lozinke mora biti bar osam znakova");
	return 50;
}

Slika 14. - Funkcija za proveru dužine lozinke (uz korišćenje regularnih izraza).

Ako funkcija match pronađe poklapanje, neće biti redukcije snage, dok će suprotnom redukcija biti 50 (krajnje opravdano, jer, iako lozinke velike dužine nisu obavezno sigurne, kratke lozinke obavezno jesu nesigurne).

Takođe, vidimo i kod koji će u listu nedostataka uneti odgovarajuću poruku o dužini lozinke (ako se nedostaci pojave).

Provera prisustva specijalnih znakova

U nastavku, koristićemo ponešto drugačiji (tj, "zvaničniji") mehanizam provere u odnosu na prethodni odeljak.

Kao što znamo od ranije: ukoliko dođe do poklapanja, funkcija match vratiće niz koji sadrži sve niske koje odgovaraju kriterijumu za pretragu (kriterijum je ovoga puta regularni izraz), dok će u suprotnom povratna vrednost biti null - i upravo je to razlog zašto je kod za proveru dužine lozinke, u prethodnom odeljku, mogao da "proradi" u bilo kojim okolnostima (u proveri uslova u if grananju, sistemska vrednost null tretira se kao logička vrednost false dok se "skoro sve ostalo" * tretira kao true).

Međutim, nadalje ćemo poklapanja smeštati u niz, koji će nositi naziv (upravo), poklapanja, i na kraju ćemo proveravati da li je broj elemenata niza veći od 0.

		
function proveraBarJedanSpecijalniZnak(lozinka, lista) {
	
	let obrazac = /[\\`~!@#$%^&*()\-\_\\+\\=\\[\\]{}]/;
	let poklapanja = lozinka.match(obrazac) || [];
	
	if (poklapanja.length > 0) {
		return 0;
	}
	
	lista.push("Lozinka mora sadržati bar jedan specijalni znak");
	return 20;	
}

Slika 15. - Funkcija za proveru prisustva specijalnih znakova (uz korišćenje regularnih izraza).

Ako funkcija match vrati niz koji nije prazan, neće biti redukcije snage, dok će u suprotnom redukcija biti 20 (smatramo da je prisustvo bar jednog specijalnog znaka bitna stavka, ali, ne toliko bitna koliko i dužina).

Provera prisustva cifara

I ovoga puta funkcija match vraća (ili ne vraća?! :)), niz sa prepoznatim niskama (što će biti provereno), ali, klasa znakova u regularnom izrazu je drugačija (naravno), i prilagođena je pretrazi cifara: [0-9].

		
function proveraBarJednaCifra(lozinka, lista) {

	let obrazac    = /[0-9]/;
	let poklapanja = lozinka.match(obrazac) || [];

	if (poklapanja.length > 0) {
		return 0;
	}
	
	lista.push("Lozinka mora sadržati bar jednu cifru");
	return 15;
}

Slika 16. - Funkcija za proveru prisustva cifara (uz korišćenje regularnih izraza).

Ako funkcija match vrati niz koji nije prazan, neće biti redukcije snage, dok će u suprotnom redukcija biti 15.

Provera prisustva velikih slova

Verujemo da je čitaocima poznato od ranije da se velika slova engleskog alfabeta mogu tražiti preko klase znakova [A-Z], međutim, postoji i moderniji (i praktičniji) način.

Regularni izrazi mogu pristupati opštim svojstvima UNICODE znakova, pa tako recimo sledeći izraz: /\p{Lu}/gu, proverava da li određeni znak predstavlja veliko slovo (\p - property (svojstvo); L - letter (slovo); u - 'uppercase' (veliko slovo)).

		
function proveraBarJednoVelikoSlovo(lozinka, lista) {

	let obrazac    = /\p{Lu}/gu;
	let poklapanja = lozinka.match(obrazac) || [];

	if (poklapanja.length > 0) {
		return 0;
	}
	
	lista.push("Lozinka mora sadržati bar jedno veliko slovo");
	return 10;
}

Slika 17. - Funkcija za proveru prisustva velikih slova (uz korišćenje regularnih izraza).

Ako funkcija match vrati niz koji nije prazan, neće biti redukcije snage, dok će suprotnom redukcija biti 10.

Funkcija za formatiranje trake

Funkciji za formatiranje trake dodaćemo i pomoćnu funkciju za zadavanje boje u zavisnosti od jačine lozinke:

		
function formatiranjeMetar(metar, snaga) {

	metar.
	style.
	width           = snaga + "%";
	
	metar.
	style.
	backgroundColor = formatiranjeMetarBoja(snaga);
}

function formatiranjeMetarBoja(snaga) {

	if (snaga < 40) {
		return "#ffa181";
	}

	if (snaga < 60) {
		return "#ffcf81";
	}

	if (snaga < 80) {
		return "#fff781";
	}

	return "#c7ff6a";
}

Slika 18. - Pomoćne funkcije za formatiranje trake.

.... posle čega preostaje samo da formatiramo ispis nedostataka lozinke (ukoliko lista nedostataka nije prazna).

Funkcija za formatiranje ispisa nedostataka lozinke

Pomoćna funkcija za formatiranje ispisa nedostataka lozinke, podrazumeva prolazak kroz sve elemente liste, pri čemu se elementi samo uokviruju <li> tagovima:

		
function FormatiranjeIspisa(lista) {

	let s = "";

	for (let i = 0; i < lista.length; i++) {
		s += "<li>" + lista[i] + "</li>";
	}

	return s;
}

Slika 19. - Pomoćna funkcija za formatiranje ispisa nedostataka.

Formular je sada kompletan, a rezultat ste već videli na samom početku (ako ste mislili da je u pitanju slika, slobodno se vratite i isprobajte formular (koji je potpuno funkcionalan)). :)

Ideje za dalje unapređenje

Postupak koji smo prikazali nije bez nedostataka i svakako se može dalje unaprediti (što može biti veoma zanimljiva vežba za samostalnu implementaciju), međutim, u praktičnom smislu, dodatna unapređenja bi bila: ili ne-previše-bitna (recimo, provera da li ima i više od jednog specijalnog znaka), ili bi se morao implementirati nezanemarljivo ozbiljan algoritam za prepoznavanje semantičkih obrazaca u tekstu.

Na primer, lako se može ustanoviti da li je korisnik pokušao da "prošvercuje" lozinku kao što je "AaaBbb123", ali zato nije skroz trivijalno implementirati algoritam koji će proveravati da li je korisnik pokušao da "prođe" sa lozinkom kao što je "Aleksand4r!", "Programiranj3#" i sl (doduše, nije ni mnogo teško).

Sa druge strane, sistemi za registraciju po pravilu sadrže uputstva za kreiranje korektnih lozinki, pa, ako neko 'baš želi' da krši takva uputstva (pored svih saveta i na svoju štetu) - reklo bi se da mu se ipak mora dati sloboda da to i učini. :)

Za vežbu, probajte da samostalno dodate bar još neko sitnije unapređenje (od dodatnog isprobavanja opcija u fazi učenja, može biti samo koristi), a što se tiče "nepažljivo izabranih lozinki", to je problem koji (bar za sada), u praksi možemo rešiti samo "u lokalu", tako što ćemo sami koristiti adekvatne lozinke i (u skladu sa mogućnostima i bez nametanja), 'blago podsticati' prijatelje i poznanike da postupaju na sličan način. :)

Autor članka Nikola Vukićević Za web portal codeblog.rs

Napomena: Tekstovi, slike, web aplikacije i svi ostali sadržaji na sajtu codeblog.rs (osim u slučajevima gde je drugačije navedeno) predstavljaju intelektualnu svojinu autora sajta codeblog.rs i zabranjeno je njihovo korišćenje na drugim sajtovima i štampanim medijima, kao i bilo kakvo drugo korišćenje u komercijalne svrhe, bez eksplicitnog pismenog odobrenja autora.