Basic Auth（Basic 認証）を使うと Web ページに簡単な認証を付けれます。認証はユーザー名とパスワードのペアから成るもので、このペアが一致した場合のみ本来のリクエストを取得できます。
セキュリティとしては貧弱ですが、ちょっとした Web サイトの開発中などに特定の誰かとのネットを介した共有などを行うにあたっては割と便利です。
仕組み
図を作りました。
PlantUML では。
@startuml
participant browser
participant server
autonumber
browser -> server: アクセス
loop
alt 認証が失敗
server -> browser: 401\nwww-authenticate: Basic realm=... を返す
browser -> browser: 認証ダイアログを出す
opt ユーザー名とパスワード入力
browser -> server: authorization: Basic ... を送信
server -> server: 認証
end
else
server -> browser: 200
end
end
@enduml認証が失敗した時
www-authenticate: Basic realm="..."ヘッダーを持たせて401ステータスコードでレスポンスを返します。（...は適当な文字列になります）
このヘッダーを持つ401レスポンスを受け取ったブラウザは自動的に認証ダイアログを表示してくれます。
ダイアログにはキャンセルボタンもあるので、ユーザーがそれをクリックした場合、そこで一連のフローは終わります。
ユーザーがユーザーとパスワードを送信した場合、サーバーではauthorization: Basic ...というヘッダーが含まれて送られてきます。（...はユーザー名とパスワードを:で繋げてbase64化したものです
サーバーはそのヘッダーからbase64化された部分を取り出し、自分たちの持つ認証情報とマッチするか確認します。
ここで認証が失敗すればまた401をwww-authenticate付きで送り上記のフローを繰り返し、認証が成功すれば200で本来受け取るべきレスポンスを受け取ります。
リポジトリ
ExpressJS で作った例です。以下で起動して、
yarn && yarn dev
localhost:9997/fooやlocalhost:9997/barといった URL で確認できます。
