【.htaccess】BASIC認証をする方法

この記事は約4分で読めます。
広告

【BASIC認証(ベーシック認証)】とは、サイトURLにIDとパスワードを付けて見られる人を限定する方法です。
公開前のホームページURLや、社内やお客様だけに確認して欲しいURLを作成する時など用途とは様々。
一見すると、超技術のめちゃムズい【BASIC認証】ですが、結構簡単にコピペで出来ちゃうんです。

【BASIC認証】デモページ

まずはデモページで【BASIC認証】とは何かをご確認ください。
IDとパスワードは両方とも「ende」です。
一度アクセスするとブラウザを閉じるまでは、【BASIC認証】が有効になります。

【BASIC認証】のデモページ

【BASIC認証】に必要なファイル

【BASIC認証】で必要なファイルは2つです。
【BASIC認証】を記述するための「.htaccess」ファイルと、IDとパスワードを設定する「.htpasswd」ファイルです。
最初、ドットから始まるファイルが2つも!意味わからない!ってなりましたので
ファイル名を好きに変えようとしたけど、この2つのファイル名じゃないとダメみたい(; _ ;)
この2つのファイルの作り方は簡単で、windowsならメモ帳、macならテキストエディタで2つのテキストファイルを作成したらファイル名をリネームする。
1つは「.htaccess」にして、もう1つは「.htpasswd」にする。
これで必要なファイルが用意できた!

【BASIC認証】に必要な内容

作成した2つのファイルに、内容を書いていきます。
まずは、IDとパスワードを設定するため「.htpasswd」を編集します。

.htpasswd(エイチティーパスワード)の内容

「.htpasswd」ファイルの中には、IDとパスワードを「:」で区切って入力します。
「ID:パスワード」のように書けばばっちり!
でもIDはいいけどパスワードは他の人から見られちゃまずいので、しっかりと暗号化しなくちゃです。
例えば、デモページで利用したID「ende」、パスワード「ende」とした時に、こんな感じで「ende:ende」と書けばイイのですが
パスワードを暗号化すると「ende:e8.5ZFz4rCh0s」このようになります。
「.htpasswd」は、IDと暗号化したパスワードの1行だけを下記のように書きます。

ende:e8.5ZFz4rCh0s

パスワードを暗号化する方法は、LUFTTOOLS様の暗号化ツールを利用します。
LUFTTOOLS様、良いツールを作っていただきありがとうございます!

.htaccess(エイチティーアクセス)の内容

「.htaccess」ファイルには、「.htpasswd」の場所と、BASIC認証ですよ~と記述すればOKです。
書き方は下記の通り

  // ルートディレクトリからの.htpasswdの位置。
  AuthUserFile /home/サーバーID/ドメイン名(hajimete.org)/public_html/.htpasswd
  // アクセス制限をする対象を全てにする。
  AuthGroupFile /dev/null
  // アラートで出るタイトル。日本語だと文字化け必須。chromeだと書いても表示されない。
  AuthName "Please ID and Password"
  // ベーシック認証ですよ~。
  AuthType Basic
  // 誰でもIDとパスワードが合っていたら入れる。
  require valid-user

最初がかなりの難問。
「ルートディレクトリからの位置」とは。。。最初自分はこれがよくわかってなくて「500 Error」ばかり出てしまった。
「500 Error」が出る人は、ここがミスしてる可能性あるよ!
調べてみると、解決するのはめちゃ簡単で、適当な名前のphpファイルを作成して(今回は、「pass.php」で作成します)
そこに1行下記を書いて、サーバーの「.htpasswd」と同じ階層にアップします。

  <?php echo __FILE__; ?>

サーバーに上げたら、ブラウザで「pass.php」を表示すればルートディレクトリが表示されるんです。
(ちなみに自分が作った「pass.php」はここから確認できるよ)
この「__FILE__」は、phpのマジカル定数って言うちょっとカッコいい名前のなにか。
サーバーIDを確認して、ドメインは知ってる!自分の場合は「hajimete.org」だもの。
この二つで【BASIC認証】が出来上がり!
「.htaccess」と「.htpasswd」を両方サーバーに上げて、ちゃんとベーシック認証が出るか確認できたら終わりです!!
おつかれさま!!

コメント

タイトルとURLをコピーしました