パスワードを入力しないと見れないページを簡易的に作る方法。

シェアする

  • このエントリーをはてなブックマークに追加
スポンサーリンク




先に<注意>を記載しておきます。

<注意>

このやり方は、ページのアドレスを知られてしまうと意味のない方法です。

それは、直接URLをアドレスバーに打ち込まれてアクセスされてしまうからです。

ただ、そうしたことに詳しくない人には有効な手段です。

そして、パスワードの入力を促すことで、少しだけセキュリティ効果がありそうに見えるので、見栄えが良いです。

パスワード入力画面 実際の見え方

ネット上では以下のように表示されるページが出来上がります。

↓ ↓ ↓ ↓

そして「パスワードを入力してHPにアクセスする」というボタンを押すとこうなります。

↓ ↓ ↓ ↓

この仕掛けは、「index」と空欄に入力すれば「index.html」に飛び、「password」と入力すれば「password.html」に飛びます。

もちろん「1111」などの数字でも同じで「1111」と入力すれば「1111.html」に飛びます。

つまり、パスワードがそのまま.htmlとなって、そのページに飛ぶという仕掛けです。

但し、事前にパスワードと同じ名前のhtmlファイルをアップロードしておく必要があります。

飛ばし先を複数作るのであれば、複数のhtmlファイルを作れば、そのファイル名がパスワードとなります。

Aさん、Bさん、Cさんに自分の名前がパスワードであることをメールで伝え、入力してもらえれば、それぞれの専用ページを表示させるということが可能になります。

簡易パスワードページの作り方

<この下からまるっとコピー>となっている下からコピーをして、htmlファイルにするだけです。

同じ階層にパスワードにしたい名称のhtmlファイルをつくり、全て同じ階層に置くだけです。

例えば、コピーして作ったパスワードを訊いてくるページを「index.html」として「news.html」「blog.html」という2つの飛ばし先のページを作るとします。

つまり、newsとパスワードの空欄に打ち込めば「news.html」に飛び、blogと打ち込めば「blog.html」に飛ぶということになります。

飛んだ先URLをコピーされ直接アドレスバーに入力されてしまうと、閲覧されてしまいます。

ここが、この方法の弱いところではありますが、若干の抑止にはなると思います。

<この下からまるっとコピー>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html lang=”ja”>
<head>
<META http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”>
<META http-equiv=”Content-Style-Type” content=”text/css”>
<title>簡単パスワード認証</title>

<style type=”text/css”>
span.password { font-size: 150%; font-family: monospace; font-weight: bold; margin: 0px 0.3em; }
input[type=button] { font-size: 125%; margin: 2em; }
div.guide { background-color: #e0e0e0; padding: 3px 1em; }
</style>

</head>
<body>

<h1>認証ページ</h1>

<p>
下記のボタンをクリックすると、パスワード入力ダイアログが表示されます。<br>
パスワードとして、「<span class=”password”>メールでお知らせしたパスワード</span>」を入力するとアクセスできます。
</p>

<!– ================================================ –>
<!– ▼JavaScriptを使った簡単パスワード認証用のソース –>
<!– ================================================ –>

<script type=”text/javascript”>
function gate(){
// ユーザの入力を求める
var UserInput = prompt(“パスワードを入力して下さい:”,””);
// 入力内容をチェック
if( /\W+/g.test(UserInput) ) {
// 半角英数字以外の文字が存在したらエラー
alert(“半角英数字のみを入力して下さい。”);
}
else if( UserInput != null ) {
// 入力内容からファイル名を生成して移動
location.href = UserInput + “.html”;
}
}
</script>

<p>
<input type=”button” value=”パスワードを入力してHPにアクセスする” onclick=”gate();”>
</p>

<!– ========== –>
<!– ▲ここまで –>
<!– ========== –>

<div class=”guide”>
<p>
ユーザの操作によって、以下のように動作します。
</p>
<ul>
<li>正しいパスワードを入力した場合、HPへ移動します。</li>
<li>パスワードを間違えた場合は、正しいページに移動できず、「Not Found」エラーページが表示されます。</li>
<li>半角英数字(a~z、A~Z、0~9、アンダーバー)のみ認証します。</li>
<li>パスワードの入力欄で「キャンセル」ボタンをクリックした場合は、どこにも移動しません。</li>
</ul>
</div>

</body>
</html>

———–<ここまで>———————-

表示される文言をホームページビルダーなどのソフトで編集カスタマイズすれば、オリジナルのパスワード入力画面となります。

お試しくださいね。