יצירת מד לבדיקת איכות סיסמה בזמן אמת

יצירת מד לבדיקת איכות סיסמה בזמן אמת

  • פרסומת

המאמר הבא ילמד אתכם איך ליצור מד לבדיקת איכות סיסמה בזמן אמת, כמו שניתן לראות כיום בדפי הרשמה של האתרים הגדולים כגון Twitter.com, Linkedin.com ועוד. לחצו על ״הדגמה״ בצד שמאל בשביל לראות את התוצאה הסופית.

הדוגמה שראיתם מורכבת משלוש שפות שונות: HTML, CSS ו- Javascript. בשביל להבין את המאמר הבא כדאי שיהיה לכם ידע בסיסי בשפות HTML ו- CSS. במאמר זה אני אתמקד בעיקר בבניית "המוח" של התוכנה בעזרת שפת Javascript.

שלב א' – בניית "שלד" המסמך בעזרת HTML

אנו נחלק את המסמך לשלושה חלקים: שדה הזנת הסיסמה, מד איכות הסיסמה (גרף + ציון מספרי), תא עם ציון מילולי ולחצן לשינוי מצב התווים (בין מוצפן ללא מוצפן). להלן הקוד המלא:

<div id="lockWrapper">
    <div id="switchWrapper">
        <div id="switch"></div>
            <p id="st">הצג תווים</p>
        </div>
        <input type="password" name="password" id="password">
        <p dir="rtl" id="verbalGrade">הזן סיסמה</p>
        <div id="checkBox">
        <span id="precentageBox">0%</span>
        <div id="innerBox"></div>
    </div>
</div>

שימו לב שלכל האלמנטים יש שם מקורי, שאליו נצמיד פונקציה בהמשך בעזרת JavaScript. את שדה הסיסמה הגדרתי כ- type="password" מה שאומר שהתווים יהיו מוצפנים כברירת מחדל, ובהמשך ניצור פונקציה שתאפשר לנו לשנות זאת.
את השדה id="checkBox" חלקתי לשני חלקים:

  • <span id="precentageBox"> – לציון מספרי מ-1 עד 100
  • <span id="innerBox"> – לציון בצורת גרף

שלב ב' – עיצוב המסמך בעזרת CSS

העיצוב כאן פשוט למדי. כדי ליצור תדמית של "ביטחון" יצרתי תמונה של מנעול בפוטושופ, שעל גביו נמצאים שדה הסיסמה והגרף. בנוסף יצרתי לחצן שמעביר בין מצב מוצפן ללא מוצפן. להלן התמונה של המנעול:

מנעול בפוטושופ

בהמשך אולי אף אכתוב מדריך המסביר איך ליצור מנעול בפוטושופ (תלוי ברמת ההתעניינות).
לגרף שלנו יצרתי רצועה עם קווים בשחור צהוב:

מנעול בפוטושופ

וללחצן הקטן והנחמד שלנו יצרתי תמונה המשלבת בתוכה את שני המצבים (מופעל וכבוי) בשביל לחסוך בזמן טעינת הדף וזאת משום שכל קובץ תמונה דורש שליחת בקשה נוספת לשרת – Http Request. כמה שפחות עדיף.

לחצן בשני מצבים - image stripes

בהמשך אנו נשתמש בשפת JavaScript כדי לשנות את מיקום התמונה ובכך ליצור אפקט של לחצן שזז ימינה ושמאלה. טכניקה זו נקראת Image Stripes ומומלץ להשתמש בה כמה שיותר. שימוש בטכניקה זו גם יעלה את ציונכם אצל מנועי החיפוש.

להלן הקוד המלא בשפת CSS:

body {background:url('lock/noiseBackground.jpg') repeat}
input {
    margin:5px auto;width:154px;
    height:22px;display:block;
    border:1px solid #444;
    border-radius:4px;
    box-shadow:inset 0 1px 1px #999,0 1px 0 #FFF;
}
#switchWrapper {margin:148px 21px 7px; overflow:auto;}
#switch {
    background:transparent url('lock/switch.png') no-repeat top right;
    height:17px;width:35px;
    cursor:pointer;float:right;
}
#lockWrapper p#st {
    margin:1px 5px;height:15px;
    font:bold 12px Arial;display:block;
    float:right;text-shadow:0 1px 0 #FFF;
}
#checkBox {
    width:154px;height:24px;border:1px solid #111;
    border-radius:4px;overflow:hidden;
    position:relative;margin:5px auto;
    background-color:#FFF
}
#innerBox {
    width:0;height:22px;
    background:url('lock/stripes.gif') no-repeat left top;
    border-radius:2px;margin:1px
}
#checkBox span {
    background-color:#FFF;opacity:0.7;
    position:absolute;
    top:2px;right:57px;
    width:40px;height:20px;
    border-radius:2px;text-align:center;
}
#lockWrapper {
    width:209px;height:298px;
    margin:10px auto;
    background:url('lock/lock.jpg') no-repeat;
    overflow:auto;
}
#lockWrapper p#verbalGrade {margin:0 auto; width:150px; text-align:center;}

שימו לב שלאלמנט #checkBox span אשר מכיל את הציון המספרי, הגדרתי position:absolute; כדי למקם אותו מעל לאלמנט #innerBox אשר מכיל את הגרף.

שלב ג' – בניית "המוח" של התוכנה בעזרת JavaScript

הגענו לחלק האהוב עלי – התכנות.
אך לפני שנתחיל בהסברים, צריך להבין ממה בעצם מורכבת סיסמה "איכותית":

קריטריונים ליצירת סיסמה איכותית

סיסמה איכותית צריכה להכיל:

  • 8 תווים לפחות
  • שלושה מתוך ארבעת הקריטריונים הבאים:
    • אות קטנה (a-z)
    • אות גדולה (A-Z)
    • תו סמל ([email protected]#$%^&*)
    • ספרה (0-9)

אלה הם הקריטריונים הבסיסיים, אך בנוסף להם קיימים עוד מספר קריטריונים ממוקדים אשר מורידים את ציון הסיסמה:

  • מספרים בסדר עולה או יורד. לדוגמה: 12345678
  • אותיות בסדר עולה או יורד. לדוגמה: abcdefg
  • תווים אשר חוזרים על עצמם. לדוגמה: EE, 77, $$ וכו'.

איך בודקים אילו תווים מכילה הסיסמה?

בעולם התכנות קיים מושג הנקרא Regular Expressions או בקיצור RegEx. המונח מתייחס לשיטה לסריקה ומציאת תו מסויים בטקסט נתון. זו בעצם "מיני" שפה אשר נותנת שם לכל סוגי התווים. המיני שפה הזו דומה בכל שפות התכנות. אופן השימוש אף הוא דומה בכל השפות למעט שינויים קטנים. להלן רשימה קצרה של שמות התווים:

  • \s – מייצג תו רווח (space)
  • \d – מייצג תו בודד שהוא ספרה (digit)
  • \w – מתייחס למילה המכילה תווים אלפנומריים בלבד וקו תחתי (alphanumeric + underscore)
  • \t – מתייחס לטאב (tab)
  • \n – מתייחס לשורה חדשה (new line)
  • [a-z] – מתייחס לתו בודד שהוא אות קטנה באנגלית
  • [A-Z] – מתייחס לתו בודד שהוא אות גדולה באנגלית

כמובן שהרשימה עוד ארוכה, אך אלו דוגמאות שימושיות מאד.
למי שרוצה הסבר מעמיק על השפה, אני ממליץ על האתר הזה: regular-expressions.info
אז איך משתמשים בכל הבלאגן הזה?
אם נרצה לדוגמה למצוא את כל הרווחים בטקסט נתון, נעשה זאת כך:

var str = "This is a string";
str.match(/\s/g);

שימו לב שכל RegEx מתחיל ונגמר ב- /. האות g בסוף אומרת לפונקציה להמשיך ולחפש את כל התווים התואמים (global) ולא להפסיק לאחר שנמצאה התאמה.

לאחר שהבנו איך ה- RegEx עובד, בואו נראה איך אנו מטמיעים זאת בתוכנה שלנו:

var field = document.getElementById('password');
field.onkeyup = function showPrecentage() {
    var grade = 0;  
    var str = field.value;
    var str = str.split('');
    for(var i=0;i<str.length;i++) {
        if(str[i].match(/[0-9]/)){grade+=4;}
    }
}

בשלב הראשון אנו בוחרים את האלמנט password שהוא שדה הזנת הסיסמה שלנו. לאחר מכן אנו מצמידים לו אירוע (event) אשר מופעל בכל פעם שנלחץ, או יותר נכון משוחרר מקש במקלדת (onKeyUp).
לאחר מכן אנו מפרקים את הסיסמה המוזנת (str.split('');) לתווים בודדים ואז בודקים אותם אחד אחד על ידי לולאת For (For Loop).
בתוך הלולאה אנו משתמשים ב- RegEx למציאת תווים שהם מספר בין 0 ל-9. על כל תו כזה אנו מעלים את הציון בארבע נקודות (grade+=4;).
לתוך הלולאה הכנסתי את כל הקריטריונים שדיברנו עליהם בהתחלה:

//אותיות קטנות
if(str[i].match(/[a-z]/)){LCchar++;}
//אותיות גדולות
if(str[i].match(/[A-Z]/)){UCchar++;}
//ספרות
if(str[i].match(/[0-9]/)){grade+=4;numChar++;}
//סמלים
if(str[i].match(/[[email protected]#$%^&*()]/)){grade+=6;symChar++;}
            
//הורדות:
//תווים שחוזרים על עצמם
if(lastChar==str[i]){grade-=repeatChar*4;repeatChar++;}
//אותיות קטנות שחוזרות על עצמן
if(/[a-z]/.test(lastChar) && /[a-z]/.test(str[i])){grade-=2;}
//אותיות גדולות שחוזרות על עצמן
if(/[A-Z]/.test(lastChar) && /[A-Z]/.test(str[i])){grade-=2;}
//ספרות שחוזרות על עצמן ו/או סדרות עולות ויורדות
if(/[0-9]/.test(lastChar) && /[0-9]/.test(str[i])){
    grade-=2;
    if(lastChar==str[i]+1 || lastChar==str[i]-1){grade-=6}
}
//הגדרת התו האחרון
lastChar = str[i];

יצירת לחצן להסתרת/הצגת התווים של הסיסמה

הרעיון של הלחצן הוא להציג או להסתיר את התווים של הסיסמה על ידי שינוי הסוג של שדה ההזנה (input) מ- type="password" ל- type="text":

var passSwitch = document.getElementById('switch');
var switchText = document.getElementById('st');
var inputType = 'pass';
passSwitch.onclick = function doThis() {
    if(inputType == 'pass') {
        passSwitch.style.backgroundPosition = 'bottom right';
        field.type = 'text';
        inputType = 'text';
        switchText.innerHTML = 'הסתר תווים';
    }
    else {
        passSwitch.style.backgroundPosition = 'top right';
        field.type = 'password';
        inputType = 'pass';
        switchText.innerHTML = 'הצג תווים';
    }
}

גם כאן אנו מצמידים אירוע (event) ללחצן שלנו, אשר מופעל בכל פעם שלוחצים על הלחצן (onClick). לאחר מכן קורים שלושה דברים:

passSwitch.style.backgroundPosition = 'bottom right';

זוכרים שדיברנו על Image Stripes? כאן אנו משנים את מיקום הרקע כדי ליצור אפקט של לחצן שזז.

field.type = 'text'

שינוי סוג השדה לטקסט כדי להפוך את התווים לגלויים

switchText.innerHTML = 'הסתר תווים'

שינוי הטקסט שליד הלחצן

עד כאן למאמר שלי על בניית מד לאיכות הסיסמה. אתם יכולים להשתמש בקוד במגוון תחומים, כל מה שצריך הוא שינוי קטן בקוד כדי שיתאים לצרכים שלכם. מקווה שאהבתם (ואם כן תלחצו לייק למעלה!).