【図解で解説】Basic認証とは
Basic認証とは
ユーザー名とパスワードを平文で送信して本人である事を確認する認証方式です。
下記画像の通り、localhost:3000というurlにアクセスした際に、ブラウザ上でUsernameとPasswordを要求されます。
この２つを入力してSign inボタンを押下することで、本人であるか確認を行います。
認証の流れ
① ブラウザでBasic認証が設定されたURLにアクセスします。
② クライアントからサーバーに対してAuthorizationヘッダー（認証情報）を送信することができます。
今回の場合は、まだBasic認証ができていないためにAuthorization Headerは空であるため、サーバーは認証情報を確認できません。
③ サーバーはクライアントに認証ができていないことを伝えるために、レスポンスのステータスコードを401に設定します。これは、まだ本人であることを確認できていないことをクライアントに伝えます。
そして、サーバーがクライアントにどの認証方式を使用するか伝えるために、WWW-Authenticateヘッダーを設定します。今回はBasic認証を行うので、「WWW-Authenticate: Basic realm="some_realm"」と設定します。
realmとは、認証が必要な領域を示す文字列です。realm="user_pages"の場合は、認証の対象がuser_pagesという名前の領域であることを伝えます。
④ ログイン認証画面が表示されるので、ユーザー名とパスワードを入力します。
そして、Log inボタンを押します。
⑤ サーバーにユーザー名とパスワードを含めたリクエストを送信します。
AuthorizationヘッダーにBasicと設定し、Basic認証での認証を行ってくださいと伝えます。
また、username:passwordの文字列をbase64でエンコードしたものをAuthorizationヘッダーに設定します。
base64とはデータの変換方式の一つです。
データを64文字の文字（a~z、A～Z、0～9、+、/）と「=」で表現します。
参考記事： 「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
⑥ リクエストのAuthorizationヘッダーをデコードして、元のデータに戻します。
今回の場合だと、username:passwordの文字列に戻します。
そのusernameとpasswordを元に、認証情報が正しいか確認します。
⑦ 認証情報が正しい場合、ステータスコードが200の成功レスポンスを返します。
引用：Basic Authentication | Authentication Series
Basic認証を体験してみよう
下記はBasic認証のサイトを実際に動かしてみるハンズオンの動画になります。
時間がある人は、実際にBasic認証を体験してみてください。
おまけ （エンコードとデコードについて）
エンコードとは、データを他の形式へ変換することです。
デコードとは、エンコードされたデータを元の形式に戻すことです。
今回は、認証情報（username:password）をbase64形式でエンコードしてAuthorizationヘッダに設定し、そのリクエストをサーバーに送信していました。
そもそもなぜエンコードする必要があったのか解説します。
HTTPヘッダーには文字列を含める必要がありますが、特定の特殊文字（コロン：、空白など）はHTTPプロトコルで特別な意味を持ちます。
認証情報（username:password）をそのまま送信すると、特殊文字によるパースエラーや不具合が発生する可能性があります。
base64エンコードを使うことで、認証情報を安全に扱える形式にしているそうです。
HTTP Basic認証は、RFC 7617によって定義されています。
この仕様で、username:passwordをbase64でエンコードすることが規定されています。
サーバーとクライアントは、この仕様に従ってデータを送受信する必要があります。
参考記事：「エンコード」と「デコード」の違い
参考にしたもの
Discussion