Πολλοί ιστότοποι που απαιτούν πιστοποιήσεις σύνδεσης εφαρμόζουν μια ρύθμιση ασφαλείας που συχνά αναφέρεται ως απαιτήσεις πολυπλοκότητας κωδικού πρόσβασης. Αυτές οι απαιτήσεις εξασφαλίζουν ότι οι κωδικοί πρόσβασης των χρηστών είναι επαρκώς ισχυροί και δεν μπορούν εύκολα να σπάσουν.

Τι συνιστά ένας ισχυρός κωδικός πρόσβασης; Λοιπόν, αυτό εξαρτάται από το ποιος ρωτάς. Ωστόσο, οι παραδοσιακοί παράγοντες που συμβάλλουν στη δύναμη του κωδικού πρόσβασης περιλαμβάνουν το μήκος, την πολυπλοκότητα και την απρόβλεπτη κατάσταση. Για να διασφαλιστεί η ισχύς του κωδικού πρόσβασης, πολλοί ιστότοποι απαιτούν κωδικούς πρόσβασης χρήστη να είναι αλφαριθμητικοί εκτός από ένα συγκεκριμένο μήκος.

Σε αυτό το σεμινάριο, θα δημιουργήσουμε μια φόρμα που θα δίνει στον χρήστη ζωντανή ανατροφοδότηση σχετικά με το εάν ο κωδικός πρόσβασης έχει ικανοποιήσει επαρκώς τις απαιτήσεις πολυπλοκότητας που θα δημιουργήσουμε.

Πριν ξεκινήσουμε, ας πάρουμε μια κορυφή από τη στιγμή που θα μοιάσει το τελικό μας προϊόν (κάντε κλικ για μια επίδειξη):

Σημείωση: Ο σκοπός αυτού του εκπαιδευτικού είναι να δείξει πώς μπορεί να γραφτεί ένα απλό σενάριο χρησιμοποιώντας javascript και jQuery για την επιβολή των απαιτήσεων πολυπλοκότητας του κωδικού πρόσβασης. Θα μπορείτε να προσθέσετε πρόσθετες απαιτήσεις στο σενάριο αν χρειαστεί. Ωστόσο, σημειώστε ότι στο παράδειγμα αυτό δεν καλύπτεται η επικύρωση της μορφής (διακομιστής και πελάτης), η υποβολή φόρμας και άλλα θέματα.

Βήμα 1: HTML του εκκινητή

Πρώτα θέλουμε να λάβουμε τον βασικό κώδικα εκκίνησης HTML. Θα χρησιμοποιήσουμε τα εξής:

<-- Form HTML Here -->

Βήμα 2: Φόρμα HTML

Τώρα ας προσθέσουμε τη σήμανση που θα χρησιμοποιηθεί για τη φόρμα μας. Θα περιστρέψουμε τα στοιχεία της φόρμας σε στοιχεία λίστας για καλύτερη δομή και οργάνωση.

Password Verification
Username:
Password:
Register

Ακολουθεί μια εξήγηση του κώδικα που χρησιμοποιήσαμε:

• span στοιχεία - αυτά θα χρησιμοποιηθούν για την οπτική εμφάνιση των στοιχείων εισόδου (όπως θα δείτε αργότερα στο CSS)
• type="password" - αυτό είναι ένα χαρακτηριστικό γνώρισμα HTML5 για στοιχεία φόρμας. Στα υποστηριζόμενα προγράμματα περιήγησης, οι χαρακτήρες σε αυτό το πεδίο θα αντικατασταθούν από μαύρες κουκίδες που κρύβουν τον πραγματικό κωδικό πρόσβασης στην οθόνη.

Εδώ έχουμε ό, τι έχουμε μέχρι τώρα:

Βήμα 3: HTML κουτί πληροφοριών κωδικού πρόσβασης

Τώρα, προσθέστε το HTML που θα ενημερώνει τον χρήστη σχετικά με τις απαιτήσεις πολυπλοκότητας που πληρούνται. Αυτό το πλαίσιο θα κρυφτεί από προεπιλογή και θα εμφανιστεί μόνο όταν το πεδίο "κωδικός πρόσβασης" είναι εστιασμένο.

Password must meet the following requirements:
At least one letter
At least one capital letter
At least one number
Be at least 8 characters

Σε κάθε στοιχείο λίστας δίνεται ένα συγκεκριμένο χαρακτηριστικό ταυτότητας. Αυτά τα αναγνωριστικά θα χρησιμοποιηθούν για να στοχεύσουν κάθε απαίτηση πολυπλοκότητας και θα δείξουν στον χρήστη εάν η απαίτηση έχει τηρηθεί ή όχι. Επίσης, κάθε στοιχείο θα ονομάζεται "έγκυρο" αν ο κωδικός πρόσβασης του χρήστη έχει ικανοποιήσει την απαίτηση ή είναι άκυρος εάν δεν το έχει ικανοποιήσει (αν το πεδίο εισαγωγής είναι κενό, καμία από τις απαιτήσεις δεν έχει ικανοποιηθεί, εξ ου και η προεπιλεγμένη κλάση " Μη έγκυρο").

Εδώ έχουμε ό, τι έχουμε μέχρι τώρα:

Βήμα 4: Δημιουργία στυλ φόντου

Θα δώσουμε στα στοιχεία της σελίδας μας ένα βασικό στυλ. Ακολουθεί μια επισκόπηση του τι θα κάνουμε στο CSS:

• Προσθέστε ένα χρώμα φόντου - χρησιμοποίησα το # EDF1F4
• Προσθέστε μια εικόνα φόντου με υφή (δημιουργήθηκε στο Photoshop)
• Ρυθμίστε τη στοίβα γραμματοσειράς μας - Θα χρησιμοποιήσουμε μια ωραία sans-serif γραμματοσειρά στοίβα
• Καταργήστε / τροποποιήστε ορισμένες προεπιλεγμένες ρυθμίσεις του προγράμματος περιήγησης

body {background:#edf1f4 url(bg.jpg);font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;font-size:16px;color:#444;}ul, li {margin:0;padding:0;list-style-type:none;}

Βήμα 5: Δημιουργία στυλ φόντου

Τώρα θα στυλίσουμε το κύριο δοχείο και θα το τοποθετήσουμε στη σελίδα. Θα εφαρμόσουμε επίσης ορισμένα στυλ στην ετικέτα μας H1.

#container {width:400px;padding:0px;background:#fefefe;margin:0 auto;border:1px solid #c4cddb;border-top-color:#d3dbde;border-bottom-color:#bfc9dc;box-shadow:0 1px 1px #ccc;border-radius:5px;position:relative;}h1 {margin:0;padding:10px 0;font-size:24px;text-align:center;background:#eff4f7;border-bottom:1px solid #dde0e7;box-shadow:0 -1px 0 #fff inset;border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */text-shadow:1px 1px 0 #fff;}

Είναι σημαντικό να σημειώσουμε ότι πρέπει να δώσουμε στην ετικέτα μας H1 ακτίνα ακρών στις δύο πρώτες γωνίες της. Εάν δεν το κάνουμε, το χρώμα φόντου του H1 θα επικαλύπτει τις στρογγυλεμένες γωνίες του γονικού στοιχείου (#container) και θα μοιάζει με αυτό:

Προσθέτωντας border-radius στο στοιχείο H1 διασφαλίζει ότι οι κορυφαίες γωνίες μας θα παραμείνουν στρογγυλεμένες. Εδώ έχουμε ό, τι έχουμε μέχρι τώρα:

Βήμα 6: Στυλ CSS για τη φόρμα

Τώρα ας σχεδιάσουμε τα διάφορα στοιχεία της φόρμας ξεκινώντας από τα στοιχεία της λίστας μέσα στη φόρμα:

form ul li {margin:10px 20px;}form ul li:last-child {text-align:center;margin:20px 0 25px 0;

Χρησιμοποιήσαμε το :last-child επιλογέα για να επιλέξετε το τελευταίο στοιχείο στη λίστα (κουμπί) και να το δώσετε κάποια επιπλέον απόσταση. (Σημειώστε ότι αυτός ο επιλογέας δεν υποστηρίζεται σε ορισμένα προγράμματα περιήγησης παλαιού τύπου). Στη συνέχεια, ας στυλ μας input στοιχεία:

input {padding:10px 10px;border:1px solid #d5d9da;border-radius:5px;box-shadow: 0 0 5px #e8e9eb inset;width:328px; /* 400 (#container) - 40 (li margins) -  10 (span paddings) - 20 (input paddings) - 2 (input borders) */font-size:1em;outline:0; /* remove webkit focus styles */}input:focus {border:1px solid #b9d4e9;border-top-color:#b6d5ea;border-bottom-color:#b8d4ea;box-shadow:0 0 5px #b9d4e9;

Παρατηρήστε ότι υπολογίσαμε το πλάτος του στοιχείου εισόδου μας λαμβάνοντας το #container πλάτος (400px) και αφαιρώντας τα περιθώρια, τα paddings και τα περιγράμματα που εφαρμόζονται στα γονικά στοιχεία της εισόδου. Χρησιμοποιήσαμε επίσης το outline για την κατάργηση των προεπιλεγμένων μορφών εστίασης WebKit. Τέλος, ας εφαρμόσουμε ορισμένα στυλ στα άλλα στοιχεία της φόρμας μας:

label {color:#555;}#container span {background:#f6f6f6;padding:3px 5px;display:block;border-radius:5px;margin-top:5px;}

Τώρα έχουμε κάτι που μοιάζει με αυτό:

Βήμα 7: Στυλ κουμπιών

Τώρα πρόκειται να στυλ το στοιχείο κουμπιών μας. Θα χρησιμοποιήσουμε ορισμένα στυλ CSS3, ώστε οι χρήστες με νεότερα προγράμματα περιήγησης να έχουν καλύτερη εμπειρία. Αν ψάχνετε για μια μεγάλη πηγή κατά τη δημιουργία κλίσεων φόντου στο CSS3, ελέγξτε έξω Τελευταία γεννήτρια κλίσεων CSS .

button {background: #57a9eb; /* Old browsers */background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */border:1px solid #326fa9;border-top-color:#3e80b1;border-bottom-color:#1e549d;color:#fff;text-shadow:0 1px 0 #1e3c5e;font-size:.875em;padding:8px 15px;width:150px;border-radius:20px;box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;}button:active {background: #3a76c4; /* Old browsers */background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */box-shadow:none;text-shadow:0 -1px 0 #1e3c5e;}

Βήμα 8: Πλαίσιο πληροφοριών κωδικού πρόσβασης

Τώρα πρόκειται να στυλίσουμε το κουτί που ενημερώνει τους χρήστες αν πληρούν τις απαιτήσεις του κωδικού πρόσβασης. Πρώτον, θα στυλίσουμε το στοιχείο που περιέχει (#pswd_info).

#pswd_info {position:absolute;bottom:-75px;bottom: -115px9; /* IE Specific */right:55px;width:250px;padding:15px;background:#fefefe;font-size:.875em;border-radius:5px;box-shadow:0 1px 3px #ccc;border:1px solid #ddd;}

Τώρα ας προσθέσουμε κάποιο στυλ στο στοιχείο H4:

#pswd_info h4 {margin:0 0 10px 0;padding:0;font-weight:normal;}

Τέλος, πρόκειται να χρησιμοποιήσουμε το CSS ::before επιλογέα για να προσθέσετε ένα "τρίγωνο προς τα πάνω". Αυτός είναι ένας γεωμετρικός χαρακτήρας ο οποίος μπορεί να εισαχθεί χρησιμοποιώντας την αντίστοιχη οντότητα UNICODE. Κανονικά σε HTML θα χρησιμοποιούσατε την οντότητα HTML του χαρακτήρα (▲). Ωστόσο, επειδή το προσθέτουμε σε CSS, πρέπει να χρησιμοποιήσουμε την τιμή UNICODE (25B2) που προηγείται από μια ανάστροφη κάθετο.

#pswd_info::before {content: "25B2";position:absolute;top:-12px;left:45%;font-size:14px;line-height:14px;color:#ddd;text-shadow:none;display:block;}

Τώρα έχουμε αυτό:

Βήμα 9: Ισχύουσες και άκυρες καταστάσεις

Ας προσθέσουμε κάποια στυλ στις απαιτήσεις μας. Εάν η απαίτηση έχει τηρηθεί, θα της δώσουμε μια κατηγορία "έγκυρη". Εάν δεν έχει επιτευχθεί, θα πάρει μια κατηγορία "άκυρη" (προεπιλεγμένη κλάση). Όσον αφορά τα εικονίδια, χρησιμοποιώ δύο εικονίδια 16 × 16 εικονοστοιχείων από το Σετ εικονιδίων μεταξιού .

.invalid {background:url(../images/invalid.png) no-repeat 0 50%;padding-left:22px;line-height:24px;color:#ec3f41;}.valid {background:url(../images/valid.png) no-repeat 0 50%;padding-left:22px;line-height:24px;color:#3a7d34;}

Επειδή δεν έχουμε συμπεριλάβει τη λειτουργία JavaScript που θα αλλάξει δυναμικά τις κλάσεις "έγκυρη" και "μη έγκυρη", όλες οι απαιτήσεις θα εμφανίζονται ως μη έγκυρες (θα το αλλάξουμε αργότερα). Εδώ έχουμε ό, τι έχουμε μέχρι τώρα:

Απόκρυψη του κουτιού

Τώρα που έχουμε τα πάντα στυλ ακριβώς όπως το θέλουμε, θα αποκρύψουμε το πλαίσιο πληροφοριών κωδικού πρόσβασης. Θα αλλάξουμε την ορατότητα του χρήστη με τη χρήση του JavaScript. Ας προσθέσουμε τον ακόλουθο κανόνα:

#pswd_info {display:none;}

Βήμα 10: Πιάστε το πεδίο

Εδώ είναι αυτό που θέλουμε να επιτύχουμε με το σενάριό μας:

• Όταν είναι επιλεγμένο το πεδίο κωδικού πρόσβασης (: εστίαση), δείξτε το
• Κάθε φορά που ο χρήστης πληκτρολογεί ένα νέο χαρακτήρα στο πεδίο κωδικού πρόσβασης, ελέγξτε και δείτε αν ο χαρακτήρας αυτός πληροί έναν από τους ακόλουθους κανόνες πολυπλοκότητας κωδικού πρόσβασης:
  • Τουλάχιστον ένα γράμμα
  • Τουλάχιστον ένα κεφαλαίο γράμμα
  • Τουλάχιστον ένας αριθμός
  • Τουλάχιστον οκτώ χαρακτήρες
• Αν αυτό συμβαίνει, επισημάνετε τον κανόνα αυτό ως "έγκυρο"
• Εάν δεν το κάνει, επισημάνετε αυτόν τον κανόνα ως "μη έγκυρο"
• Όταν το πεδίο κωδικού πρόσβασης δεν είναι επιλεγμένο (': blur'), ​​αποκρύψτε το

Βήμα 11: Λήψη της εγκατάστασης του jQuery

Πρώτον, πρέπει να προσθέσουμε το jQuery στη σελίδα μας. Θα χρησιμοποιήσουμε την φιλοξενούμενη έκδοση. Θέλουμε επίσης να συνδεθούμε με το αρχείο "script.js", στο οποίο θα γράψουμε τον κωδικό που απαιτείται για τη δοκιμή ελέγχου κωδικού πρόσβασης. Έτσι, προσθέστε τα εξής στο δικό σας ετικέτα:

Στο αρχείο "script.js", θα ξεκινήσουμε με κάποιο βασικό κώδικα εκκίνησης jQuery για το script μας:

$(document).ready(function() {//code here});

Βήμα 12: Ρύθμιση των ενεργοποιήσεων συμβάντων

Ουσιαστικά έχουμε τρία γεγονότα για τα οποία θα ακούσουμε:

1. "Πληκτρολόγιο" στο πεδίο εισαγωγής κωδικού πρόσβασης
(ενεργοποιεί κάθε φορά που ο χρήστης πιέζει ένα πλήκτρο στο πληκτρολόγιο)
2. "Εστίαση" στο πεδίο εισαγωγής κωδικού πρόσβασης
(ενεργοποιεί κάθε φορά που επιλέγεται το πεδίο κωδικού πρόσβασης από το χρήστη)
3. "Blur" στο πεδίο εισαγωγής κωδικού πρόσβασης
(ενεργοποιείται όποτε το πεδίο κωδικού πρόσβασης δεν είναι επιλεγμένο)

Όπως μπορείτε να δείτε, όλα τα γεγονότα που ακούμε είναι στο πεδίο εισαγωγής κωδικού πρόσβασης. Σε αυτό το παράδειγμα, θα επιλέξουμε όλα τα πεδία εισαγωγής όπου ο τύπος είναι ίσος με τον κωδικό πρόσβασης. Το jQuery μας επιτρέπει επίσης να "αλυσιάζουμε" τα γεγονότα μαζί, αντί να πληκτρολογούμε το καθένα. Για παράδειγμα, αντί να πληκτρολογείτε αυτό το κείμενο:

$('input[type=password]').keyup(function() {// keyup event code here});$('input[type=password]').focus(function() {// focus code here});$('input[type=password]').blur(function() {// blur code here});

Μπορούμε να συνδέσουμε όλα τα συμβάντα μαζί και να πληκτρολογήσουμε τα εξής:

$('input[type=password]').keyup(function() {// keyup code here}).focus(function() {// focus code here}).blur(function() {// blur code here});

Έτσι, με αυτή τη γνώση, ας δημιουργήσουμε τον κώδικα που θα εμφανίσει ή θα αποκρύψει το πλαίσιο πληροφοριών κωδικού πρόσβασης, ανάλογα με το αν το πεδίο εισαγωγής κωδικού πρόσβασης έχει επιλεγεί από το χρήστη ή όχι:

$('input[type=password]').keyup(function() {// keyup code here}).focus(function() {$('#pswd_info').show();}  ) .blur (λειτουργία () {$('#pswd_info').hide();}  ) · 

Θα παρατηρήσετε τώρα ότι κάνοντας κλικ στο πεδίο εισαγωγής κωδικού πρόσβασης, το πλαίσιο πληροφοριών κωδικού πρόσβασης θα είναι ορατό. Ομοίως, κάνοντας κλικ εκτός του πεδίου εισαγωγής κωδικού πρόσβασης, το πλαίσιο πληροφοριών κωδικού πρόσβασης θα αποκρύπτεται.

Βήμα 13: Έλεγχος των κανόνων πολυπλοκότητας

Το μόνο που πρέπει να κάνουμε τώρα είναι να ελέγξει η δέσμη ενεργειών τη τιμή στο πεδίο κωδικού πρόσβασης κάθε φορά που εισάγεται ένας νέος χαρακτήρας (χρησιμοποιώντας το συμβάν "keyup"). Έτσι, μέσα στο $('input[type=password]').keyup θα προσθέσουμε τον ακόλουθο κώδικα:

// set password variablevar pswd = $(this).val();

Αυτό θέτει μια μεταβλητή με την ονομασία «pswd» που αποθηκεύει την τρέχουσα τιμή πεδίου κωδικού κάθε φορά που υπάρχει ένα συμβάν keyup. Θα χρησιμοποιήσουμε αυτήν την τιμή για τον έλεγχο καθενός από τους κανόνες πολυπλοκότητας.

Επικύρωση του μήκους

Τώρα, μέσα στην ίδια λειτουργία πληκτρολόγησης, ας προσθέσουμε τα εξής:

//validate the lengthif ( pswd.length < 8 ) {$('#length').removeClass('valid').addClass('invalid');}  αλλού {$('#length').removeClass('invalid').addClass('valid');}

Αυτό ελέγχει αν η διάρκεια της τρέχουσας τιμής κωδικού είναι μικρότερη από 8 χαρακτήρες. Εάν είναι, πάρτε μια «άκυρη» τάξη. Αν είναι μεγαλύτερος από 8 χαρακτήρες, παίρνει μια 'έγκυρη' κλάση.

Επικύρωση με κανονικές εκφράσεις

Όπως είδατε παραπάνω, έχουμε απλώς μια δήλωση if / else που ελέγχει εάν η απαίτηση πολυπλοκότητας έχει τηρηθεί. Εάν πληρούται η απαίτηση περί πολυπλοκότητας, δίνουμε στο αναγνωριστικό του αναγνωριστικό μια κατηγορία "έγκυρη". Αν δεν τηρηθεί, παίρνει μια κατηγορία "άκυρη".

Οι υπόλοιπες απαιτήσεις μας απαιτούν να χρησιμοποιούμε κανονικές εκφράσεις για να ελέγξουμε τους κανόνες πολυπλοκότητας. Έτσι, ας προσθέσουμε τα εξής:

//validate letterif ( pswd.match(/[A-z]/) ) {$('#letter').removeClass('invalid').addClass('valid');}  αλλού {$('#letter').removeClass('valid').addClass('invalid');}  // επικυρώστε το κεφάλαιο letterif (pswd.match (/ [AZ] /)) {$('#capital').removeClass('invalid').addClass('valid');}  αλλού {$('#capital').removeClass('valid').addClass('invalid');}  // validate numberif (pswd.match (/  d /)) {$('#number').removeClass('invalid').addClass('valid');}  αλλού {$('#number').removeClass('valid').addClass('invalid');}

Ακολουθεί μια επεξήγηση των τριών εντολών if / else που χρησιμοποιήσαμε:

[Az]

Αυτές οι εκφράσεις ελέγχουν για να βεβαιωθεί ότι έχουν εισαχθεί τουλάχιστον ένα γράμμα από Α έως Ζ (κεφαλαία) ή από το ζ (πεζά)

[AZ]

Αυτή η έκφραση ελέγχει για να βεβαιωθεί ότι έχει εισαχθεί τουλάχιστον ένα κεφαλαίο γράμμα

ρε

Αυτό θα ελέγξει για τα ψηφία 0 έως 9

Βήμα 14: Δοκιμάστε το

Αυτό είναι το μόνο που υπάρχει σε αυτό! Μπορείτε να προσθέσετε περισσότερα σε αυτό, αν θέλετε. Θα μπορούσατε να προσθέσετε περισσότερους κανόνες πολυπλοκότητας, θα μπορούσατε να προσθέσετε μια μέθοδο υποβολής ή θα μπορούσατε να προσθέσετε ό, τι θεωρείτε απαραίτητο.