Help us understand the problem. What is going on with this article?

Webページの認証を1行の記述だけでやってみる

More than 1 year has passed since last update.

最近はWebアプリを作る時に設計書とか書かずにさっさとプロトタイプを作ってデプロイして見せることが多い。

そこで気になるのが公開範囲。限定した人にだけ見せたいけど、そのために認証システムを毎回ちゃんと実装するのはめんどくさい。NgixでのBasic認証とかもめんどくさい。

とりあえず共通パスワードで知ってる人だけ入れてそれ以外は弾く仕組みが最低限あれば良い。厳密性とかいいから、だいたい動けば良い。という前提で考え抜いた結果行き着いたのが以下。

(prompt('合言葉は?') !== 'たこやき') && document.write('だめだこりゃ')

である。このスクリプトをHTMLの適当な場所に仕込めば良い

<html>
<body>
<h3>ようこそ!</h3>
<script>;(prompt('合言葉は?') !== 'たこやき') && document.write('だめだこりゃ')</script>
</body>
</html>

的なことをすると、

Screenshot 2018-10-31 22.36.17.png

みたいな感じになる

処理の解説

window.prompt(message)はダイアログを表示するブラウザのビルドインの関数で、ユーザーの入力値を戻り値として返す。

document.write(content)はhtmlのbodyを書き換える関数。

ユーザー入力結果がベタ打ちのパスワードと一致したら何もせず、一致しなかったらhtmlの中身を全部消してしまう、という処理。

もう一歩進化させる

ただしまだ問題がある。ページをリロードするたびに聞かれるのでウザい。

一度OKになったらもう聞かないようにしたい。

localStorageを使えば解決だ。

(localStorage.getItem('authorized') == 'YES' || (prompt('合言葉は?') === 'たこやき')) ? localStorage.setItem('authorized', 'YES') : document.write('だめだこりゃ') 

まとめ

  • とにかく楽な認証は一行でできる
  • セキュリティ的にはゆるゆる(パスワードべた書き、クライアント側で処理)
  • 良い子は真似しちゃだめよ
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away