簡易パスワード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function secret() {
	if (confirm("よろしいですか?")) {
		var id = document.form1.id.value;
		var passwd = document.form1.passwd.value;
		var pass = unescape("%68%69%6D%69%74%75");

		if (id.length > 3 && pass == passwd) {
			location.replace("./test/" + id +".html");
		}
		else {
			alert("ID パスワードを確認してください。");
		}
	}
}
// -->
</script>
</head>
<body onload="document.form1.id.focus();">
<form action="#" name="form1">
<table>
<tr>
<td align="right">ID (<u>U</u>)</td>
<td><input type="text" name="id" value="" maxlength="12" accesskey="u"></td>
</tr>
<tr>
<td>パスワード (<u>P</u>)</td>
<td><input type="password" name="passwd" maxlength="8" accesskey="p" onkeydown="if (event.keyCode == 13) secret();"></td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="認証" onclick="secret();">
<input type="reset" value="取り消し">
</td>
</tr>
</table>
</form>
</body>
</html>
ID (U) ID は「secret」
パスワード (P) パスワードは「himitu」

変数 id は入力されたフォームの ID 入力部です。これが移動先のファイル名(拡張子は除く)になります。たとえば、secret.html というファイルをパスワードが一致したときのみ表示させたい場合、ID は「secret」となります。

変数 passwd はフォームのパスワード入力部です。ここで入力された文字列が unescape() でデコードされる文字列と同じで、なおかつ ID(移動先のファイル名)が4文字以上入力されたときに目的の URL に移動します。

この unescape() 内にはエンコードされた文字列を指定します。たとえば、「himitu」をパスワードとして指定します。「himitu」を16進数にすると h: 68, i: 69, m: 6D, i: 69, t: 74, u: 75 なので、これを % 付きの16進数として unescape("%68%69%6D%69%74%75") とします。

「%68%69%6D%69%74%75」は unescape() でデコードされると「himitu」という文字になりますので、入力されたパスワードの判別になります。なお、パスワードの生成にはブラウザによって escape() でエスケープされる文字列が違いますので、ASCII コードの一覧を参考にエンコードされた文字を指定してください。

location.replace() にはリンク先の URL が入りますので、他のディレクトリにある場合はディレクトリ名やパスをクォーテーションで囲み、拡張子も同じく囲みます。入力されたパスワードが一致していたら ID に入力したページを現在のページに表示してこのページに戻れなくします。ただし、パスワードが一致していてもデタラメな文字(存在しないファイル名)を入力してファイルがなければページエラーになります。

フォーム内にある onkeydown は password 部がアクティブの時、キーボードの Enter(キーコードの13)が押されたら関数 secret が呼ばれます。このフォームは内容を送信するのではないので、これによりエンターキーによる「認証」をクリックしたのと同じ働きをします。

なお、このスクリプトのセキュリティは全然ありませんので、安全性を重視するようなファイルでしたら Basic 認証や CGI 等を用いた方が良いと思います。

[PR] Yahoo!ショッピング