Basic Auth

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化された部分を取り出し、自分たちの持つ認証情報とマッチするか確認します。

ここで認証が失敗すればまた401www-authenticate付きで送り上記のフローを繰り返し、認証が成功すれば200で本来受け取るべきレスポンスを受け取ります。

リポジトリ

ExpressJS で作ったです。以下で起動して、

yarn && yarn dev

localhost:9997/foolocalhost:9997/barといった URL で確認できます。