AJAX Control Toolkit –
PasswordStrength
Ez egy példaalkalmazáshoz tartozó leírás! Az alkalmazás erről a címről tölthető el:
http://devportal.hu/Portal/Detailed.aspx?NewsId=a4b56572-a9f7-48df-b58a-7acf0756aa17 vagy
http://cid-8dcaf3b0da4fb828.skydrive.live.com/embedrowdetail.aspx/ACTsorozat/ACT|_XXIII|_PasswordStrength.zip
Ebben a cikkben a PasswordStrengthExtender vezérlőt vesszük közelebbről szemügyre!
PasswordStrength alapok
A PSE vezérlő arra szolgál, hogy valamilyen módon mérni, illetve jellemezni tudjuk a felhasználó által begépelt jelszó erősségét. Értelemszerűen ezt az extender-t csak szövegdobozokhoz tudjuk hozzákötni!
Az jelszóerősségének a mérése úgy történik, hogy a mi általunk megadott szabályokat (pl.: hány nagybetűt kell minimum tartalmaznia a jelszónak) figyeli egy kliensoldali java-script függvény, majd a teljesített, illetve az elvárt kritériumokból kiszámít egy arányt. Ezen arány alapján jellemezhetjük a jelszó erősségét, majd többféle formában is megjeleníthetjük a jellemzést (szövegesen (Text), vagy „sávjelző” segítségével (BarIndicator)).
Ez az extender három szempontból is nagyon hasznos vezérlő. Az egyik szempont az, hogy a PSE-vel kibővítve a CreateUserWizard vezérlőt, egy ténylegesen felhasználóbarát regisztrációs felületet alakíthatunk ki. A második indok, amiért szerintem érdemes használni ezt az extender-t az, hogy teljes mértékig testre-szabható. (A PSE tulajdonságainak a 75%-a a finomhangolásra, illetve a megjelenítés egyedivé alakítására szolgál!!!) Végül pedig a legfontosabb előnye, hogy általa növelhetjük az oldalunk biztonságát! 
PSE használata
A példaalkalmazásunk első felében először azt nézzük meg, hogy miként szabhatjuk testre a CreateUserWizard vezérlőt, illetve a MemberShipProvider-t, majd utána pedig 3 példán keresztül megismerkedünk a PSE különböző megjelenítési módjaival!
Előkészületek a PSE használatához
A PSE vezérlő az előzetes várakozásainkkal ellentétben nem foglal magában egy érvényesítő vezérlőt, tehát csak tájékoztatásra lehet felhasználni, erősebb jelszó kikényszerítésére nem!! Jelszóházirend szigorításhoz a MemberShipProvider-en kell egy kicsit alakítgatnunk. Nyissuk meg a web.config-ot, majd a system.web tag-en belül helyezzük el az alábbi membership szekciót:
<membership defaultProvider="SqlProvider" userIsOnlineTimeWindow="20">
<providers>
<add name="SqlProvider"
type="System.Web.Security.SqlMembershipProvider"
connectionStringName="LocalSqlServer"
minRequiredNonalphanumericCharacters="2"
minRequiredPasswordLength="10"
requiresQuestionAndAnswer="false"
requiresUniqueEmail="false"/>
</providers>
</membership>
A userIsOnlineTimeWindow tulajdonságon keresztül azt szabhatjuk meg, hogy a felhasználót hány percig tekintjük még online-nak az utolsó interakciója után.
Amikor egy új membershipprovider-t akarunk felvenni a web.config-ban, akkor a Visual Studio IntelliSence-e mindössze csak néhány alaptulajdonságot fog felsorolni (pl.: name, type), ezért nekünk kell ügyelnünk arra, hogy a tulajdonságneveknél a kis és nagybetűk helyesen legyenek! A helyes szintaxis a következő: a több részből álló tulajdonságneveknél a legelső nagybetűt kisbetűre kell lecserélni, vagyis csak a szóelején kell lekicsinyíteni a NAGYBETŰT 
!!!!
A minRequiredNonalpanumericCharacters segítségével azt szabhatjuk meg, hogy hány nem alfanumerikus karaktert (tehát nem szöveg vagy szám karaktert) kell tartalmazni a jelszónak.
A minRequiredPasswordLength-vel pedig a jelszó minimális hosszát állíthatjuk be.
A requiresQuestionAndAnswer, illetve requiresUniqueEmail tulajdonságokat azért állítsuk most be false-ra, hogy a példaalkalmazásban a PSE tesztelésénél ne kelljen ezeket is kitöltenünk!
A Default.aspx oldalunkra húzzunk egy CUW vezérlőt, majd konfiguráljuk be az alábbi módon:
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server"
RequireEmail="false" Email="a@b.c" UserName="Teszt Elek bácsi">
<WizardSteps>
<asp:CreateUserWizardStep runat="server">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep runat="server">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
Design módban továbbra is meg fog jelenni a CUW vezérlőnkben a biztonsági kérdés-válasz rész, de ez minket ne zavarjon, runtime módban már nem fog.
Egy fontos dolog, ha a CUW vezérlőnél kikapcsoljuk az e-mail cím bekérő részt (RequireEmail="false"), akkor muszáj beállítanunk egy alapértelmezett e-mail címet az Email tulajdonságon keresztül!
Ha most futtatjuk az alkalmazásunkat, akkor azt fogjuk tapasztalni, hogy a jelszó erősségének az ellenőrzése csak a Create User gombra való kattintás után fog végrehajtódni.
Ez nem túl felhasználóbarát megoldás. Ezen kétféleképpen segíthetünk. Az egyik megoldás, hogy Ajax-osítjuk a CUW vezérlőnket, a másik pedig, hogy megfertőzzük a CUW-ot egy kis PSE-vel és egy mutáns CUW_WITH_PSE –t (CWP) keltünk ezáltal életre. Válasszuk inkább az utóbbit!
Jelszóerősség megjelenítés szövegesen
Hozzunk létre egy új oldalt, és másoljuk át a Default.aspx fájl form1 tartalmát! Ahhoz, hogy a CUW-on belül el tudjunk helyezni egy PSE-t, először a CUW-ot template-té kell alakítanunk! Váltsunk át design módra, majd a CUW SmartTag-jében válasszuk ki a Customize Create User Step linket! Néhány másodpercig elszöszmötöl vele a VS, de utána már használhatjuk is a ContentTemplate-be legenerált táblázatot. A felesleges sorokat (Security Q&A) töröljük ki!
Húzzunk egy PSE vezérlőt a Password-ös sorba, illetve egy másikat a Confirm Password-ösbe! Az elsőt az alábbi módon konfiguráljuk be:
<ajaxToolkit:PasswordStrength ID="Pass_Strength_E_1" runat="server"
TargetControlID="Password"
MinimumSymbolCharacters="2"
PreferredPasswordLength="10">
</ajaxToolkit:PasswordStrength>
A MinimumSymbolCharacters a MemberShipProvider minRequiredNonalpanumericCharacters tulajdonságának felel meg, a PreferredPasswordLength pedig a minRequiredPasswordLength-nek.
Ha most futtatjuk az alkalmazásunkat, akkor láthatjuk, hogy miközben gépeljük be a jelszót, aközben folyamatosan változik a mellette megjelenített szöveges jellemzés.
Alapban 11 féle értékkel képes illetni a jelszavunkat a PSE: NonExsistent, Very Weak, Weak, Poor, Almost OK, Barely Acceptable, Average, Good, Strong, Excellent, Unbreakable!.
Ez mind szép és jó, de ha már a felhasználói élményről beszéltünk, akkor miért ne lokalizálhatnánk a jellemzéshez használt kulcsszavakat? Ehhez a TextStrengthDescription tulajdonságra lesz szükségünk. Nézzük meg, miként állítsuk be a másik PSE vezérlőnket a kellemesebb felhasználói felület érdekében:
<ajaxToolkit:PasswordStrength ID="Pass_Strength_E_2" runat="server"
TargetControlID="ConfirmPassword"
MinimumSymbolCharacters="2"
PreferredPasswordLength="10"
PrefixText="Erősség: "
TextStrengthDescriptions="Nagyon Gyengus; Gyengus; Alakulgat; Már majdnem jó; Erről van szó"
TextCssClass="TextIndicator_TextBox1" >
</ajaxToolkit:PasswordStrength>
A PrefixText segítségével a jelszóerősség standard előtagját változtathatjuk meg az alapértelmezett „Strength:”-ról valami magyarosabbra. 
A TextStrengthDescriptions tulajdonság, mint ahogyan azt fentebb is említettem, arra szolgál, hogy lokalizáljuk vele a jellemzésnél felhasználható értékeket. Pontosvesszővel elválasztott listaként kell felsorolni a lehetséges értékeket! A lista maximális hossza tíz, a minimális hossza pedig kettő lehet!
Végül pedig TextCssClass-szal lecserélhetjük az alapértelmezett rikító sárga háttérszínnel megáldott „címkénk” stílusát, valami kicsit szolidabb verzióra.
Indítsuk el az alkalmazásunkat, majd kezdjünk el gépelni a Confirm Password melletti szövegdobozba és az alábbi kép fog fogadni minket, amennyiben a TextIndicator_TextBox1 stílusosztályt az ACT Samples css fájljából copy/paste-eltük át:
BarIndicator-os jelszóerősség jellemzés
A szöveges jellemzés nem minden esetben a legjobb megoldás. Például ha 10féle jelszóerősség-jelzőt használunk, akkor a felhasználó nem tudja, hogy hány „szintet” kell még lépnie ahhoz, hogy elérje a megfelelő minősítést, ezért néha célszerűbb lehet BarIndicator-t használni Text helyett.
Hozzunk létre ismét egy új oldalt, és másoljuk át az előzőleg létrehozott oldal form1 tag-jének teljes tartalmát! A PSE vezérlők alá húzzunk be egy-egy címke vezérlőt és adjuk nekik az alábbi neveket: lbl_helper_1; lbl_helper_2! A Pass_Strength_E_1 nevű vezérlőn végezzünk el néhány apróbb módosítást:
<ajaxToolkit:PasswordStrength ID="Pass_Strength_E_1" runat="server" TargetControlID="Password"
PreferredPasswordLength="10"
MinimumSymbolCharacters="2"
MinimumNumericCharacters="2"
RequiresUpperAndLowerCaseCharacters="true"
HelpStatusLabelID="lbl_helper_1"
StrengthIndicatorType="BarIndicator"
BarBorderCssClass="BarBorder_TextBox2"
BarIndicatorCssClass="BarIndicator_TextBox2">
</ajaxToolkit:PasswordStrength>
A MinimumNumericCharacters-szel azt adhatjuk meg, hogy hány szám karakternek kell minimum lennie a jelszóban.
(Ezt provider szinten csak regexp-pel lehet megkövetelni, a passwordStrengthRegularExpression tulajdonság segítségével. Ilyenkor a minimum-os tulajdonságokat a provider figyelmen kívül hagyja! Az alapértelmezett jelszóházirend kibővítve szám „igényléssel” így néz ki: @\"(?=.{6,})(?=(.*\d){1,})(?=(.*\W){1,}) . (A PSE vezérlő nem képes külön reguláris kifejezés ellenőrzésre!!!)).
A RequiresUpperAndLowerCaseCharacters tulajdonság segítségével azt követelhetjük meg a jelszótól, hogy tartalmazzon kis-, illetve nagy-betűket is. Ha ez a tulajdonság igazra van állítva, akkor a MinimumUpperCaseCharacters, illetve a MinimumLowerCaseCharacters property-ken keresztül tudunk ezek számosságára egy-egy alsó korlátot megadni! (lentebb példa)
A HelpStatusLabelID egy olyan címke azonosítóját várja, ahova a PSE kiírhatja a még hiányzó karaktertípusokból a még szükséges karakterek számát (pl.: még 1 szám karakter).
A StrengthIndicatorType tulajdonság segítségével tudjuk átállítani az alapértelmezett szöveges (Text) minősítést „sávjelzős”-re (BarIndicator).
A BarBorderCssClass-nél beállított stílusosztállyal a sávjelző keretét tudjuk egyedivé alakítani.
A BarIndicatorCssClass-en keresztül a dinamikusan növekvő csík stílusát tudjuk állítgatni.
Ilyen beállítások mellett futtatva az alkalmazásunkat az alábbi UI fogad majd bennünket:
Amennyiben azt szeretnénk, hogy a BarIndicator-nak is mindig más legyen a színe, ha szintet lépünk, akkor a StrengthStyles tulajdonságra lesz szükségünk. A Confirm Password-höz tartozó PSE vezérlőknél mi ezt szeretnénk, ezért az alábbi módon állítsuk be:
<ajaxToolkit:PasswordStrength ID="Pass_Strength_E_2" runat="server"
TargetControlID="ConfirmPassword"
PreferredPasswordLength="10"
MinimumSymbolCharacters="2"
MinimumNumericCharacters="2"
RequiresUpperAndLowerCaseCharacters="true"
MinimumUpperCaseCharacters="2"
HelpStatusLabelID="lbl_helper_2"
StrengthIndicatorType="BarIndicator"
BarBorderCssClass="BarBorder_TextBox2"
StrengthStyles="BarIndicator_TextBox2_weak; BarIndicator_TextBox2_average; BarIndicator_TextBox2_good">
</ajaxToolkit:PasswordStrength>
A StrengthStyles tulajdonságnál hasonlóképpen kell megadni a stílusosztályok listáját, mint a TextStrengthDescriptions-nél a lehetséges minősítő értékeket.
Indítsuk el az alkalmazásunkat és teszteljük le a Pass_Strength_E_2 vezérlőket!
Amint az a képen is látszik az lbl_helper_2 címke szövege miatt teljesen szétesik a CUW vezérlőnk. Ezen kétféleképpen tudunk segíteni. Az egyik megoldás az, hogy nem használunk HelperLabel-t, a másik pedig az, hogy helyette inkább HelpHandle-t használunk!
Popup ablak használata a még hátralévő karakterek tájékoztatására
Hozzunk létre egy új oldalt, és ismét másoljuk át az előző oldalunk form1-jének a tartalmát. Az első PSE vezérlőnknél vegyük egy kicsit szigorúbbra a jelszóházirendet, mint ami eddig volt, vagyis legyen legalább 15 hosszú, legyen benne minimum 5 kis, illetve 5 nagybetű, végül pedig tartalmazzon legalább még 2 számot, illetve 3 speciális karaktert! Ez már talán túlságosan is szigorúra sikerült, mivel azonban ez csak egy példaalkalmazás, ezért ez még belefér .
Ha most ezt a szép kétsoros követelménylistát akarnánk kitenni egy HelpLabel-be, akkor azt hiszem, hogy egyetlen regisztrált tagunk se lenne. Ezért csináljuk azt, hogy ezt a szöveget egy alert ablakba jelenítsük meg, és csak akkor, ha a felhasználó rákattint a Segítség ikonra. Nos, ezt a HelpHandle segítségével tudjuk megvalósítani a PSE-ben, az alábbi módon:
<ajaxToolkit:PasswordStrength ID="Pass_Strength_E1" runat="server"
TargetControlID="Password"
StrengthIndicatorType="Text"
PreferredPasswordLength="15"
RequiresUpperAndLowerCaseCharacters="true"
MinimumUpperCaseCharacters="5"
MinimumLowerCaseCharacters="5"
MinimumNumericCharacters="3"
MinimumSymbolCharacters="2"
HelpHandleCssClass="TextIndicator_TextBox3_Handle"
DisplayPosition="BelowLeft"
TextCssClass="TextIndicator_TextBox3"
PrefixText="Jelszó erőssége: "
TextStrengthDescriptions="Nagyon Gyengus; Gyengus; Alakulgat; Na még egy kicsit; Már majdnem jó; Erről van szó">
</ajaxToolkit:PasswordStrength>
(Természetesen mivel a helplabel-öket nem használjuk, ezért töröljük is őket a markup-ból!)
A HelpHandleCssClass tulajdonság beállításával kapcsolhatjuk úgymond be ezt a HelpHandle szolgáltatást. Tehát ha ennek a tulajdonságnak nem állítunk be semmilyen stílusosztályt, akkor nem fogja a PSE külön alert ablakba feldobni a még hiányzó karakterek listáját. Sajnos a popup ablakban, illetve a HelpLabel-ben megjelenő szöveget nem tudjuk lokalizálni, mivel ezt az ACT szerelvény resource-ai közül olvassa ki a rendszer! 
A DisplayPosition tulajdonság segítségével a jelszóerősség minősítő szöveg (vagy csík) elhelyezkedését tudjuk szabályozni a TextBox-hoz képest. Az alapértelmezett elhelyezés: a szövegdoboz jobb oldala mellett jelenik meg az indikátor (RightSide). A DisplayPosition az alábbi értékeket veheti fel: RightSide, AboveRight, AboveLeft, LeftSide, BelowRight, BelowLeft.
Azt mondhatnánk, hogy ez már egész jól használható és pofás is, de sajnos azáltal, hogy szigorítottunk a jelszóházirenden, kicsit felborult az arányrendszere a PSE-nek. Ugyanis alapból az arányokat az alábbi módon számítja ki:
– 50%-ot tesz a latba a jelszó hossza (L)
– 15%-ot a szám karakterek számossága (N)
– 15%-ot a kis, és nagybetűk száma (C)
– 20%-ot a speciális karakterek számossága (S)
A fenti beállítások mellett a L,N,C,S százalékos eloszlása körülbelül az alábbira módosul: 40,15,30,15 (vagy valami hasonló)
A PSE-vel ezt a változást a CalculationWeightings tulajdonságon keresztül tudjuk közölni.
A CW-n belül pontosvesszővel elválasztva kell megadni ezt a négy értéket (L;N;C;S – fontos a sorrend!!!) úgy, hogy az összegük 100-ra jöjjön ki, mivel százalékokról van szó.
Ezzel a tudással felvértezve a második PSE vezérlőt így állítsuk be:
<ajaxToolkit:PasswordStrength ID="Pass_Strength_E2" runat="server"
TargetControlID="ConfirmPassword"
StrengthIndicatorType="BarIndicator"
PreferredPasswordLength="15"
RequiresUpperAndLowerCaseCharacters="true"
MinimumUpperCaseCharacters="5"
MinimumLowerCaseCharacters="5"
MinimumNumericCharacters="3"
MinimumSymbolCharacters="2"
CalculationWeightings="40;15;30;15"
BarIndicatorCssClass="BarIndicator_TextBox2"
BarBorderCssClass="BarBorder_TextBox2"
HelpHandleCssClass="TextIndicator_TextBox3_Handle"
HelpHandlePosition="LeftSide">
</ajaxToolkit:PasswordStrength>
A HelpHandlePosition segítségével elviekben a help icon helyzetét lehetne módosítani a szövegdobozhoz képest. Gyakorlatban teljesen mindegy mit állítunk be, ugyanis mindig a bal felső sarkánál fog megjelenni.
Mellesleg ennél a tulajdonságnál is ugyanazokat az értékeket tudjuk megadni, mint a DisplayPosition-nél.
A fenti képen látható validátor hibaüzenet azért jelent meg, mert a ConfirmPassword TextBox elvesztette a fókuszt azáltal, hogy rákattintottunk a kérdőjel ikonra.
Remélem ezzel a rövid kis cikkel sikerült betekintést nyújtani a PasswordStrengthExtender vezérlő használatába.
DOTNET érthetően... (főleg Silverlight) 