【備忘録】最も簡単、シンプルにベーシック認証を使う方法

エトセトラ
スポンサーリンク
スポンサーリンク
今日は、簡単なホームページなら作れる人が、特定のページにアクセス制限をかけたい時の話。
「ベーシック認証」ですね。

名前:くま(♂)
プロフィール:高齢子育て中、飲酒は週末のみ
特技:奥さんをフォローすること(嘘)
名前:カエル(♂)
プロフィール:ゆとり世代(さとり世代)、独身、潔癖症
特技:インターネット超高速検索
スポンサーリンク

ベーシック認証とは・・・?

「Google Chrome」の場合

「Micorsoft Edge」の場合

インターネットを閲覧していると、こういう認証ダイアログが表示されて、ユーザー名とパスワードを要求されることがあるよね。
これが、ウェブサイトのアクセス制限方法・・・「ベーシック認証(Basic認証、基本認証)」です。
もう少しだけ詳しく。
え~と(検索中)・・・。

Basic認証(ベーシックにんしょう、Basic Authentication)とは、HTTPで定義される認証方式の一つ。基本認証と呼ばれることも。
Basic認証では、ユーザ名とパスワードの組みをコロン “:” でつなぎ、Base64でエンコードして送信する。このため、盗聴や改竄が簡単であるという欠点を持つが、ほぼ全てのWebサーバおよびブラウザで対応しているため、広く使われている。
盗聴や改竄を防ぐため、後にDigest認証というユーザ名とパスワードをMD5でハッシュ化して送る方法が考えられた。

出典:ja.wikipedia.org

僕もホームページを管理するとき、たまに使うんだよ。レンタルサーバーの管理画面から設定できる場合、その時はそっちが簡単でいいんだけどね。
こちらはXサーバーの管理画面より、「アクセス制限」を設定する画面です。

※下の画像はXサーバーの管理画面より、「アクセス制限」を設定する場合

今回は、レンタルサーバーの機能が使えない場合など、自分で設定ファイルを作ってアップロードする際の手順ね。忘れちゃうから備忘録、なるべくシンプルなやり方で、よろしく!(笑)
ちなみに、こちらのサイトを参考にさせていただきました。

参考:Basic認証(基本認証)でアクセス制限をかける方法 [ホームページ作成] All About

ホームページ関連では、西村文宏さんの記事にずいぶんお世話になっているなあ。
スポンサーリンク

【備忘録】最も簡単、シンプルにベーシック認証を使う方法

ざっくり言うと・・・?
①「.htaccess」ファイルに必要事項を記載する
②「.htpasswd」ファイルにパスワードを記載する
③制限をかけたい階層に「.htaccess」ファイルをアップロードする
・・・という流れです
ベーシック認証に必要なファイルは2つだね。パスワードを記載した「.htpasswd」ファイルは、「.htaccess」ファイルと同じ場所に置いてもいいよね?
同じ場所でもちゃんと動きますよ。でも、本当は一つ上の階層とか、違う場所に置いた方が、セキュリティ上は良いかもしれません。
今回はよりシンプルに、より簡単にがテーマだから同じ場所でいいよ(笑)。で、その2つのファイルに記載する内容が問題だね。どんなんだったっけ?

「.htaccess」ファイルの覚書

まずは「.htaccess」ファイル。この4行です。

AuthType Basic
AuthName [適当な名称]
AuthUserFile [.htpasswdファイルの場所]
require valid-user

そうそう、これだね。
1行目と4行目はそのまま
2行目と3行目を、自分の状況にあわせて記載します
特に、パスワードファイルを置いた場所を指定する3行目が重要ですが、今回は同じ場所ということですので・・・記載例にあるように場所を指定します
その際、下の画像のように、FTPソフトに表示されるサーバーのフルパスをコピペするといいでしょう
記載例

AuthType Basic
AuthName “Authentication Sample”
AuthUserFile /public/test/.htpasswd
require valid-user

WinSCPなどのFTPソフトで、制限をかけたい階層に「.htaccess」ファイルをアップロードする

「.htpasswd」ファイルの覚書

次はパスワードを記載する「.htpasswd」ファイル。
「.htpasswd」ファイルには、ユーザー名(ID)&パスワードを記載します。
記載例

tokyo:myQApwu0opYIk
osaka:XdnhCM4Rpc7lg
kumamoto:3d09v5R6U3jm6

簡単だね。ユーザー名とパスワードをそのまま並べて記載するだけ。
注意点は、パスワードをそのまま記載してはダメな点です。パスワードは暗号化した文字列を記載します。「.htpasswd」ファイル用に文字列を暗号化してくれる無料サービスがいくつもありますので、利用しましょう。

基本認証パスワード暗号化 – にしし ふぁくとりー
https://www.nishishi.com/scripts/htpasswd/

よし、オーケー!
忘れたらまた、この備忘録を参照しよう。
簡単ですねー。
スポンサーリンク

最後に

ユーザー名、パスワードが間違っていた場合に表示されるブラウザ画面

最近のブラウザはパスワードなどをどんどん記憶してくれて、うまく使えば便利だけど、たまに落とし穴がある。
落とし穴がありましたか?
僕が最近気づいたのは、Microsoft Edgeで認証ダイアログが表示されずにいきなりエラー画面がでる現象。
そうなんですか?
特定のタイミングでいきなり、401エラーになる。「認証のためのユーザー名とパスワードが間違っている」って言われるんだよね。
回避策は?
新しいタブでURLを開き直すと、認証ダイアログが出てくるんだけどね。ちょっとトラップだよ。そのうちブラウザのバージョンアップでなおると思うけどね。
急にエラー画面が出ると焦りますよね。
以上、最もシンプルにベーシック認証を使う方法でした!
最後に、ベーシック認証の通信の流れはこうなっているそうです。
そのへんの仕組みはよくわからん・・・。
通信の流れ

典型的なBasic認証におけるHTTPクライアントとHTTPサーバの間の通信を紹介する。 だいたいの流れは以下のようになる。

  • クライアントは認証が必要なページをリクエストする。しかし、通常ここではユーザ名とパスワードを送っていない。なぜならばクライアントはそのページが認証を必要とするか否かを知らないためである。
  • サーバは401レスポンスコードを返し、認証領域 (authentication realm) や認証方式 (Basic認証) に関する情報をクライアントに知らせる。
  • それを受けたクライアントは、認証領域(通常は、アクセスしているコンピュータやシステムの簡単な説明)をユーザに提示して、ユーザ名とパスワードの入力を求める。ユーザはここでキャンセルすることもできる。
  • ユーザによりユーザ名とパスワードが入力されると、クライアントはリクエストに認証ヘッダを追加して再度送信する。
  • 認証に成功すると、サーバは認証の必要なページのリクエストを処理する。一方、ユーザ名やパスワードが間違っていた時には、サーバは再び401レスポンスコードを返す。それによりクライアントは再びユーザにユーザ名とパスワードの入力を求める。

出典:ja.wikipedia.org