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 esempiosenza codice JavaScript e realizzato solo con codice CSS.
Non avremo bisogno di tanto codice; per realizzare il form visto, ci avvarremo dei seguenti elementi:

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">
<!--
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.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati