Πολλοί ιστότοποι που απαιτούν πιστοποιήσεις σύνδεσης εφαρμόζουν μια ρύθμιση ασφαλείας που συχνά αναφέρεται ως απαιτήσεις πολυπλοκότητας κωδικού πρόσβασης. Αυτές οι απαιτήσεις εξασφαλίζουν ότι οι κωδικοί πρόσβασης των χρηστών είναι επαρκώς ισχυροί και δεν μπορούν εύκολα να σπάσουν.
Τι συνιστά ένας ισχυρός κωδικός πρόσβασης; Λοιπόν, αυτό εξαρτάται από το ποιος ρωτάς. Ωστόσο, οι παραδοσιακοί παράγοντες που συμβάλλουν στη δύναμη του κωδικού πρόσβασης περιλαμβάνουν το μήκος, την πολυπλοκότητα και την απρόβλεπτη κατάσταση. Για να διασφαλιστεί η ισχύς του κωδικού πρόσβασης, πολλοί ιστότοποι απαιτούν κωδικούς πρόσβασης χρήστη να είναι αλφαριθμητικοί εκτός από ένα συγκεκριμένο μήκος.
Σε αυτό το σεμινάριο, θα δημιουργήσουμε μια φόρμα που θα δίνει στον χρήστη ζωντανή ανατροφοδότηση σχετικά με το εάν ο κωδικός πρόσβασης έχει ικανοποιήσει επαρκώς τις απαιτήσεις πολυπλοκότητας που θα δημιουργήσουμε.
Πριν ξεκινήσουμε, ας πάρουμε μια κορυφή από τη στιγμή που θα μοιάσει το τελικό μας προϊόν (κάντε κλικ για μια επίδειξη):
Σημείωση: Ο σκοπός αυτού του εκπαιδευτικού είναι να δείξει πώς μπορεί να γραφτεί ένα απλό σενάριο χρησιμοποιώντας javascript και jQuery για την επιβολή των απαιτήσεων πολυπλοκότητας του κωδικού πρόσβασης. Θα μπορείτε να προσθέσετε πρόσθετες απαιτήσεις στο σενάριο αν χρειαστεί. Ωστόσο, σημειώστε ότι στο παράδειγμα αυτό δεν καλύπτεται η επικύρωση της μορφής (διακομιστής και πελάτης), η υποβολή φόρμας και άλλα θέματα.
Πρώτα θέλουμε να λάβουμε τον βασικό κώδικα εκκίνησης HTML. Θα χρησιμοποιήσουμε τα εξής:
Password Verification <-- Form HTML Here -->
Τώρα ας προσθέσουμε τη σήμανση που θα χρησιμοποιηθεί για τη φόρμα μας. Θα περιστρέψουμε τα στοιχεία της φόρμας σε στοιχεία λίστας για καλύτερη δομή και οργάνωση.
Password Verification
Ακολουθεί μια εξήγηση του κώδικα που χρησιμοποιήσαμε:
span
στοιχεία - αυτά θα χρησιμοποιηθούν για την οπτική εμφάνιση των στοιχείων εισόδου (όπως θα δείτε αργότερα στο CSS) type="password"
- αυτό είναι ένα χαρακτηριστικό γνώρισμα HTML5 για στοιχεία φόρμας. Στα υποστηριζόμενα προγράμματα περιήγησης, οι χαρακτήρες σε αυτό το πεδίο θα αντικατασταθούν από μαύρες κουκίδες που κρύβουν τον πραγματικό κωδικό πρόσβασης στην οθόνη. Εδώ έχουμε ό, τι έχουμε μέχρι τώρα:
Τώρα, προσθέστε το 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
Σε κάθε στοιχείο λίστας δίνεται ένα συγκεκριμένο χαρακτηριστικό ταυτότητας. Αυτά τα αναγνωριστικά θα χρησιμοποιηθούν για να στοχεύσουν κάθε απαίτηση πολυπλοκότητας και θα δείξουν στον χρήστη εάν η απαίτηση έχει τηρηθεί ή όχι. Επίσης, κάθε στοιχείο θα ονομάζεται "έγκυρο" αν ο κωδικός πρόσβασης του χρήστη έχει ικανοποιήσει την απαίτηση ή είναι άκυρος εάν δεν το έχει ικανοποιήσει (αν το πεδίο εισαγωγής είναι κενό, καμία από τις απαιτήσεις δεν έχει ικανοποιηθεί, εξ ου και η προεπιλεγμένη κλάση " Μη έγκυρο").
Εδώ έχουμε ό, τι έχουμε μέχρι τώρα:
Θα δώσουμε στα στοιχεία της σελίδας μας ένα βασικό στυλ. Ακολουθεί μια επισκόπηση του τι θα κάνουμε στο CSS:
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;}
Τώρα θα στυλίσουμε το κύριο δοχείο και θα το τοποθετήσουμε στη σελίδα. Θα εφαρμόσουμε επίσης ορισμένα στυλ στην ετικέτα μας 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 διασφαλίζει ότι οι κορυφαίες γωνίες μας θα παραμείνουν στρογγυλεμένες. Εδώ έχουμε ό, τι έχουμε μέχρι τώρα:
Τώρα ας σχεδιάσουμε τα διάφορα στοιχεία της φόρμας ξεκινώντας από τα στοιχεία της λίστας μέσα στη φόρμα:
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;}
Τώρα έχουμε κάτι που μοιάζει με αυτό:
Τώρα πρόκειται να στυλ το στοιχείο κουμπιών μας. Θα χρησιμοποιήσουμε ορισμένα στυλ 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;}
Τώρα πρόκειται να στυλίσουμε το κουτί που ενημερώνει τους χρήστες αν πληρούν τις απαιτήσεις του κωδικού πρόσβασης. Πρώτον, θα στυλίσουμε το στοιχείο που περιέχει (#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;}
Τώρα έχουμε αυτό:
Ας προσθέσουμε κάποια στυλ στις απαιτήσεις μας. Εάν η απαίτηση έχει τηρηθεί, θα της δώσουμε μια κατηγορία "έγκυρη". Εάν δεν έχει επιτευχθεί, θα πάρει μια κατηγορία "άκυρη" (προεπιλεγμένη κλάση). Όσον αφορά τα εικονίδια, χρησιμοποιώ δύο εικονίδια 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;}
Εδώ είναι αυτό που θέλουμε να επιτύχουμε με το σενάριό μας:
Πρώτον, πρέπει να προσθέσουμε το jQuery στη σελίδα μας. Θα χρησιμοποιήσουμε την φιλοξενούμενη έκδοση. Θέλουμε επίσης να συνδεθούμε με το αρχείο "script.js", στο οποίο θα γράψουμε τον κωδικό που απαιτείται για τη δοκιμή ελέγχου κωδικού πρόσβασης. Έτσι, προσθέστε τα εξής στο δικό σας ετικέτα:
Στο αρχείο "script.js", θα ξεκινήσουμε με κάποιο βασικό κώδικα εκκίνησης jQuery για το script μας:
$(document).ready(function() {//code here});
Ουσιαστικά έχουμε τρία γεγονότα για τα οποία θα ακούσουμε:
Όπως μπορείτε να δείτε, όλα τα γεγονότα που ακούμε είναι στο πεδίο εισαγωγής κωδικού πρόσβασης. Σε αυτό το παράδειγμα, θα επιλέξουμε όλα τα πεδία εισαγωγής όπου ο τύπος είναι ίσος με τον κωδικό πρόσβασης. Το 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();} ) ·
Θα παρατηρήσετε τώρα ότι κάνοντας κλικ στο πεδίο εισαγωγής κωδικού πρόσβασης, το πλαίσιο πληροφοριών κωδικού πρόσβασης θα είναι ορατό. Ομοίως, κάνοντας κλικ εκτός του πεδίου εισαγωγής κωδικού πρόσβασης, το πλαίσιο πληροφοριών κωδικού πρόσβασης θα αποκρύπτεται.
Το μόνο που πρέπει να κάνουμε τώρα είναι να ελέγξει η δέσμη ενεργειών τη τιμή στο πεδίο κωδικού πρόσβασης κάθε φορά που εισάγεται ένας νέος χαρακτήρας (χρησιμοποιώντας το συμβάν "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 που χρησιμοποιήσαμε:
Αυτό είναι το μόνο που υπάρχει σε αυτό! Μπορείτε να προσθέσετε περισσότερα σε αυτό, αν θέλετε. Θα μπορούσατε να προσθέσετε περισσότερους κανόνες πολυπλοκότητας, θα μπορούσατε να προσθέσετε μια μέθοδο υποβολής ή θα μπορούσατε να προσθέσετε ό, τι θεωρείτε απαραίτητο.