今回はサイトにパスワードとIDを設定して限定公開にする「Basic認証」の設定方法について解説していきます。

こんな時に使います

・練習用に作成した架空のサイトをポートフォリオに掲載する時

・コーディング作業完了後、テストアップしたページをクライアントに確認して貰いたい時

など、実際に運用しないデモサイトや、制作途中のページを限定公開にして見て貰いたい時に使います。

今回は、このサイトにも掲載している、練習用に作成した架空のサイトに設定していきたいと思います。

Basic認証の設定方法

Basic認証の設定をするには「.htpasswd」、「.htaccess」の2つのファイルを作成する必要があります。

.htpasswdの作成方法

メモ帳アプリなどを使って新規テキストドキュメントから作成します。

デスクトップの何もないところでクリック→新規作成→テキストドキュメントでメモ帳を開きます。

作成されたファイルに.htpasswdと拡張子ごと変更して名前を付けます。

拡張子の警告が出たらOK。

拡張子が表示されていない場合は、フォルダの表示設定から拡張子を表示する設定に変更してみてください。

作成した.htpasswdに設定したいIDとパスワードを記載します。

形式としては以下のようになります。

ID:パスワード

ID:パスワード

今回の場合は、IDを「test」、パスワードを「dental」と設定したいと考えています。

設定前に注意！

パスワードのみ暗号化する必要があります。

「.htpasswd 暗号化」などと検索し、パスワードを暗号化してきてください。

以下のサイトがとても分かりやすく、おすすめです。

https://www.luft.co.jp/cgi/htpasswd.php

パスワード「dental」を暗号化した場合、以下のようになりました。

test:<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-pale-pink-color">vQRW8jxo2j.8I</mark>

test:<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-pale-pink-color">vQRW8jxo2j.8I</mark>

以上の形式で設定できたらファイルを保存。

Basic認証をかけたいページがアップロードされている場所へアップロードします。

.htaccessの作成方法

.htpasswd同様に新規テキストドキュメントを作成し、.htaccessと名付けます。

一旦、以下のコードをコピーしてください。

AuthType Basic
AuthName "Enter your login ID and password"
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color">AuthUserFile .htpasswdの場所（絶対パスを記載）</mark>
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
  deny from all
</Files>

AuthType Basic
AuthName "Enter your login ID and password"
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color">AuthUserFile .htpasswdの場所（絶対パスを記載）</mark>
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
  deny from all
</Files>

「AuthUserFile」のみ変更が必要。ここには.htpasswdがアップロードされている場所を記載します。

絶対パスの場所はすぐには分からないと思いますので、以下の方法で簡単に取得しましょう。

get.phpを作成してパスを取得

今までの方法と同様にget.phpというファイルを作成します。

ファイルには以下を貼り付けてください。

<?php
$dir = __FILE__;
$dirPath =  dirname($dir);
echo $dirPath;
?>

<?php
$dir = __FILE__;
$dirPath =  dirname($dir);
echo $dirPath;
?>

.htpasswdのアップロードされている場所へアップロード。

get.phpへブラウザからアクセスするとパスが表示されます！

「アップロードするサイトURL/get.php」のように入力するとアクセスできるかと思います。

パスを貼り付けて末尾に必ず、/.htpasswdをつけます。これを忘れるとアクセスできません。

例として、今回のサイトの場合以下のようになりました。

AuthType Basic
AuthName "Enter your login ID and password"
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color">AuthUserFile </mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-green-cyan-color">/home/ドメイン名/www/wp/demo-dental</mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-pale-pink-color">/.htpasswd</mark>
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
  deny from all
</Files>

AuthType Basic
AuthName "Enter your login ID and password"
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-luminous-vivid-amber-color">AuthUserFile </mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-green-cyan-color">/home/ドメイン名/www/wp/demo-dental</mark><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-pale-pink-color">/.htpasswd</mark>
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
  deny from all
</Files>

入力出来たらアップロード。

これで作業完了です。パス取得用にアップロードしたget.phpは削除してしまって構いません。

ページへアクセスして確認

Basic認証を設定したページへアクセスするとポップアップが表示されます。

設定したIDとパスワードを入力してアクセスできるか確認してみてください。

パスワードは暗号化したものではなく、暗号化前のものを入力します。

今回の場合、「dental」と入力します。

まとめ

今回はページにアクセス制限をかけるBasic認証の設定方法をご紹介しました。

設定には

.htpasswd（パスワードとIDの設定）

.htaccess（絶対パス記載）

get.php（絶対パス取得・取得後は削除してOK）

以上の3つのファイルの作成と、パスワードの暗号化が必要になります。

少し複雑ですが今回ご紹介したコードを慎重にコピペしていけば簡単に設定できるようになるかと思います。

今後もBasic認証をかけることがある場合は3つのファイルを保存しておいて、

次の機会にはコピーして使いまわせるようにしておくのがおすすめです。