Classi 3E e 3I: Login con Javascript e con max tre tentativi
Il modulo di accesso svolge un ruolo chiave nello sviluppo di siti Web, che autenticano l'accesso degli utenti ad altre risorse.
Ovviamente questo esempio è semplice e a scopo didattico per far vedere come è possibile utilizzare semplicemente delle funzioni in javascript per il controllo della password e dei tre tentativi.
L'applicazione è lato client e i codici di accesso all'area riservata sono visibili.
La soluzione migliore è usare linguaggi lato server come il Php con la gestione dei dati in Mysql e i campi con le password memorizzati con algoritmi di crittografia tipo Sha-256 dove è impossibile aprire la pagina php e leggere i dati di accesso.
Di seguito ci sono le tre pagine contenenti i codici.
1)La pagina Html che è il modulo di accesso con due campi di input
2) il file js per la convalida del modulo di accesso.
3) il foglio di stile le la gestione della pagina
4) la pagina html di risultato
Nel nostro esempio, abbiamo un modulo di accesso con due campi di input, ovvero nome utente e password, quando l'utente fa clic sul pulsante di accesso, la funzione di convalida JavaScript entra in azione.
Inoltre, nel file js c'è lo script che consente max tre tentativi di accesso all'utente, dopo il terzo tentativo tutti i campi vengono disabilitati.
var attempt = 3; //Variable to count number of attempts
............
attempt --; //Decrementing by one
.............
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
copia
File HTML: javascript_login.html
<html>
<head>
<title>Javascript Login Form Validation</title>
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JS File Here -->
<script src="js/login.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Javascript Login Form Validation</h2>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<input type="button" value="Login" id="submit" onclick="validate()"/>
</form>
<span><b class="note">Note : </b> Javascript Login con Validazione del form e max tre tentativi
<br/><b class="valid">User Name : Ciccio<br/>Password : Pippo</b></span>
</div>
</div>
</body>
</html>
File Javascript: login.js
Di seguito è riportato il codice JavaScript completo.
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate(){
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "Ciccio" && password == "Pippo"){
alert ("Login successfully");
window.location = "success.html"; // Redirecting to other page.
return false;
}
else{
attempt --;// Decrementing by one.
alert("You have left "+attempt+" attempt;");
// Disabling fields after 3 attempts.
if( attempt == 0){
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
File CSS: style.css
Styling degli elementi HTML.
/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Raleway);
h2{
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align:center;
border-radius: 10px 10px 0 0;
}
hr{
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container{
width: 900px;
height: 610px;
margin:35px auto;
font-family: 'Raleway', sans-serif;
}
div.main{
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: raleway;
float:left;
margin-top:50px;
}
input[type=text],input[type=password]{
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center{
font-size:32px;
}
.note{
color:red;
}
.valid{
color:green;
}
.back{
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button]{
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline:none;
}
input[type=button]:hover{
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
Commenti
Posta un commento