WEBデザイナーのあやおり子です。
WEBデザイナーは転職するときにポートフォリオを作りますが、仕事で作った作品はさすがに一般公開できません。
その時に鍵をかける必要がありますが、DBを使ってパスワードを管理する器用なプログラミングは無理です。
そんな時に使われる主なやり方がBasic認証(基本認証)です。
https://allabout.co.jp/gm/gc/23780/
しかし、私はWEBデザイナー。
アプリのログイン画面のようにHTMLでデザインしたい！！
そう思い、今回はBasic認証(基本認証)を使わずに鍵をかけられる方法を探しました。
Javasctiptなのにバレずに鍵をかける方法
RSA公開鍵などの方法もありますが、ライブラリを使わずになるべくシンプルに鍵をかけたいです。
検索したなかで、私がいいなと思った方法がこちらのサイトに書いてありました。
https://allabout.co.jp/gm/gc/23839/
ボタンを押すとパスワードを入力するアラートが表示され、
文字を入力すると、入力した文字+.htmlファイルが表示されるという仕組みです。
私はこの機能を使って、入力フォームのようにパスワードを入力することに挑戦しました。
※かなり厳重に鍵をかけていますが、絶対大丈夫かは定かではありません。自己責任でお願いします
ログインページの作り方
ログインするページをlogin.htmlとします。
見た目としては、このようなイメージになります。
また、パスワードを入力した後のパスワードページをpassword.htmlとします。
HTML
ログインする部分のHTMLです。
formタグの onsubmit="return false;"が重要ポイントです。
これを指定しないでEnterボタンを押すとPOST送信されてしまい、きちんとページ遷移ができない場合があります。
<body>
<h1>パスワードを入力してください</h1>
<form name="pwform" onsubmit="return false;">
<!-- パスワードを入力する -->
<input type="password" name="txtb" value="">
<!-- 送信したらjavascriptのtbox()の中身が動く -->
<input type="button" value="送信" onclick="tbox()">
<!-- 送信したらjavascriptのclr()の中身が動く -->
<input type="button" value="リセット" onclick="clr()">
</form>
<body>
また、パスワードページには、検索ロボットを弾く設定を書きます。
※.htaccessファイルにも同様に弾く設定を書きますが、100%弾く保証が無いので、念には念をいれて重複させて書いています。
<meta name="robots" content="noindex">
.htaccessファイル
次に、.htaccessファイルを編集します。
.htaccessを設置すると、認証・転送・制限などの見るときの機能を設定することができます。
こちらでは、検索ボットを弾くことと、ログインページの外部アクセス禁止の設定をしていきます。
<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
order deny,allow
# パスワードページ(password.html)の場合
<Files password.html>
# 検索ボットの巡回を弾く設定
SetEnvIf User-Agent "Googlebot" shutout
SetEnvIf User-Agent "Slurp" shutout
# ログインページ(hogehoge.comは、自分のサイトのURLに設定する)
SetEnvIf Referer "^https://hogehoge\.com/login.html" ref_ok
SetEnvIf Referer "^http://hogehoge\.com/login.html" ref_ok
order Deny,Allow
Deny from all
allow from env=ref_ok
</Files>
Javascript
最後に、javascriptを書いていきます。
// onclick="tbox()" が押されたら
function tbox(){
// <form name="pwform">内の <input name="txtb"> の値を取得
var str = document.pwform.txtb.value;
// もし <input name="txtb"> の値が半角英数字以外だったら、アラートを出す
if( /\W+/g.test(str) ) {
alert("半角英数字のみを入力して下さい。");
}
// もし <input name="txtb"> の値に何かしら入っていたら、入力値.htmlに移動する
else if( str != null ) {
location.href = str + ".html";
}
}
// onclick="clr()" が押されたら、フォームの値を消す
function clr(){
document.pwform.txtb.value="";
}
完成
Javascriptなのにバレない、かつデザイン出来るログインページを作ることができました！！！