Gebruikersnaam:

Wachtwoord:

`: Containers voor labels en invoervelden, die helpen bij de styling en organisatie.

* `` en ``:

* `label`:Biedt een tekstlabel voor het invoerveld. Het kenmerk 'for' moet overeenkomen met de 'id' van het invoerveld waarmee het is geassocieerd.

* `input type="text"`:Creëert een tekstinvoerveld voor de gebruikersnaam. `name="gebruikersnaam"` is belangrijk – de code aan de serverzijde zal deze naam gebruiken om toegang te krijgen tot de door de gebruiker ingevoerde waarde. `vereist` maakt het veld verplicht.

* ``: Creëert een wachtwoordinvoerveld. Het `type="password"` attribuut maskeert de invoer terwijl de gebruiker typt. `name='wachtwoord'' wordt gebruikt door de code aan de serverzijde. `vereist` maakt het veld verplicht.

* `Inloggen `: De knop Verzenden die het indienen van het formulier activeert.

* `

`: Een tijdelijke aanduiding om foutmeldingen van de server weer te geven als de authenticatie mislukt.

* ` `: Links naar uw JavaScript-bestand voor validatie aan de clientzijde of andere interacties.

2. Front-end (CSS-styling - `style.css`)

```css

lichaam {

lettertypefamilie:schreefloos;

achtergrondkleur:#f4f4f4;

weergave:flex;

rechtvaardigen-inhoud:centrum;

items uitlijnen:centreren;

min-hoogte:100vh;

}

.login-container {

achtergrondkleur:#fff;

opvulling:20px;

grensradius:8px;

vakschaduw:0 0 10px rgba(0, 0, 0, 0.1);

breedte:300px;

}

.formuliergroep {

marge-onder:15px;

}

etiket {

weergave:blok;

marge-onder:5px;

}

invoer[type=”tekst”],

invoer[type="wachtwoord"] {

breedte:100%;

opvulling:8px;

rand:1px effen #ccc;

randradius:4px;

doosgrootte:randdoos; /* Voeg opvulling en rand toe aan de totale breedte en hoogte van het element */

}

knop {

achtergrondkleur:#4CAF50;

kleur:wit;

opvulling:10px 15px;

rand:geen;

randradius:4px;

cursor:aanwijzer;

breedte:100%;

}

knop:zweef {

achtergrondkleur:#3e8e41;

}

.foutmelding {

kleur:rood;

marge bovenaan:10px;

}

```

Deze CSS biedt een basisstijl om het inlogformulier te centreren, de invoervelden en de knop vorm te geven en een visuele indicator voor foutmeldingen te bieden.

3. Front-End (JavaScript - `script.js` - Optionele validatie aan de clientzijde)

```javascript

document.getElementById('loginForm').addEventListener('submit', function(event) {

const gebruikersnaam =document.getElementById('gebruikersnaam').value;

const wachtwoord =document.getElementById('wachtwoord').waarde;

const errorMessageDiv =document.getElementById('errorMessage');

errorMessageDiv.textContent =''; // Wis eerdere fouten

if (!gebruikersnaam || !wachtwoord) {

errorMessageDiv.textContent ='Voer zowel gebruikersnaam als wachtwoord in.';

gebeurtenis.preventDefault(); // Voorkom het indienen van formulieren

opbrengst;

}

// U kunt hier complexere validatie aan de clientzijde toevoegen, zoals controles van de wachtwoordsterkte.

});

```

Dit JavaScript voegt een validatiecontrole aan de clientzijde toe om te controleren of zowel de gebruikersnaam als het wachtwoord zijn ingevuld voordat het formulier naar de server wordt verzonden. Het is optioneel, maar verbetert de gebruikerservaring door onmiddellijke feedback te geven.

4. Back-End (Node.js met Express - voorbeeld)

Dit is een eenvoudig voorbeeld waarbij Node.js en het Express-framework worden gebruikt. Je moet deze installeren:

``` bash

npm installeer express body-parser bcrypt

```

* `express`: Een webapplicatieframework voor Node.js.

* `body-parser`: Middleware om verzoekteksten te parseren.

* `bcrypt`: Bibliotheek voor het veilig hashen van wachtwoorden. (Belangrijk voor de veiligheid!)

```javascript

const express =vereisen('express');

const bodyParser =require('body-parser');

const bcrypt =vereisen('bcrypt');

const-app =express();

const poort =3000;

// In-memory gebruikersdatabase (vervangen door een echte database zoals MongoDB of PostgreSQL)

const gebruikers =[]; // Array van gebruikersobjecten {gebruikersnaam, wachtwoordHash}

app.use(bodyParser.urlencoded({ uitgebreid:false })); // Parseer URL-gecodeerde lichamen

app.use(bodyParser.json()); // Parseer JSON-lichamen

app.use(express.static('openbaar')); // Serveer statische bestanden (HTML, CSS, JS) vanuit de 'public' directory

app.get('/', (req, res) => {

res.sendFile(__mapnaam + '/public/login.html'); // Bedien de inlogpagina

});

app.post('/login', async (req, res) => {

const { gebruikersnaam, wachtwoord } =req.body;

const gebruiker =gebruikers.find(u => u.gebruikersnaam ===gebruikersnaam);

als (gebruiker) {

// Vergelijk het opgegeven wachtwoord met de opgeslagen wachtwoord-hash

const wachtwoordMatch =wachten op bcrypt.compare (wachtwoord, gebruiker.wachtwoordHash);

if (wachtwoordMatch) {

// Authenticatie succesvol

res.send('Inloggen gelukt!'); // In een echte applicatie zou u doorverwijzen naar een dashboard of een sessiecookie instellen.

} anders {

// Ongeldig wachtwoord

res.status(401).send('Ongeldige gebruikersnaam of wachtwoord');

}

} anders {

// Gebruiker niet gevonden

res.status(401).send('Ongeldige gebruikersnaam of wachtwoord');

}

});

app.post('/register', async (req, res) => {

const { gebruikersnaam, wachtwoord } =req.body;

// Controleer of de gebruikersnaam al bestaat

if (users.find(u => u.gebruikersnaam ===gebruikersnaam)) {

return res.status(400).send('Gebruikersnaam bestaat al');

}

// Hash het wachtwoord

const saltRounds =10; // Of meer voor sterkere hashing

const wachtwoordHash =wacht op bcrypt.hash (wachtwoord, saltRounds);

// Sla de nieuwe gebruiker op in de database

gebruikers.push({ gebruikersnaam, wachtwoordHash });

res.status(201).send('Gebruiker succesvol geregistreerd');

});

app.listen(poort, () => {

console.log(`Server luistert op http://localhost:${port}`);

});

```

Uitleg van de back-endcode:

1. Importeren: Importeert de benodigde modules:`express`, `body-parser` en `bcrypt`.

2. Initialisatie: Creëert een Express-applicatie-instantie (`app`) en stelt de poort in.

3. Middleware:

* `bodyParser.urlencoded({ extended:false })`:Parseert URL-gecodeerde verzoekteksten (gegevens verzonden vanuit HTML-formulieren). `extended:false` gebruikt de ingebouwde querystring-bibliotheek, terwijl `extended:true` de `qs`-bibliotheek gebruikt, die complexere objectstructuren mogelijk maakt.

* `bodyParser.json()`:Parseert JSON-verzoekteksten.

* `express.static('public')`:Levert statische bestanden (HTML, CSS, JavaScript) vanuit de `public` directory. Dit is waar u uw `login.html`, `style.css` en `script.js` bestanden plaatst.

4. Route voor het bedienen van de inlogpagina (`/`):

* `app.get('/', ...)`:Definieert een route die GET-verzoeken naar het hoofdpad (`/`) afhandelt.

* `res.sendFile(__dirname + '/public/login.html')`:Stuurt het `login.html` bestand naar de client. `__dirname` is de huidige map van het script, zodat het bestandspad correct is.

5. Route voor het afhandelen van aanmeldingsinzendingen (`/login`):

* `app.post('/login', ...)`:Definieert een route die POST-verzoeken naar het `/login` pad afhandelt. Hier worden de gegevens van het inlogformulier verzonden.

* `req.body`:Bevat de gegevens die vanuit het formulier zijn verzonden. Dankzij `body-parser` kunt u toegang krijgen tot de gebruikersnaam en het wachtwoord met behulp van `req.body.username` en `req.body.password`.

* `users.find(u => u.username ===gebruikersnaam)`:Zoekt in de `users` array naar een gebruiker met de overeenkomende gebruikersnaam. (In een echte toepassing zou u uw database doorzoeken.)

* Wachtwoordhashing met `bcrypt`:

* `bcrypt.compare(password, user.passwordHash)`:Dit is het cruciale onderdeel voor de beveiliging. Het vergelijkt het door de gebruiker ingevoerde wachtwoord in platte tekst met de opgeslagen *hash* van het wachtwoord. `bcrypt` handelt het zoutproces automatisch af. Dit is veel veiliger dan het opslaan van wachtwoorden in leesbare tekst.

* Authenticatielogica:

* Als een gebruiker wordt gevonden en het wachtwoord overeenkomt, stelt u doorgaans een sessiecookie in om de gebruiker te authenticeren en deze door te sturen naar een ingelogd gebied. In dit voorbeeld verzendt het alleen de melding "Inloggen succesvol!" bericht.

* Als de gebruiker niet wordt gevonden of als het wachtwoord niet overeenkomt, wordt er een foutmelding verzonden (`401 Unauthorized`). Het front-end JavaScript kan deze foutmelding vervolgens aan de gebruiker weergeven.

6. Registratieroute

* Een registratieroute toegevoegd zodat nieuwe gebruikers aan het systeem kunnen worden toegevoegd

* Wachtwoorden worden niet opgeslagen, maar gehasht om de veiligheid te garanderen

7. De server starten:

* `app.listen(port, ...)`:Start de Express-server op de opgegeven poort.

Belangrijke overwegingen en best practices op het gebied van beveiliging:

* Database: Vervang de in-memory `users` array door een echte database (bijvoorbeeld MongoDB, PostgreSQL, MySQL). Gebruik een databasebibliotheek (zoals Mongoose voor MongoDB of Sequelize voor PostgreSQL/MySQL) om met de database te communiceren.

* Wachtwoordhashing: *Nooit* wachtwoorden in leesbare tekst opslaan. Gebruik altijd een sterk algoritme voor het hashen van wachtwoorden, zoals `bcrypt` (zoals weergegeven in het voorbeeld). `bcrypt` omvat salting, wat het voor aanvallers veel moeilijker maakt om wachtwoorden te kraken, zelfs als ze de database in handen krijgen. Gebruik `bcrypt.hash()` om wachtwoorden te hashen wanneer gebruikers zich registreren, en `bcrypt.compare()` om het ingevoerde wachtwoord te vergelijken met de opgeslagen hash tijdens het inloggen.

* Invoervalidatie: Valideer gebruikersinvoer aan zowel de clientzijde (voor gebruikerservaring) als de serverzijde (voor beveiliging). Sanitiseer invoer om injectieaanvallen te voorkomen (bijvoorbeeld SQL-injectie, XSS).

* Sessiebeheer: Gebruik sessies om de aanmeldingsstatus van de gebruiker te behouden. Nadat u succesvol bent ingelogd, slaat u een sessie-ID op in een cookie in de browser van de klant. Bij volgende verzoeken kan de server de sessie-ID gebruiken om de gebruiker te identificeren zonder dat deze opnieuw hoeft in te loggen. Bibliotheken zoals `express-session` kunnen helpen bij het beheren van sessies.

* HTTPS: Gebruik altijd HTTPS (SSL/TLS) om de communicatie tussen de client en de server te coderen. Dit voorkomt afluisteren en man-in-the-middle-aanvallen. Vraag een SSL-certificaat aan bij een certificeringsinstantie (bijvoorbeeld Let's Encrypt).

* Foutafhandeling: Implementeer de juiste foutafhandeling om te voorkomen dat gevoelige informatie in foutmeldingen terechtkomt. Registreer fouten veilig.

* CSRF-bescherming: Bescherm tegen Cross-Site Request Forgery (CSRF)-aanvallen door gebruik te maken van CSRF-tokens.

* Snelheidslimiet: Implementeer snelheidsbeperking om brute-force-aanvallen op het inlogeindpunt te voorkomen.

Het voorbeeld uitvoeren:

1. Projectmap maken: Maak een map voor uw project (bijvoorbeeld `login-app`).

2. Bestanden maken: Maak de volgende bestanden in de projectmap:

* `login.html` (kopieer de HTML-code)

* `style.css` (kopieer de CSS-code)

* `script.js` (kopieer de JavaScript-code)

* `server.js` (of `app.js`, of hoe u uw Node.js-serverbestand ook wilt noemen - kopieer de Node.js-code)

* Maak een `public` map en plaats `login.html`, `style.css` en `script.js` erin.

3. Installeer afhankelijkheden: Open een terminal in de projectmap en voer het volgende uit:

``` bash

npm installeer express body-parser bcrypt

```

4. Start de server: Voer in de terminal het volgende uit:

``` bash

knooppuntserver.js

```

5. Openen in browser: Open uw webbrowser en ga naar `http://localhost:3000`. U zou de inlogpagina moeten zien.

Vergeet niet dat dit een eenvoudig voorbeeld is. Voor een echte toepassing moet u de juiste database-integratie, sessiebeheer en beveiligingsmaatregelen implementeren.