3E e 3I Sia: Sistema di login semplificato che include un CAPTCHA testuale
Sistema di login semplificato che include un CAPTCHA testuale
1. Obiettivo dell'Esercizio
Imparare a gestire i moduli (form), confrontare stringhe di testo e utilizzare le funzioni JavaScript per generare codici casuali.
Suggerimenti per l'accessibilità DSA:
Font Leggibile: Useremo un font senza grazie (sans-serif).
Colori: Contrasto elevato tra testo e sfondo.
Codice Commentato: Spiegazioni brevi e dirette.
2. La Struttura HTML (`index.html`)
Questa pagina contiene il modulo di accesso. Abbiamo aggiunto un'area dedicata al CAPTCHA che cambia ogni volta che la pagina viene caricata.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Login Accessibile</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h1>Accedi al Portale</h1>
<form id="loginForm">
<label for="username">Nome Utente:</label>
<input type="text" id="username" placeholder="Inserisci il tuo nome" required>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Inserisci la password" required>
<div class="captcha-box">
<p>Copia questo codice:</p>
<span id="captcha-code"></span>
<button type="button" onclick="generaCaptcha()" class="btn-refresh">🔄 Cambia</button>
</div>
<input type="text" id="captcha-input" placeholder="Scrivi qui il codice" required>
<button type="submit" class="btn-login">Entra</button>
</form>
<p id="messaggio-errore" style="color: red;"></p>
</div>
<script src="script.js"></script>
</body>
</html>
3. Il Motore JavaScript (`script.js`)
Qui gestiamo la logica: generare il codice, verificare se i dati sono corretti e "reindirizzare" l'utente.
1. Credenziali di prova
const USER_CORRETTO = "classe3ISia";
const PASS_CORRETTA = "itebassi2026";
// 2. Funzione per creare il codice CAPTCHA
function generaCaptcha() {
// Usiamo solo lettere e numeri facili da leggere (niente 0 o O)
const caratteri = "abcdefghjkmnopqrstuvwyzABCDEFGHJKLMNPQRSTUVWXYZ23456789";
let codiceGenerato = "";
// Ciclo per scegliere 5 caratteri a caso
for (let i = 0; i < 5; i++) {
const indice = Math.floor(Math.random() * caratteri.length);
codiceGenerato += caratteri.charAt(indice);
}
// Scriviamo il codice nel quadratino della pagina HTML
document.getElementById("captcha-code").innerText = codiceGenerato;
}
// 3. Controllo del Modulo quando l'utente clicca "Entra"
document.getElementById("loginForm").addEventListener("submit", function(event) {
// Blocchiamo l'invio automatico per controllare i dati con JS
event.preventDefault();
// Prendiamo quello che l'utente ha scritto nei campi
const userInserito = document.getElementById("username").value;
const passInserita = document.getElementById("password").value;
const captchaInserito = document.getElementById("captcha-input").value;
// Prendiamo il captcha reale mostrato a schermo
const captchaReale = document.getElementById("captcha-code").innerText;
// 4. LA LOGICA DI CONTROLLO
// Controlliamo prima Username e Password
if (userInserito === USER_CORRETTO && passInserita === PASS_CORRETTA) {
// Se i dati sono ok, controlliamo il CAPTCHA
if (captchaInserito.toUpperCase() === captchaReale) {
// TUTTO CORRETTO: Vai alla dashboard
alert("Accesso autorizzato! Caricamento area riservata...");
window.location.href = "dashboard.html";
} else {
// Se il captcha è sbagliato
mostraErrore("Il codice CAPTCHA non è corretto.");
generaCaptcha(); // Cambiamo codice per sicurezza
}
} else {
// Se username o password sono sbagliati
mostraErrore("Credenziali non valide. Riprova.");
}
});
// Funzione di supporto per scrivere messaggi d'errore
function mostraErrore(testo) {
const boxErrore = document.getElementById("messaggio-errore");
boxErrore.innerText = testo;
}
// Quando la pagina si carica, genera subito il primo CAPTCHA
window.onload = generaCaptcha;
4. Spiegazione Passo-Passo (Per lo Studente)
Cos'è un CAPTCHA?
È un test per capire se chi sta scrivendo è un essere umano o un computer. In questo caso, usiamo un codice di testo casuale.
Come funziona il codice?
1. Variabili di controllo: Abbiamo deciso che l'utente è `studente` e la password è `javascript2024`.
2. `Math.random()`: Questa funzione dice al computer di scegliere un carattere a caso dalla nostra lista.
3. `event.preventDefault()`: Molto importante! Serve a dire al browser: "Ehi, non ricaricare la pagina subito, prima fammi controllare se i dati sono giusti con JavaScript".
4. Il confronto (`===`): Il computer controlla se tre cose sono vere contemporaneamente:
Il nome è giusto? E
La password è giusta? E
Il codice scritto è uguale a quello mostrato?
5. Stile Visivo (`style.css`)
Un design pulito aiuta a concentrarsi.
body {
font-family: 'Arial', sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
padding: 50px;
}
.login-container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
width: 350px;
}
label { display: block; margin-top: 15px; font-weight: bold; }
input {
width: 100%;
padding: 10px;
margin-top: 5px;
box-sizing: border-box; /* Evita che l'input esca dai bordi */
}
.captcha-box {
background: #eee;
padding: 10px;
margin: 20px 0;
text-align: center;
border: 2px dashed #999;
}
#captcha-code {
font-size: 24px;
font-weight: bold;
letter-spacing: 5px;
color: #2c3e50;
}
.btn-login {
width: 100%;
padding: 12px;
background-color: #27ae60;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
6. La Pagina Area Riservata (`dashboard.html`)
Questa pagina è molto semplice: serve a dare un feedback immediato allo studente che il suo codice ha funzionato.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Dashboard Riservata</title>
<style>
/* Stile rapido per rendere la pagina accogliente */
body {
font-family: 'Arial', sans-serif;
background-color: #e8f5e9; /* Un verde leggero che indica successo */
text-align: center;
padding-top: 100px;
}
.welcome-box {
background: white;
display: inline-block;
padding: 40px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
h1 { color: #2e7d32; }
.btn-back {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #34495e;
color: white;
text-decoration: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="welcome-box">
<h1>🎉 Benvenuto nella Dashboard!</h1>
<p>Hai superato il controllo dei dati e del <strong>CAPTCHA</strong>.</p>
<p>Questa è una zona sicura del sito.</p>
<a href="index.html" class="btn-back">Esci e Torna al Login</a>
</div>
</body>
</html>
Come collegare tutto (Sintesi per lo studente)
Per far funzionare l'intero progetto, lo studente deve avere questi quattro file nella stessa cartella:
1. index.html: Il modulo dove inserire i dati.
2. script.js: Il "cervello" che controlla se la password e il CAPTCHA sono giusti.
Nota: Nel file script.js che abbiamo scritto prima, c'è il comando `window.location.href = "dashboard.html";`.
Questo comando dice al browser: "Se è tutto ok, apri il file della dashboard".
3. dashboard.html`: Il traguardo finale.
4. style.css contiene lo stile grafico sull'index.html
LINK cartella compressa dell'esercizio:
https://laboratoriosia.altervista.org/3DSIA/informatica/eserciziphp/filemanager_didattico2/fileman/uploads/captcha_per_la_classe_3I.zip
Commenti
Posta un commento