【ベーシック認証】htaccessとhtpasswdで実装する方法!

レンタルサーバなどにログインすれば簡単にベーシック認証は設定できます。

ですが、案件によってはFTP情報とDB情報しか教えてもらえないときもあります。その場合は、「.htaccess」「.htpasswd」でベーシック認証を設定するのが一番簡単です。

久々にその機会があったので、一連の流れを残しておこうと思います。

「.htaccess」「.htpasswd」を作成する

まずは、「.htaccess」「.htpasswd」ファイルを作りましょう。

元々Windowsでは「.htaccess」のような拡張子のみのファイルを作成できませんでしたが、2021年4月1日に試してみると作成できました。※エイプリルフールですが本当です

いつの間に出来るようになったんですかね。念のため、今までの方法もお伝えしておきます。

サーバを使って「.htaccess」を作成する方法

※「.htpasswd」も同様の方法で作成してください

1.Windows等で「a.htaccess」ファイルを作成します。

引用:FileZilla

2.FileZilla等のFTPソフトで作成した「a.htaccess」ファイルをサーバにアップロードします。

引用:FileZilla

3.サーバにアップロードしたファイル「a.htaccess」を「.htaccess」にファイル名を変更します

引用:FileZilla

4.「.htaccess」をダウンロードして完成です。

同様の手順で作成した「.htpasswd」と「.htaccess」をこれから編集してベーシック認証を実装していきます。

.htaccessの設定

AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile {フルパス}.htpasswd
require valid-user

「.htaccess」を上のように設定します。

ただし、「AuthUserFile」の{フルパス}部分だけは調べる必要がありますので、そちらを説明します。

「AuthUserFile」の{フルパス}の調べ方

引用:Atom

「test.php」など適当なphpファイルを作成して、「<!– <?php echo __DIR__; ?> –>」とだけ入力します。

<!-- <?php echo __DIR__; ?> -->
引用:chrome

これをドメイン直下になるディレクトリにアップロードします。当サイトだと「https://lucklog.info/test.php」となるところですね。そして、ブラウザで「https://ドメイン/test.php」を開くと、上記のように真っ白の画面が表示されます。

続けてその画面を一度マウスでクリックしてから、CtrlUを押します。

引用:chrome

すると、ソースが表示されますので、<!– ~~~ –>の「~~~」の部分を確認してください(上記だと「/home/・・・/publick_html/lucklog.info」になります)。
これがドメイン直下の{フルパス}になります。

この{フルパス}をベースに「.htpasswd」のファイルパスを決めてそれを指定しますが、注意点があります。

注意点「.htpasswd」を置く場所

「.htpasswd」を置く場所はドメイン直下のディレクトリより上に置きましょう

仮に先ほど取得したパス「/home/・・・/publick_html/lucklog.info」、ここに「.htpasswd」を置いたとします。すると、ブラウザで「https://lucklog.info/.htpasswd」とすれば参照できてしまいます(先ほどアップした「test.php」と同じですね)。

実際はレンタルサーバなどの設定で見れなかったりしますが、何かツールを使ったりなどで参照されてしまう危険がありますので、例えば「/home/・・・/publick_html/basic/」などブラウザからだと見れないところに置くようにしましょう

こちらを反映したソースを参考に載せておきます。「.htpasswd」の前に「/」を忘れないようにしてくださいね。

AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile /home/・・・/publick_html/basic/.htpasswd
require valid-user
ブラウザから見れるところにしか置けない場合

どうしてもブラウザから見れるところにしか置けない場合は、「.htaccess」ファイルに「AddHandler cgi-script htpasswd」を追記しましょう。

AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile /home/・・・/publick_html/basic/.htpasswd
require valid-user
AddHandler cgi-script htpasswd

これは、拡張子が「htpasswd」のファイルはCGIファイルとして実行せよという意味で、通常のアクセスをさせなくする方法です。念のためこの設定をしておきましょう。

.htaccess」に関しては以上です。

その他の項目に関して簡単に説明

※気にならない人は読み飛ばして大丈夫です

AuthType Basic
ベーシック認証を指定
AuthName
ベーシック認証の画面に表示されるメッセージ(下記に画像添付します)
※chromeやedge、スマホなど表示されないブラウザも多いです
AuthUserFile
「.htpasswd」のフルパス
require valid-user
全ユーザがアクセスできる
※「require user luck」(luckがユーザ名)と設定すれば「luck」のみアクセスできるようになります
引用:firefox(メッセージ表示あり)
引用:Chrome(メッセージ表示なし)

 

.htpasswdの設定

luck:password
editor:password

「.htpasswd」には、上記のような「ユーザ名:パスワード」という形でアクセスできる人のリストを羅列します。

ここでパスワードには工夫が要ります。普通にパスワードを書いてもベーシック認証を通過できません。

このユーザ名、パスワードの作成用のツールを作りましたので、下記より作成してみてください。

htpasswd:パスワード作成ツールはこちらから

「.htaccess」「.htpasswd」をアップロード

.htaccess」をベーシック認証を掛けたいディレクトリにアップロードします。

.htpasswd」は「.htaccess」の「AuthUserFile」に指定したディレクトリにアップロードしてください。
※例であげたディレクトリだと「/home/・・・/publick_html/basic/.htpasswd」ですね

まとめ

以上で無事ベーシック認証を掛けることができました。