Generare una password casuale con JavaScript
Questa applicazione potrebbe tornarci utile quando abbiamo un' area protetta nel nostro sito.
Potremmo inviarla ai nostri utenti per poi inserirla nei campi di registrazione. Di default, il numero dei caratteri che compongono la password, è 8. Nel codice, però, possiamo cambiare questa impostazione. Di seguito vedremo come fare questa piccolissima modifica.
Per rendere un pò più simpatico il generatore di password, l' ho realizzato con codice CSS. Passiamo a vedere prima questa parte per poi implementare il codice JavaScript.
Realizzazione del form
Prima di presentare la pagina completa e funzionante, diamo uno sguardo alla pagina di esempio senza codice JavaScript e realizzato solo con codice CSS.
Non avremo bisogno di tanto codice; per realizzare il form visto, ci avvarremo dei seguenti elementi:
- form#genera: il nome del form.
- fieldset: serve a raggruppare in maniera logica e strutturata una serie di elementi per l' inserimento dei dati.
- legend: serve ad anteporre una etichetta descrittiva prima del campo di testo o di altri elementi.
- input#button: il pulsante per poter generare la password.
- input#quanti: il campo di testo dal quale possiamo scgliere il numero di caratteri alfanumerici.
- input#password: il secondo campo di testo nel quale verrà visualizzata la password creata.
Passiamo adesso alla scrittura del codice degli elementi così come sono stati elencati:
form#genera {
width:500px;
border:2px dashed #666;
padding:5px;
}
form#genera p{margin:.2em 0} /* tag p discendente */
fieldset {
padding: .5em;
border:2px groove;
margin-bottom:10px;
}
legend {
font-variant:small-caps; /* rende tutto maiuscolo */
color:#600;
font-weight:bold;
}
input#button {
border:1px outset #300;
background:#600;
font-size:90%;
font-weight:bold;
color:#fff;
margin:10px .2em 10px 0;
}
input#quanti{ /* il campo di scelta; 8 di default */
margin:5px;
background:#ddd;
font-weight:bold;
}
input#password{/* campo di testo che genera la password */
margin:5px;
background:#ddd;
font-weight:bold;
display:block;
letter-spacing:3px; /* distanza tra due lettere */
} Tra i commenti ci sono alcune descrizioni del codice di stile. Per il resto non credo ci siamo particolari difficoltà. Tutto questo codice ci permette di ottenere il form che è avete visto all' inizio.
Inseriamo il codice JavaScript
Adesso dobbiamo implementare il codice JavaScript per poter ottenere la password casuale, oggetto di questo articolo. Il codice, anch'esso molto semplice, va inserito tra i tag <head> e </head> della pagina; esso è:
<script type="text/javascript" language="javascript">
<!--
var keylist = "abcdefghijklmnopqrstuvwxyz1234567890";
//var temp = ''
function generatepass(plength){
temp = '';
for (i=0; i<plength; i++)
temp += keylist.charAt(Math.floor(Math.random()*keylist.length));
return temp;
}
function populateform(enterlength){
document.genera.password.value = generatepass(enterlength);
}
-->
</script>
var keylist = "abcdefghijklmnopqrstuvwxyz1234567890";
È la lista dei caratteri da utilizzare per comporre la password. In questo caso caratteri alfanumerici. Se si vogliono utilizzare soltanto quelli numerici basta specificare
var keylist = "1234567890".
All' interno del tag <body> inseriremo il codice seguente:
<form name="genera" id="genera">
<fieldset>
<legend>Scegli la lunghezza della password:</legend>
<p><input type="text" name="quanti" id="quanti" size="2" value="8" /></p>
</fieldset>
<fieldset>
<legend>Premi il pulsante per generare la password</legend>
<input type="button" id="button" value="Genera Password" onClick="populateform(this.form.quanti.value)" />
<input type="text" size="30" name="password" id="password" />
</fieldset>
</form>
Come ho scritto all' inizio dell' articolo, avremmo potuto modificare il numero di caratteri che comporranno la nostra password, con una semplicissima modifica. Infatti, si cerchi il seguente rigo di codice:
<p>
<input type="text" name="quanti" id="quanti" size="2" value="8" />
</p>
8 è proprio il valore che dovremo cambiare nel caso volessimo un numero diverso di caratteri. Adesso vediamo il file completo e funzionante, dopo aver aggiunto il codice.
Una piccola raccomandazione: non modificare, o farlo con accortezza, il nome degli elementi del form. Potrebbe non esserci più "corrispondenza" tra quelli assegnati per l'esempio e quelli modificati da voi. Inoltre, su macchine con Windows XP Professional SP2, potrebbe apparire la barra di protezione, la quale avvisa se consentire contenuto attivo o meno. Trattandosi di un semplicissimo script, non ci sarà nessun problema se si decidesse per il SI.
Bye!!
| < Prec. | Succ. > |
|---|
