【ホームページ作成】簡単閲覧制限！JavaScriptでパスワード認証

パスワード認証を行うJavaScriptを記述するには

それでは、JavaScriptを使って、パスワードによるアクセス制限を行う方法をご紹介致しましょう。

まず、ソースを全部ご紹介致します。その後で、詳しく解説を行います。
※下記ソース中に、パスワードがどこにも記載されていない点にも注目して下さい。

<script type="text/javascript"><!--
function checkpw(){
   var pswd = prompt("パスワードを入力して下さい:","");
   location.href = pswd + ".htm";
}
//--></script>

<form>
   <input type="button" value="秘密のページへ" onClick="checkpw();">
</form>

パスワード認証JavaScriptソースの解説

上記のソースについて簡単に解説しておきます。
今回のソースは、そのままコピー＆ペーストすれば使えるので、記述内容を理解しなくても構いません。 ただ、今後の応用のためにも、一読をお勧め致します。

■最初の6行（<script ...>～</script>）

1行目～6行目で、JavaScriptを記述しています。
2行目の「function checkpw()」で、この3～4行目で記述したスクリプトの名前(関数名)を「checkpw」としています。(※)
※関数名は何でも構いません。apple でも ringo でも。

■var pswd = prompt("パスワードを入力して下さい:","");

3行目では、パスワード入力用のダイアログを表示させています。 「パスワードを入力して下さい」と記述した文字列は、ダイアログ内に表示されます。自由に書き換えが可能です。
※prompt関数の第2引数はデフォルトの値です。ここでは、デフォルトで入力させたい文字列がないので、空白（""）を記述しています。

■location.href = pswd + ".htm";

4行目では、ユーザがパスワードとして入力した文字列の後に「 .htm 」という拡張子を加えて、HTMLファイル名を生成し、 そのファイルにアクセス（移動）させています。
※この点については、以下で詳しく説明します。

■最後の3行（<form>～</form>）

最後の3行は、HTML部分です。上記で作成したJavaScriptの関数を呼び出すボタンを作成しています。
※最低限必要なのは、真ん中の input 要素のみです。 しかし、form要素（<form>～</form>）に囲まれていないinput要素を無視するブラウザが存在するために、ここではform要素を加えています。

■<input ... value="秘密のページへ" onClick="checkpw();">

この行で、上記で作成したJavaScriptのcheckpw関数を実行させるボタンを作っています。 「秘密のページへ」という文字列が、ボタンの表面に表示されます。ここは自由に書き換えられます。
※ボタンがクリックされたときの動作は、onClick属性内に記述しておきます。 ここでは、「onClick="checkpw();"」としてcheckpw関数を呼び出しています。

パスワードをソースファイルに一切記述しない

「パスワード認証」というからには、一般的には入力されたパスワードが正しいかどうかを判断する必要があります。 しかし、上記のソースには「パスワード」そのものは含まれていません。 従って、ソースコードを覗かれてもパスワードは見えません。

では、どうやってパスワードが正しいかどうかを判断しているのでしょうか。
次のページでご紹介致します。

>>> Page.3 : パスワードを記述せずになぜ認証できるのか？ >>>