* Γνώση Υπολογιστών >> Αντιμετώπιση προβλημάτων > >> Οι κωδικοί πρόσβασης

Πώς δημιουργείτε μια σελίδα σύνδεσης με πεδία ονόματος χρήστη και κωδικού πρόσβασης;

Η δημιουργία μιας σελίδας σύνδεσης περιλαμβάνει τόσο το Front-end (HTML, CSS, JavaScript) για τη διεπαφή χρήστη όσο και το back-end (γλώσσα από την πλευρά του διακομιστή και τη βάση δεδομένων) για τον έλεγχο ταυτότητας και τη διαχείριση δεδομένων. Ακολουθεί μια κατανομή του τρόπου δημιουργίας μιας σελίδας σύνδεσης, καλύπτοντας τόσο το εμπρόσθιο και το απλοποιημένο παράδειγμα προσέγγισης back-end.

1. Front -end (δομή HTML - `login.html`)

`` html

Σύνδεση

`` `

Βασικά σημεία:

* `: Δηλώνει τον τύπο εγγράφου ως HTML5.

* `: Καθορίζει την κωδικοποίηση χαρακτήρων για το έγγραφο.

* `: Ρυθμίζει το παράθυρο προβολής για σχεδιασμό που ανταποκρίνεται.

* ``: Ορίζει τον τίτλο που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης. * ` <link rel ="stylesheet" href ="style.css"> `: Σύνδεσμοι στο αρχείο CSS για στυλ. * `<div>`: Ένα δοχείο Div για να κρατήσει τη φόρμα σύνδεσης και τα στοιχεία του, διευκολύνοντας το στυλ. * ` <H2> Σύνδεση </h2> `: Μια επικεφαλίδα για τη φόρμα σύνδεσης. * <form id ="loginform" action ="/login" method ="post"> `: Ο πυρήνας της φόρμας: * `id =" loginform "`:Παρέχει ένα μοναδικό αναγνωριστικό για τη φόρμα, επιτρέποντάς σας να το χειριστείτε με JavaScript. * `action ="/login "`: Βασικά σημαντικό! Αυτό καθορίζει τη διεύθυνση URL στον διακομιστή σας που θα χειριστεί το αίτημα σύνδεσης όταν υποβληθεί η φόρμα. Αντικαταστήστε το `/login` με την πραγματική διαδρομή στο τελικό σημείο σύνδεσης του διακομιστή σας. * `method =" post "`:Υποδεικνύει ότι τα δεδομένα φόρμας θα σταλούν στον διακομιστή χρησιμοποιώντας τη μέθοδο post HTTP, η οποία είναι γενικά πιο ασφαλής για ευαίσθητα δεδομένα όπως κωδικούς πρόσβασης. * `<div>`: Δοχεία για ετικέτες και πεδία εισόδου, βοηθώντας στο στυλ και την οργάνωση. * `<label for =" username ">` και `<input type =" text "id =" username "name =" username "απαιτείται>`: * `label`:Παρέχει μια ετικέτα κειμένου για το πεδίο εισόδου. Το χαρακτηριστικό `for` πρέπει να ταιριάζει με το 'id' του πεδίου εισόδου με το οποίο σχετίζεται. * `Εισαγωγή Type =" Text "`:Δημιουργεί ένα πεδίο εισόδου κειμένου για το όνομα χρήστη. Το `name =" username "` είναι σημαντικό-ο κώδικας από την πλευρά του διακομιστή θα χρησιμοποιήσει αυτό το όνομα για να αποκτήσει πρόσβαση στην τιμή που εισάγεται από τον χρήστη. Το "Απαιτείται" καθιστά το πεδίο υποχρεωτικό. * `<input type =" password "id =" password "name =" password "απαιτείται>`: Δημιουργεί ένα πεδίο εισόδου κωδικού πρόσβασης. Το χαρακτηριστικό `type =" password "` μάσκες την είσοδο ως τύπους χρήστη. Το `name =" κωδικός πρόσβασης "` χρησιμοποιείται από τον κωδικό από την πλευρά του διακομιστή. Το "Απαιτείται" καθιστά το πεδίο υποχρεωτικό. * `<Button Type =" Submit "> Σύνδεση </button> `: Το κουμπί υποβολής που ενεργοποιεί την υποβολή της φόρμας. * <div> </div> `: Ένα σύμβολο κράτησης θέσης για την εμφάνιση μηνυμάτων σφάλματος από το διακομιστή, εάν αποτύχει ο έλεγχος ταυτότητας. * <script src ="script.js"> </script> `: Σύνδεσμοι στο αρχείο JavaScript για οποιαδήποτε επικύρωση από την πλευρά του πελάτη ή άλλες αλληλεπιδράσεις. 2. Front -end (CSS styling - `style.css ') `` `CSS σώμα { γραμματοσειρά-οικογένεια:sans-serif; φόντο-χρώμα:#F4F4F4; Εμφάνιση:Flex; δικαιολογήστε το περιεχόμενο:κέντρο; ευθυγράμμιση-στοιχείων:κέντρο; Min-Upight:100VH; } .Login-Container { φόντο-χρώμα:#fff; Επεξεργασία:20px; Border-Radius:8px; Box-Shadow:0 0 10px RGBA (0, 0, 0, 0.1). Πλάτος:300px; } .form-group { Περιθώριο:15px; } Ετικέτα { Εμφάνιση:μπλοκ; Περιθώριο:5px; } είσοδος [Type ="Text"], είσοδος [type ="password"] { Πλάτος:100%. Επεξεργασία:8px; σύνορα:1px στερεό #ccc; Border-Radius:4px; μεγέθους κουτιού:Border-Box; / * Συμπεριλάβετε την επένδυση και τα σύνορα στο συνολικό πλάτος και το ύψος του στοιχείου */ } κουμπί { φόντο-χρώμα:#4CAF50; Χρώμα:Λευκό; Επεξεργασία:10px 15px; σύνορα:κανένα; Border-Radius:4px; δρομέας:δείκτης; Πλάτος:100%. } Κουμπί:Τοποθετήστε το δείκτη { φόντο-χρώμα:#3e8e41; } .error-message { Χρώμα:κόκκινο; Περιθώριο:10px; } `` ` Αυτό το CSS παρέχει βασικό στυλ για να κεντράρετε τη φόρμα σύνδεσης, να στυλ τα πεδία εισόδου και το κουμπί και να δώσετε μια οπτική ένδειξη για μηνύματα σφάλματος. 3. Front -end (JavaScript - `script.js` - Προαιρετική επικύρωση από την πλευρά του πελάτη) `` `javascript document.getElementById ('logInform'). const username =document.getElementById ('username'). const password =document.getElementById ('password'). const errorMessageDiv =document.getElementById ('errorMessage'); errorMessagediv.TextContent =''; // Καθαρίστε προηγούμενα σφάλματα αν (! username ||! password) { errorMessagediv.TextContent ='Παρακαλώ εισάγετε τόσο το όνομα χρήστη και τον κωδικό πρόσβασης. event.PreventDefault (); // Αποτροπή υποβολής φόρμας απόδοση; } // Μπορείτε να προσθέσετε πιο πολύπλοκη επικύρωση πελάτη εδώ, όπως οι έλεγχοι δύναμης κωδικού πρόσβασης. }); `` ` Αυτό το JavaScript προσθέτει μια επικύρωση από την πλευρά του πελάτη, ελέγξτε ότι τόσο τα πεδία χρήστη όσο και τα πεδία κωδικού πρόσβασης έχουν συμπληρωθεί πριν υποβάλετε τη φόρμα στο διακομιστή. Είναι προαιρετικό, αλλά βελτιώνει την εμπειρία του χρήστη παρέχοντας άμεση ανατροφοδότηση. 4. Back -end (node.js με express - παράδειγμα) Αυτό είναι ένα βασικό παράδειγμα χρησιμοποιώντας το Node.js και το Express Framework. Θα χρειαστεί να τα εγκαταστήσετε: `` `bash NPM Εγκατάσταση Express Body-Parser Bcrypt `` ` * `express`: Ένα πλαίσιο εφαρμογών ιστού για το Node.js. * `body-parser`: Middleware για να αναλύσει τα σώματα αιτήματος. * `bcrypt`: Βιβλιοθήκη για τους κωδικούς πρόσβασης με ασφάλεια. (Είναι σημαντικό για την ασφάλεια!) `` `javascript const express =απαιτεί ('express'); const bodyparser =απαιτεί ('body-parser'); const bcrypt =απαιτεί ('bcrypt'); const app =express (); θύρα Const =3000; // Βάση δεδομένων χρήστη in-memory (αντικαταστήστε με μια πραγματική βάση δεδομένων όπως το MongoDB ή το PostgreSQL) Const Users =[]; // array αντικειμένων χρήστη {username, passwordHash} app.use (bodyparser.urlencoded ({extended:false})); // PARSE URL-κωδικοποιημένα σώματα app.use (bodyparser.json ()); // PARSE JSON BODIES app.use (express.static ('public')); // Σερβίρετε στατικά αρχεία (HTML, CSS, JS) από τον κατάλογο «δημόσιου» app.get ('/', (req, res) => { res.sendfile (__ dirname + '/public/login.html'); // Σερβίρετε τη σελίδα σύνδεσης }); app.post ('/login', async (req, res) => { const {username, password} =req.body; const user =users.find (u => u.username ===όνομα χρήστη); αν (χρήστης) { // Συγκρίνετε τον παρεχόμενο κωδικό πρόσβασης με τον αποθηκευμένο κωδικό πρόσβασης const passwordMatch =περιμένετε bcrypt.compare (κωδικός πρόσβασης, user.passwordHash); αν (passwordMatch) { // Επέληξη ταυτότητας res.send ('Σύνδεση επιτυχίας!'); // Σε μια πραγματική εφαρμογή, θα ανακατευθύνετε σε ένα ταμπλό ή θα ρυθμίσετε ένα cookie περιόδου σύνδεσης. } αλλιώς { // Μη έγκυρος κωδικός πρόσβασης res.status (401) .SEND ('Μη έγκυρο όνομα χρήστη ή κωδικός πρόσβασης'); } } αλλιώς { // Ο χρήστης δεν βρέθηκε res.status (401) .SEND ('Μη έγκυρο όνομα χρήστη ή κωδικός πρόσβασης'); } }); app.post ('/register', async (req, res) => { const {username, password} =req.body; // Ελέγξτε εάν υπάρχει ήδη το όνομα χρήστη αν (users.find (u => u.username ===όνομα χρήστη)) { επιστροφή res.status (400) .Send ('username ήδη υπάρχει')? } // κατακερματίστε τον κωδικό πρόσβασης const saltrounds =10; // ή περισσότερο για ισχυρότερο κατακερματισμό const passwordHash =περιμένετε bcrypt.hash (κωδικός πρόσβασης, saltrounds); // Αποθηκεύστε τον νέο χρήστη στη βάση δεδομένων users.push ({username, passwordHash}); res.status (201) .send ('χρήστης που έχει καταχωρηθεί με επιτυχία'); }); app.listen (θύρα, () => { console.log (`server Ακρόαση στο http:// localhost:$ {port}`); }); `` ` Επεξήγηση του κώδικα back-end: 1. Εισαγωγές: Εισάγει τις απαραίτητες ενότητες:`express ',` body-parser' και `bcrypt`. 2. Αρχικοποίηση: Δημιουργεί μια ρητή εμφάνιση εφαρμογής (`App`) και ορίζει τη θύρα. 3. middleware: * `bodyparser.urlencoded ({extended:false})`:PARSES ORL-κωδικοποιημένα σώματα αίτησης (δεδομένα που αποστέλλονται από έντυπα HTML). `Extended:False` χρησιμοποιεί την ενσωματωμένη βιβλιοθήκη QueryString, ενώ το` Extended:True` χρησιμοποιεί τη βιβλιοθήκη `QS`, η οποία επιτρέπει πιο σύνθετες δομές αντικειμένων. * `bodyparser.json ()`:PARSES JSON BAUGIES ΑΙΤΗΣΗΣ. * `express.static ('public')`:εξυπηρετεί στατικά αρχεία (html, css, javascript) από τον κατάλογο `public`. Αυτό είναι όπου θα βάλετε το `login.html`,` style.css` και `script.js` αρχεία. 4. Διαδρομή για την εξυπηρέτηση της σελίδας σύνδεσης (`/`): * `app.get ('/', ...)`:Καθορίζει μια διαδρομή που χειρίζεται παίρνει αιτήματα στη διαδρομή ρίζας (`/`). * `res.sendfile (__ dirname + '/public/login.html')`:στέλνει το αρχείο `login.html` στον πελάτη. `__dirname` είναι ο τρέχων κατάλογος του σεναρίου, εξασφαλίζοντας ότι η διαδρομή του αρχείου είναι σωστή. 5. Διαδρομή για τη διαχείριση της υποβολής σύνδεσης (`/login`): * `app.post ('/login', ...)`:Καθορίζει μια διαδρομή που χειρίζεται τα αιτήματα post στη διαδρομή `/login`. Αυτό είναι όπου αποστέλλονται τα δεδομένα φόρμας σύνδεσης. * `req.body`:περιέχει τα δεδομένα που αποστέλλονται από τη φόρμα. Χάρη στο `body-parser`, μπορείτε να έχετε πρόσβαση στο όνομα χρήστη και τον κωδικό πρόσβασης χρησιμοποιώντας` req.body.username` και `req.body.password`. * `users.find (u => u.username ===όνομα χρήστη)`:Αναζητά τον πίνακα `χρήστες για έναν χρήστη με το αντίστοιχο όνομα χρήστη. (Σε μια πραγματική εφαρμογή, θα ρωτήσατε τη βάση δεδομένων σας.) * Κωδικός πρόσβασης με `bcrypt`: * `bcrypt.compare (κωδικός πρόσβασης, user.passwordhash)`:Αυτό είναι το κρίσιμο μέρος για την ασφάλεια. Συγκρίνει τον κωδικό πρόσβασης που εισάγεται από τον χρήστη με το αποθηκευμένο * hash * του κωδικού πρόσβασης. `Bcrypt` χειρίζεται αυτόματα τη διαδικασία αλάτου. Αυτό είναι πολύ πιο ασφαλές από την αποθήκευση κωδικών πρόσβασης στο PlainText. * Λογική ελέγχου ταυτότητας: * Εάν βρεθεί ένας χρήστης και ο κωδικός πρόσβασης ταιριάζει, θα ορίσατε συνήθως ένα cookie περιόδου σύνδεσης για να πιστοποιήσετε τον χρήστη και να τα ανακατευθύνετε σε μια καταγεγραμμένη περιοχή. Σε αυτό το παράδειγμα, στέλνει απλώς μια "επιτυχημένη σύνδεση!" μήνυμα. * Εάν ο χρήστης δεν βρεθεί ή ο κωδικός πρόσβασης δεν ταιριάζει, στέλνει μια απάντηση σφάλματος (`401 μη εξουσιοδοτημένη '). Το JavaScript Front-end μπορεί στη συνέχεια να εμφανίσει αυτό το μήνυμα σφάλματος στον χρήστη. 6. Διαδρομή για την εγγραφή * Προστέθηκε μια διαδρομή μητρώου για να επιτρέπεται η προσθήκη νέων χρηστών στο σύστημα * Ο κωδικός πρόσβασης δεν αποθηκεύεται, αλλά έχει χασμουρητό για να εξασφαλίσει ασφάλεια 7. Ξεκινώντας τον διακομιστή: * `app.listen (θύρα, ...)`:Ξεκινά τον διακομιστή Express στην καθορισμένη θύρα. Σημαντικές εκτιμήσεις και βέλτιστες πρακτικές ασφαλείας: * Βάση δεδομένων: Αντικαταστήστε τον πίνακα "χρηστών" σε μια πραγματική βάση δεδομένων (π.χ. MongoDB, PostgreSQL, MySQL). Χρησιμοποιήστε μια βιβλιοθήκη βάσης δεδομένων (όπως το Mongoose για το MongoDB ή το Sequelize για το PostgreSQL/MySQL) για να αλληλεπιδράσετε με τη βάση δεδομένων. * Κωδικός πρόσβασης: * Ποτέ* αποθηκεύστε τους κωδικούς πρόσβασης σε plaintext. Χρησιμοποιείτε πάντα έναν ισχυρό αλγόριθμο hashing κωδικού πρόσβασης όπως το `bcrypt` (όπως φαίνεται στο παράδειγμα). Το "Bcrypt` περιλαμβάνει το Salting, γεγονός που καθιστά πολύ πιο δύσκολο για τους επιτιθέμενους να σπάσουν τους κωδικούς πρόσβασης ακόμη και αν αποκτήσουν τη βάση δεδομένων. Χρησιμοποιήστε το `bcrypt.hash () σε κωδικούς πρόσβασης κατακερματισμού όταν οι χρήστες εγγραφούν και` bcrypt.compare () `για να συγκρίνετε τον εισαγόμενο κωδικό πρόσβασης με το αποθηκευμένο hash κατά τη διάρκεια της σύνδεσης. * Επικύρωση εισόδου: Επικύρωση της εισόδου χρήστη τόσο στην πλευρά του πελάτη (για εμπειρία χρήστη) όσο και στην πλευρά του διακομιστή (για ασφάλεια). Απορρίψτε τις εισροές για την πρόληψη επιθέσεων έγχυσης (π.χ., SQL ένεση, XSS). * Διαχείριση περιόδου σύνδεσης: Χρησιμοποιήστε συνεδρίες για να διατηρήσετε την κατάσταση σύνδεσης του χρήστη. Μετά την επιτυχή σύνδεση, αποθηκεύστε ένα αναγνωριστικό περιόδου σύνδεσης σε ένα cookie στο πρόγραμμα περιήγησης του πελάτη. Στις επόμενες αιτήσεις, ο διακομιστής μπορεί να χρησιμοποιήσει το αναγνωριστικό περιόδου σύνδεσης για να προσδιορίσει τον χρήστη χωρίς να απαιτεί να συνδεθεί ξανά. Οι βιβλιοθήκες όπως η `express-session` μπορούν να βοηθήσουν στη διαχείριση των συνεδριών. * https: Χρησιμοποιείτε πάντα HTTPS (SSL/TLS) για να κρυπτογραφήσετε την επικοινωνία μεταξύ του πελάτη και του διακομιστή. Αυτό αποτρέπει την παρακολούθηση και τις επιθέσεις του ανθρώπου-σε-μεσαίας. Αποκτήστε ένα πιστοποιητικό SSL από μια αρχή πιστοποιητικών (π.χ., ας κρυπτογραφούν). * Χειρισμός σφαλμάτων: Εφαρμόστε τον σωστό χειρισμό σφαλμάτων για να αποφευχθεί η εκτέλεση ευαίσθητων πληροφοριών σε μηνύματα σφάλματος. Σφάλματα καταγραφής με ασφάλεια. * Προστασία CSRF: Προστατεύστε τις επιθέσεις πλαστογραφίας (CSRF) (CSRF), χρησιμοποιώντας τα μάρκες CSRF. * Περιορισμός ρυθμού: Εφαρμόστε τον περιορισμό του επιτοκίου για την πρόληψη επιθέσεων βίαιης δύναμης στο τελικό σημείο σύνδεσης. Πώς να εκτελέσετε το παράδειγμα: 1. Δημιουργία καταλόγου έργου: Δημιουργήστε έναν κατάλογο για το έργο σας (π.χ. `login-app`). 2. Δημιουργία αρχείων: Δημιουργήστε τα ακόλουθα αρχεία μέσα στον κατάλογο του έργου: * `login.html` (αντιγράψτε τον κωδικό HTML) * `style.css` (αντιγράψτε τον κωδικό CSS) * `script.js` (αντιγράψτε τον κωδικό JavaScript) * `server.js` (ή` app.js`, ή ό, τι θέλετε να ονομάσετε το αρχείο διακομιστή node.js - αντιγράψτε τον κωδικό node.js) * Δημιουργήστε ένα φάκελο `public` και βάλτε` login.html`, `style.css` και` script.js` μέσα σε αυτό. 3. Εγκατάσταση εξαρτήσεων: Ανοίξτε ένα τερματικό στον κατάλογο του έργου και εκτελέστε: `` `bash NPM Εγκατάσταση Express Body-Parser Bcrypt `` ` 4. Εκτελέστε τον διακομιστή: Στο τερματικό, τρέξτε: `` `bash Node Server.js `` ` 5. Ανοίξτε στο πρόγραμμα περιήγησης: Ανοίξτε το πρόγραμμα περιήγησης στο Web και μεταβείτε στο `http:// localhost:3000`. Θα πρέπει να δείτε τη σελίδα σύνδεσης. Θυμηθείτε ότι αυτό είναι ένα βασικό παράδειγμα. Για μια εφαρμογή πραγματικού κόσμου, θα χρειαστεί να εφαρμόσετε την κατάλληλη ενσωμάτωση βάσης δεδομένων, διαχείριση συνεδριών και μέτρα ασφαλείας. <div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="grad3"></div> </div> <div class="fanyedads"> <ul> <li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Troubleshooting/passwords/353176.html' >Πώς αποκτάτε πρόσβαση στο φάκελο κωδικού πρόσβασης εάν ο κατάλογος βρίσκεται κλειδωμένος. Κλειδώθηκα από όλε…</a> <li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Troubleshooting/passwords/353183.html' >Τι κάνετε όταν ξεχάσετε τον κωδικό πρόσβασής σας στο Whoshere; </a> </ul> </div> </div> <div class="woqinimaderwr24"> <div class="dibud23"> <div class="biaotidas51"> <div class="biaotidas511"><h3>Συναφής σύστασή</h3></div> <div class="butudasda"></div> </div> </div> <div class="dibud24"> <div class="dibud241"> <ul class="dsa31das"> <li><a href="http://www.221021.com/Troubleshooting/passwords/353013.html" target="_blank">Πού αποθηκεύεται ο κωδικός πρόσβασης ρίζας στο Ubuntu; </a></li> <li><a href="http://www.221021.com/Troubleshooting/passwords/354208.html" target="_blank">Όταν πηγαίνετε σε ασφαλή λειτουργία, ζητάτε ακόμα έναν κωδικό πρόσβασης; </a></li> <li><a href="http://www.221021.com/Troubleshooting/passwords/198876.html" target="_blank">Πώς να υπολογίσετε Administrator Password μου </a></li> <li><a href="http://www.221021.com/Troubleshooting/passwords/354034.html" target="_blank">Μπορείτε να αλλάξετε τον κωδικό πρόσβασης διαχειριστή από μη χρήστες στο XP; </a></li> <li><a href="http://www.221021.com/Troubleshooting/passwords/346206.html" target="_blank">Πώς το ICHANGE CASSPERATE CASSPERTY WINDERS LIVE Messenger; </a></li> </ul> </div> <div class="dibud242"> <div class="biaotidasoidasf3h4"> <h4>Τελευταία άρθρα</h4> <div class="nibushihenzaiyi"></div> </div> <ul class="thydghaodennrend"> <li><a href="http://www.221021.com/Troubleshooting/passwords/283487.html" target="_blank">Μπορεί κάποιος να έχει πολλά ονόματα χρήστη για μια σύνδεση στο gmail; </a></li> <li><a href="http://www.221021.com/Troubleshooting/passwords/351971.html" target="_blank">Πού εμφανίζεται ο κωδικός πρόσβασης CMOS; </a></li> <li><a href="http://www.221021.com/Troubleshooting/passwords/353937.html" target="_blank">Ποιες εντολές Linux μπορούν να χρησιμοποιηθούν για να ορίσετε ημερομηνία λήξης για έναν κωδικό πρόσβασης; </a></li> <li><a href="http://www.221021.com/Troubleshooting/passwords/284659.html" target="_blank">Θέλω να δημιουργήσω νέο λογαριασμό; </a></li> </ul> </div> </div> </div> <div class="dibudaohnagdsaw"> <div class="das342sd">Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </div> </div> </div> </body> </html>