Siguria e aplikacioneve web është rritur vitet e fundit si pasojë e përmirësimit të teknologjisë dhe pëfitimit të një eksperience shumë vjeçare. Enkriptimi me SSL, kthimi i fjalëkalimit në hash kriptografik dhe mbrojtja e përgjithshme e aplikacionit nga sulmet standarte (edhe jo) janë vetëm disa nga masat e sigurisë. Megjithatë, sa do i sigurt aplikacioni, në lojë futet edhe përgjegjshmëria e vizitorëve për të vendosur fjalëkalime të forta, të cilat mund të varjojnë nga fjalë të thjeshta fjalori në 20 gërma kombinime abstrakte.
Qëllimi i kësaj guide të shkurtër (por praktike) është të ndërtojmë një mënyrë vizuale për ta informuar vizitorin rreth fortësisë së fjalëkalimit. Hera e parë që kam rastisur në një paraqitje të tillë ka qenë kur u regjistrova në Google Mail (paraqitur më poshtë) dhe mu duk zgjidhje shumë e mirë. Më pas teknika morri moment dhe u implementua edhe në shumë faqe të tjera. Unë do ju tregoj si të ndërtoni një matës fortësie të ngjashëm me Google Mail, por [besoj] më interesant dhe me më shume nivele fortësie.
Fjalëkalimi në GMail
Para se të filloj, më lejoni t’ju shpjegoj logjikën e thjeshtë të matësit. Gjithçka bazohet në disa nivele fortësie të cilët rriten në bazë të kushteve të vendosura. Pasja e një gërme të madhe, një simboli, një numri dhe gjatësia më e madhe se 12 karaktere janë faktorët që rrisin nivelet e fortësisë.
Do ta nis guidën me kodin HTML që strukturon fushën e fjalëkalimit dhe bën gjithçka gati për tu ngjyrosur e pozicionuar me CSS.
| HTML | | Kopjo Kodin | | ? |
| 1 | <label for="fjalekalimi">Fjalekalimi</label> |
| 2 | <input type="text" name="fjalekalimi" id="fjalekalimi" /> |
| 3 | <br /><br />Fortesia: <span id="teksti"></span> |
| 4 | <div id="fortesia"> |
| 5 | <div id="progresi"></div> |
| 6 | </div> |
Kodi nuk ka asgjë të veçantë, por më duhet t’ju shpjegoj disa gjëra të thjeshta. <span id=”teksti”> është elementi i cili do të mbajë shkrimin e fortësisë (psh: I Fortë, I Dobët, etj). <div id=”fortesia”> është mbajtësi i progresit, ndërsa <div id=”progresi”> është elementi që do të tregojë progresin duke u zmadhuar dhe zvogëluar në gjerësi. Një gjë që duhet të theksoj është fakti se kam përdorur <input type=”text”> në vend të <input type=”password”>. E vetmja arsye është që fjalëkalimi të shihet në mënyrë që të eksperimentoni me nivelet e ndryshme të fortësisë, por në një projekt real duhet të përdorni <input type=”password”>.
Për ta bërë të bukur paraqitjen e elementëve do të shkruajmë disa rregulla të thjeshta në CSS.
| CSS | | Kopjo Kodin | | ? |
| 01 | label{ |
| 02 | display:block; |
| 03 | } |
| 04 | |
| 05 | input#fjalekalimi{ |
| 06 | border:1px solid #aaa; |
| 07 | width:200px; |
| 08 | padding:5px; |
| 09 | } |
| 10 | |
| 11 | span#teksti{ |
| 12 | color:#09c; /* Teksti i fortesise e ka ngjyren blu */ |
| 13 | } |
| 14 | |
| 15 | div#fortesia{ |
| 16 | width:210px; |
| 17 | border:1px solid #ddd; |
| 18 | } |
| 19 | |
| 20 | div#progresi{ |
| 21 | height:10px; |
| 22 | background-color:#09c; /* Indikuesi i progresit e ka sfondin blu */ |
| 23 | width:0%; /* dhe eshte 0% i gjere per mos tu shfaqur */ |
| 24 | } |
| 25 | |
| 26 | /* Nje klase qe do te aktivizohet kur te ndodhe gabim */ |
| 27 | div#progresi.problem{ |
| 28 | background-color:red; |
| 29 | } |
| 30 | |
| 31 | /* Nje klase qe do te aktivizohet kur te ndodhe gabim */ |
| 32 | span#teksti.problem-teksti{ |
| 33 | color:red; |
| 34 | } |
Tashmë kemi punuar me paraqitjen dhe kemi bërë gjithçka gati për të kaluar në kodin JavaScript. Kodi (që vijon më poshtë) është i komentuar mirë, megjithatë më duhet t’ju tregoj logjikën e thjeshtë që fuqizon këtë kontrollues fortësie. Kam krijuar një funksion i cili është lidhur me eventin keyup() në mënyrë që të egzekutohet sa herë që në fjalëkalim shtohet një karakter. Gjëja e parë që kryhet është të kontrollohet nëse fjalëkalimi është nën 6 karaktere, ku matësi i fortësisë çaktivizohet duke u bërë i kuq dhe shfaqet një mesazh gabimi. Kur fjalëkalimi është mbi 6 karaktere, automatikisht fortësia fiton një pikë dhe vazhdohet me kontrollin e niveleve të tjera. Me Regular Expressions kontrollohet nëse fjalëkalimi përmban gërma të mëdha, numra apo simbole dhe i shtohet një pikë fortësisë për çdo kusht të plotësuar. Edhe nëse fjalëkalimi është më i gjatë se 12 karaktere është një pikë tjetër. Në fund, pikët mblidhen dhe në bazë të tyre shfaqet mesazhi dhe progresi. Shpresoj që shpjegimi teorik të ketë sens, por kuptohet që kodi do ju tregojë si gjithçka funksionin në praktikë.
| Javascript | | Kopjo Kodin | | ? |
| 001 | $(document).ready(function(){ |
| 002 | /* |
| 003 | Per te thjeshtesuar kodin, deklarojme variablat te cilat |
| 004 | i drejtohen elementeve html. $() eshte menyra e shkurtuar |
| 005 | e JQuery per document.getElementById(). |
| 006 | */ |
| 007 | var fjalekalimi = $('#fjalekalimi'); |
| 008 | var fortesia = $('#fortesia'); |
| 009 | var teksti = $('#teksti'); |
| 010 | var progresi = $('#progresi'); |
| 011 | |
| 012 | var minimumi = 6; //Numri minimal i karaktereve per fjalekalimin |
| 013 | var germa = 0; //Do aktivizohet kur numri i karaktereve te jete >12 |
| 014 | var germaMedha = 0; //Do aktivizohet kur te gjendet nje germe e madhe |
| 015 | var numra = 0; //Do aktivizohet kur te gjendet nje numer |
| 016 | var simbole = 0; //Do aktivizohet kur te gjendet nje simbol |
| 017 | var totali = 0; //Do na sherbeje per te mbledhur totalin e 4 prej variablave me siper |
| 018 | |
| 019 | function shfaqFortesine(){ |
| 020 | /* |
| 021 | Kontrollojme nese gjatesia e fjalekalimit eshte me e vogel se |
| 022 | vlera e percaktuar ne variabel. |
| 023 | */ |
| 024 | if(fjalekalimi.val().length < minimumi){ |
| 025 | /* |
| 026 | Elementit 'progresi' i shtojme klasen 'problem' permes funksionit |
| 027 | addClass() e cila e ben sfondin e kuq. Gjithashtu e bejme gjeresine |
| 028 | e elementit 100% ne menyre qe te shfaqet i teri (default ne css eshte |
| 029 | vendosur 0) me funksionin css(). |
| 030 | */ |
| 031 | progresi.addClass('problem'); |
| 032 | progresi.css('width', '100%') |
| 033 | |
| 034 | /* |
| 035 | Ashtu si tek progresi, edhe tekstit i shtojme klasen 'problem-teksti' ne |
| 036 | menyre qe ngjyra e tekstit te behet e kuqe. Me funksionin html() - shkurtimi |
| 037 | i JQuery per innerHTML() - shfaqim mesazhin e gabimit. |
| 038 | */ |
| 039 | teksti.addClass('problem-teksti'); |
| 040 | teksti.html('Me pak se 6 karaktere'); |
| 041 | /* |
| 042 | Kodi me poshte do te egzekutohet kur numri i karaktereve te jete |
| 043 | me i madh se numri i vendosur ne variabel. |
| 044 | */ |
| 045 | } else{ |
| 046 | /* |
| 047 | Ja heqim klasat e gabimit elementeve ne menyre qe te kthehen |
| 048 | ne ngjyrat origjinale (blu, te vendosura me CSS). |
| 049 | */ |
| 050 | progresi.removeClass('problem'); |
| 051 | teksti.removeClass('problem-teksti'); |
| 052 | |
| 053 | /* |
| 054 | Kater rreshtat e meposhtem jane matesit e fortesise. Me funksionin match() kerkojme |
| 055 | nese Regular Expression i vendosur perkon me tekstin. Nese po, atehere variabla e duhur |
| 056 | behet 1, perndryshe kthehet ne 0. Rreshti i fundit thjeshte kontrollon nese gjatesia e |
| 057 | tekstit eshte me e madhe se 12, gje qe i shton nje tjeter pike fortesise. |
| 058 | [A-Z] kontrollon nese teksti permban germa te medha. |
| 059 | [0-9] kontrollon nese teksti permban numra. |
| 060 | (.*[!,@,#,$,%,^,&,*,?,_,~]) kontrollon nese teksti permban simbole. |
| 061 | */ |
| 062 | if(fjalekalimi.val().match(/[A-Z]/g)){ germaMedha = 1; } else{ germaMedha = 0; } |
| 063 | if(fjalekalimi.val().match(/[0-9]/g)){ numra = 1; } else{ numra = 0; } |
| 064 | if(fjalekalimi.val().match(/(.*[!,@,#,$,%,^,&,*,?,_,~])/)){ simbole = 1; } else{ simbole = 0; } |
| 065 | if(fjalekalimi.val().length > 12){ germa = 1; } else{ germa = 0; } |
| 066 | |
| 067 | /* |
| 068 | Mbledhim shumen e te gjitha variablave te kontrollit dhe e kalojme |
| 069 | ne variablen 'totali'. Vlera e variablave te kontrollit eshte ose 1, |
| 070 | ose 0, prandaj shuma minimale eshte 0 (fortesi minimale), ndersa shuma |
| 071 | maksimale eshte 4 (fortesi maksimale). |
| 072 | */ |
| 073 | totali = germaMedha + numra + simbole + germa; |
| 074 | /* |
| 075 | Ketu kam bere nje llogaritje te vogel per te shfaqur ne menyre dinamike |
| 076 | progresin e fortesise duke levizur gjeresine e elementit 'progresi'. |
| 077 | Duke filluar nga 0 deri ne 4 kemi 5 nivele fortesie, ndersa progresi eshte 100%. |
| 078 | Pra 100%/5 nivele = 20% per nivel. Per nivelin 0 mendova qe progresi te shkoje |
| 079 | ne 25% dhe jo 0%, ne menyre qe te behet diferenca midis fjalekalimit qe nuk i |
| 080 | ploteson numrin minimal te karaktereve dhe atij qe i ploteson. Permes llogaritjes |
| 081 | se meposhtme: totali*20+20 +'%' kemi keto raste te mundshme: |
| 082 | totali = 0 => 0*20+20 = 20% (fortesi minimale) |
| 083 | totali = 1 => 1*20+20 = 40% |
| 084 | totali = 2 => 2*20+20 = 60% |
| 085 | totali = 3 => 3*20+20 = 80% |
| 086 | totali = 4 => 4*20+20 = 100% (fortesi maksimale) |
| 087 | */ |
| 088 | progresi.css('width', totali * 20 + 20 + '%'); |
| 089 | |
| 090 | /* |
| 091 | Ne baze te vleres se variables 'totali' percaktohet edhe fortesia |
| 092 | e fjalekalimit (min:0, maks:4). Shfaqim mesazhet e duhura sipas |
| 093 | nivelit te caktuar, nga 'I Dobet' deri ne 'Ekstrem!'. |
| 094 | */ |
| 095 | if(totali == 0){ teksti.html('I Dobet'); } |
| 096 | else if(totali == 1){ teksti.html('Mesatar'); } |
| 097 | else if(totali == 2){ teksti.html('I Forte'); } |
| 098 | else if(totali == 3){ teksti.html('Super i Forte'); } |
| 099 | else if(totali == 4){ teksti.html('Ekstrem!'); } |
| 100 | } |
| 101 | } |
| 102 | |
| 103 | /* |
| 104 | Lidhim eventin keyup() me funksionin shfaqFortesine(). Ne momentin qe |
| 105 | nje taste do te shtypet, funksioni do therritet per te shfaqur rezultatin |
| 106 | ne kohe reale. |
| 107 | */ |
| 108 | fjalekalimi.keyup(shfaqFortesine); |
| 109 | }); |
Kodi JavaScript mund të jetë pak “friksues” për fillestarët (komentet e zgjasin edhe më tepër), por ju siguroj që nuk ka asnjë shkencë. Thjeshtë kam krijuar një algoritëm i cili skanon tekstin dhe përcakton nivelin e fortësisë në bazë të përmbajtjes së tij dhe rezultatin e shfaq duke manipuluar disa elementë. Kodi mund të përdoret copy-paste për projekte të ndryshme, por do ju këshilloja të eksperimentoni disi e ndoshta të krijoni një algoritëm tuajin apo ta modifikoni tërësisht mënyrën e shfaqjes së fortësisë. JQuery është një librari shumë e fuqishme dhe e thjeshtë në të njëjtën kohë, me të cilën mund të bëni çfarëdo ju tregon fantazia.
Mësim të mbarë.
Shkruaj një Koment