パスワード認証による閲覧制限 ２つの方法
＜目次＞
パスワード認証によるページ閲覧制限方法
1) 基本認証による方法
2) JavaScriptによる方法
1).基本認証による方法
1).基本認証による方法は、4/7の内容をご参照ください。
times-diary.hatenablog.com
2)、JavaScriptによる方法
2)、の方法は、以下の通りです。
【用意するファイル】
(1) 閲覧制限をかけるためのhtmlファイル
(2) 閲覧制限をかける対象となるhtmlファイル
1. index.htmlファイルを新規作成し、以下を記述します。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScriptによる閲覧制限</title> <script type="text/javascript"> function gate() { var UserInput = prompt("パスワードを入力して下さい:",""); location.href = UserInput + ".html"; } </script> </head> <body> <input type="button" value="パスワードを入力して秘密のページへアクセスする" onclick="gate();"> </body> </html>
2. 閲覧制限をかけたいhtmlファイルのファイル名を、
「パスワードにしたい文字列」.html とします。
たとえば、今回の場合、
パスワード：glass
なので、ファイル名を glass.htmlとします。
3. 上記2つのファイル※を同じディレクトリに配置します。
※(1)閲覧制限パスワード入力用ページ、(2)閲覧対象ページ
これで、準備ができました。
対象のディレクトリにブラウザでアクセスします。
【動作確認】
1. 以下ボタンが表示されますので、クリックします。
⇒パスワード入力を求めるインプットボックスが表示されます。
2. パスワード「glass」を入力します。
⇒閲覧制限付きページが表示されました。
（パスワード入力後、以下習作ページにジャンプ）
※パスワード入力後、上記習作ページにジャンプします。
上記方法は、以下サイトを参考にさせていただきました。
【参考サイト】
2/3 簡単に閲覧制限！JavaScriptでパスワード認証を設定 [ホームページ作成] All About : https://allabout.co.jp/gm/gc/23839/2/
