空色堂の研究室。空色堂ラボ。

Webサイトにパスワードをかけたい!簡単!5分でできる、「.htaccess」「.htpasswd」を使ったBasic認証のやり方!

2015.03.24

ベーシック認証

こんにちは、空色堂(@SorairodoJP)です。

今回はBasic認証の設置です。

仕事で頻繁に設定する人はさておき、私の様にあまり設定する機会の無い人は、数年ぶりにやろうとして、あれ!?どうやって設定したっけ?と手順を忘れてしまいがちです。

そんな数年後の私のためにも(笑)記しておかなくてはいけません。

初めての方も簡単にできます。落ち着いてチャレンジしてみてください。

Basic認証(基本認証)とは?

Webサイトを表示する際に、IDとパスワードの入力を求め、事前にIDとパスワードを知らせた、限定された人だけに見せたいWebサイトなどを作るときに使える仕組みです。

Basic認証ウインドウ

「.htaccess」を変更するので、初めての方は練習で、サーバーにフォルダを1つ準備し、適当な内容のindex.htmlのみを入れて、設定手順を確認されることをオススメします。

WordPressなどを使用されていて、既存の「.htaccess」が存在する場合、上書きしてしまうと、正常に動作しなくなる場合もありますので、既存の「.htaccess」が存在する場合には、ファイルのコピーをしてから進めてください。

スポンサーリンク

準備するもの

Basic認証の機能を設置するためには、次のものが必要になります。

  • FTPソフト
  • エディタ(「メモ帳」でもOKです。)
  • サイトパス(保護したい場所を示すサーバー内のディレクトリ)

結論から言うと、これらを使って、「.htaccess」と「.htpasswd」の2つのファイルを作り、FTPでサーバーの所定の場所へアップすれば完成です。

初めて設定するときには、ちょっとややこしそうですが、大丈夫です。

落ち着いて順番に進めていけば、簡単です。

順を追って見て行きましょう。

今回想定するモデルケース

モデルケース

●●●.comのサイト全体を限定公開にしたい場合を想定します。

つまり、フォルダAと、フォルダAに含まれるフォルダB、フォルダCの中身もパスワードで保護したいケースです。

作業手順

1. サイトパスを調べる。

これから作る「.htaccess」と「.htpasswd」の2つのファイル。

その中の「「.htaccess」」を作る際に、Basic認証をかけたい場所が、サーバー内ののどこのディレクトリ(フォルダ)にあるのかを指定する必要があります。

(※事前にわかっている場合はこのステップは必要ありません。)

レンタルサーバーなどでは、その仕組み上、複数のユーザーが1つのサーバーをシェアしているケースがあります。

仮に同じ会社のレンタルサーバーを契約して利用しているAさん〜Zさんまでの26人が、1台のサーバーの中に、それぞれのデーターを保存しているとします。

この場合、マンションの様に、Aさん〜Zさんまで、それぞれの部屋(フォルダ)を分け与えられて、各人が自由に使えるのはそれぞれの借りた部屋(フォルダ)の範囲に限定されます。

当たり前ですが、Aさんが、隣の部屋のBさんのフォルダの中身を自由に見たり書き換えたりすることは、基本的にできないようになっています。

これをサーバー全体で見ると、1番上の階層のディレクトリ(フォルダ)以下に、サーバー会社の管理スペースや、ユーザーAさん〜Zさんまで26人分のディレクトリ(フォルダ)が設定されている状態になります。

Aさんが自分の部屋(フォルダ)の場所を示そうとする際には、◯◯◯/△△△/□□□/user/a(Aさんのルートフォルダ)/という様に、サーバー全体でどこに位置しているディレクトリ(フォルダ)かを示す必要があります。

【サイトパスの調べ方】

(1)次の内容をコピーして、「test.php」などの名前で保存します。

(2)Basic認証をかけたいディレクトリ(フォルダ)に上記の「test.php」をアップロード。

今回のケースでは●●●.comのindex.htmlや、index.phpなどがあるフォルダAにアップロードします。

(3)ブラウザで●●●.com/test.phpを表示。

そうすると、◯◯◯/△△△/□□□/user/a/フォルダA

というように、test.phpを設置した場所のディレクトリ(フォルダ)のパスが表示されます。

これを後のステップで使いますので、どこかに保存しておいてください。

2. 「.htaccess」を作成する。

ファイルに保存する中身は次のようになります。

見た目ややこしいことになっていますが、今は内容の細かい部分は気にせず、4行目にある【 】の中を書き換えて、「.htaccess」という名前で保存します。

ファイル名の先頭に「.(ドット)」で保存ができない場合

この際に、ファイル名の先頭に「.(ドット)」で保存ができない場合は、例えば「a.htaccess」の様に、「.(ドット)」の前にファイル名を付けて保存してしまってください。

後ほどサーバーにアップした後、名前を変更し「a」の部分を削り、「.htaccess」の形にします。

3. 「.htpasswd」を作成する。

こちらはIDとパスワードを指定するファイルで、内容もとてもシンプルです。

【ID名】:【(暗号化された)パスワード※1】

これだけです。(笑)

IDとパスワードが1組だけであれば、1行だけです。

複数のIDとパスワードのセットを用意したい場合は、改行して必要な分だけ記載してください。

それぞれの【 】の中に、指定したいIDとパスワードが入ります。

気になるのは、パスワードの「暗号化された」という部分です。

内容は1行だけでとてもシンプルなのに、暗号化という言葉が出ると、なんだか、とても複雑な感じがしてきます。

しかし、後ほどいくつかご紹介しますが、暗号化したものに変換してくれるサイトがいくつもあります。

手順はとても簡単ですので心配ありません。

仮に、IDを「guest」、パスワードを「abcdefg」という様な設定にしたい場合、

「.htpasswd」のファイルに記載する内容は次のようなものになります。

guest(←ID名です):lUNSudBLLrHno(←ここが暗号化したパスワードです)

(1)パスワードの暗号化

例えばこれらのサイトで暗号化ができます。

.htaccess ファイルを簡単作成「.htaccess Editor」

※「.htaccess」「.htpasswd」の両方を構成してくれるので便利。

http://www.htaccesseditor.com/#a_basic

BASIC認証用 パスワード暗号化

http://orange-factory.com/tool/crypt.cgi

(2)ファイルの保存

上記のIDとパスワードを書いたファイルに「.htpasswd」という名前を付けて保存。

この際に、ファイル名の先頭に「.(ドット)」で保存ができない場合は、例えば「a.htpasswd」の様に、「.(ドット)」の前にファイル名を付けて保存してください。

後ほどサーバーにアップした後、名前を変更し「a」の部分を削り、「.htpasswd」の形にします。

4. FTPで「.htaccess」「.htpasswd」のファイルをアップロード

今回は次の通り、フォルダA以下をパスワードで保護したいので、フォルダAに「.htaccess」「.htpasswd」をアップロードします。

FTPソフトでは、「.htaccess」などを隠しファイルとして表示していない場合があります。

気づかぬうちに上書きしてしまうことの無いよう注意して進めてください。

※重要 すでに「.htaccess」が存在している場合

この際、「.htaccess」が既にサーバーの同じフォルダに存在しているケースがあります。その場合には、上書きせずに、サーバー内の既存の「.htaccess」に、今回説明した「.htaccess」の内容を追記してアップロードしてください。

「.htaccess」にBasic認証の内容を記述する場所には注意が必要! 

「.htaccess」内に記述する場所を、間違えたため、後日、思いもよらず、Basic認証の内容が初期化されてしまいました。

詳しい内容は、こちらの「【ソララボ】 WordPress環境で「.htaccess」で設定した内容が消えてしまう場合の対処方法!」の記事に書きました。

完成しましたか?

先ほどの図をもう一度確認します。

【フォルダ概要】
モデルケース

●●●.comのサイト全体を限定公開にしたい場合を想定しています。

つまり、フォルダAと、フォルダAに含まれるフォルダB、フォルダCの中身もパスワードで保護したいケースです。

FTPソフトで「.htaccess」「.htpasswd」の2つのファイルを、フォルダAにアップロードすることで、フォルダB、フォルダCの中身もパスワードで保護されます。

5. 動作確認

動作を確認してみましょう。

ブラウザで●●●.comを表示してください。

IDとパスワードの入力を求める認証ウィンドウが開きます。

IDとパスワードを入力してログインできるか試してみてください。

スポンサーリンク

関連記事

follow us in feedly