こんにちは、フリーランスエンジニアのしょーごです。
今回はBasic認証のかけ方をできるだけ分かりやすく紹介していきます。
あーたしかにAuthUserFileは一番混乱するかも
そのあたり丁寧に説明していきますね。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
＼無料の入門編から本格企業サイトまで／
BASIC認証とは何なのか？
ベーシック認証（Basic認証）とはWebサイトの特定の領域、つまりページやファイルにアクセス制限をかけることができる認証方法の1つです。
これによって、例えば
- 公開前のサイトに未関係の人間がアクセスできないようにする
- Googleのクローラーの巡回を防ぎ、検索一覧に載らないようにする
- 特定の人しか見せたくないテスト環境
これらを実現することができます。
ちゃんと認証がかかっていれば、「ユーザー名」「パスワード」の入力を求められます。
BASIC認証の技術的な話
仕組みについてもう少し詳しく話すと、BASIC認証というのはWebサーバーの機能です。特に無料のWebサーバーだと利用できないこともあります。
また、ログイン情報を入力して送信する際に「Base64」という文字コードを用いて通信を行います。「Base64」は簡易的な通信を行う際の文字コードで、httpなどで通信する（httpsじゃない）場合に脆弱になりやすいです。
セキュリティ面を考えて必ずhttps（SSL化）前提で設定しましょう。
理想：レンタルサーバーの管理画面でらくらく
レンタルサーバーの場合は管理画面からラクラクかけられるものもあります。
例えば私がおすすめしているConoHa WING 
の設定方法はとても簡単です。
ファイルのアップロードもFTPを使わずとも、ファイルマネージャーで即アップできますし、ディレクトリのアクセス制限を行えば、即Basic認証は終わります。
初学者の方には特にこちらをおすすめしたいです。
万能な方法を紹介
しかし、管理画面からでも場合によってはうまくかからない場合もありますし、実案件ではサーバーの管理画面に入れない場合もあるかもしれないので、
FTPなどでレンタルサーバーにアクセスして自力でBASIC認証をかける万能な方法を紹介します。
Basic認証の前提
- 「.htaccess」と「.htpasswd」の２つのファイルを設置することで認証がかけられる
- ファイルを作成、編集するのは自分のエディタなどローカル環境、設置するのは「レンタルサーバー内」
- レンタルサーバーに接続するにはFileZiilaなどのFTPが必要なので、使い方は知っておくべし
【HTMLサイト編】自力でBASIC認証のかけ方
- 認証をかけたいサイトのレンタルサーバーフルパスを調べる
- .htaccessと.htpasswdの用意
- ２つのファイルをFTPでアップロード
- ページにアクセスしてIDとPasswordを入力
- ページを表示できたら成功
①認証をかけたいディレクトリのフルパスを調べる
まずは一番ややこしい「AuthUserFile」を調べておきます。
実は.htaccessと.htpasswordのファイルを設置した階層までのフルパスを調べておく必要があるんですが、これはレンタルサーバーのフルパスであって、WebサイトのURLではないので、PHPで調べてあげる必要があります。
phpファイルを作成し、以下のコードを記入
エディタで任意の名前のphpファイル（ここではpath.php）を作成し、以下のコードを書いてください。
<?php
echo __FILE__;
?>
__FILE__
これはマジカル定数と呼ばれているもので、ファイルのフルパスが格納されている定数になります。
認証をかけたいディレクトリにFTPでファイルを設置
作成したphpファイルをFTPを利用して、BASIC認証をかけたいディレクトリ（サイト全体ならトップページと同階層）に設置します。
まずは自分のサーバーのFTP接続情報を確認し、FileZiilaなどFTPツールでサーバーに接続していきます。
通常はルートはpublic_html以下であることが多いので、そこに設置するといいかなと思います。
public_html内でドメイン毎にディレクトリが別れている場合は、その中が大抵トップページになっているかなと思います。
そこに設置してやればいいです。
サーバーのフルパスが表示される
例えばサイトのURLが「exemple.com」であれば、「exemple.com/path.php」にアクセスすると、ファイルを設置した場所までのフルパスが表示されます。
エックスサーバー 
だと「/home/[サーバーID]/example.com/public_html/path.php」みたいな表示になるようです（使用するのは/path.phpより前の部分）
フルパスを確認したら、必ずphpファイルは消すようにしましょう。パスが万人に丸見えで良いことはないです。
②「.htaccess」 を作成する
.htaccessファイルを自分のエディターなどのローカル環境で作成します。
以下のコードを入れていきます。
AuthUserFile （先ほど調べたフルパス）/.htpasswd
AuthName "hogehoge"
AuthType Basic
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
deny from all
</Files>AuthUserFile
先程調べた「.htpasswdファイルまでのフルパス」+「/.htpasswd」を書きます。
AuthName “~~”
ダイアログに表示される文字列を指定します。何でも良いですが、半角英数字で入力しておきます。
AuthType Basic
認証方法の指定で、今回はBasic認証なのでBasicにします。
require valid-user
IDとpasswordを知っているユーザーにアクセスを許可する記述です。
deny from all
ブラウザから「.htpasswd」「.htaccess」にアクセスできないようにする記述です。
パスワードなどの重要な情報を記述しているので、他人に見られないようにします。
③.htpasswdファイルを作成する
このファイルには「ID」と「Password」を記入します。これがBasic認証で入力することになる情報なんですが、Passwordは暗号化して記入してあげる必要があります。
暗号化ツールとして、「htpasswd file generation」を紹介します。
ここで暗号化したパスワードを.htpasswdに貼り付けていきます。
root:XrZvOgQ8U7x.6④２つのファイルをアップロード
「.htaccess」と「.htpasswd」の２つのファイルをFTPなどで認証をかけたいディレクトリにアップロードします（path.phpを置いた場所と同じ階層に置きます）
うまく行っていれば、example.comを開けばBasic認証の画面にいくはずです。
【WordPress編】自力でBasic認証のかけ方
私のWordPressサイト「トロンボーンクラブ」を例に操作していきます。
既にレンタルサーバーなどにWordPressサイトを立ち上げている前提で話していきます。
今回１からWordPressサイトを立ち上げるなら、先に適当なサンプルサイトをレンタルサーバーに立ち上げておくと、フルパスが調べやすくていいかと思います。
- レンタルサーバーのフルパスを調べる
- wp-contentと同階層に既にある.htaccessを編集
- .htpasswdを作成
- レンタルサーバーのwp-contentと同階層に２つのファイルを設置
- ページにアクセスしてIDとPasswordを入力
- ページを表示できたら成功
①.htacessと.htpasswdでかける場合
フルパス確認
まずはフルパスを確認します。
index.phpやfront-page.phpなどなんでもいいですが、テンプレートファイルに
<?php
echo __FILE__;
?>を記入してフルパスを確認します。すると、
/home/サーバーID/public_html/tromboneclub.site/wp-content/themes/トロンボーンクラブ/page.phpこのようにテンプレートファイルまでのフルパスがサイトに表示されます。
この「/home/サーバーID/public_html/tromboneclub.site」の部分までを使用するので、メモっておいて、すぐにPHPの記述は消してください。
.htaccess編集
WordPressの場合は「wp-content」などと同じ階層に既に.htaccessが存在するので、それを編集していきます。
すると、既にいくつか記述がされているのが見えると思います。
この#BEGIN WordPressの記述より前に設定を書いていきます。
AuthUserFile /home/サーバーID/public_html/tromboneclub.site/.htpasswd
AuthName "hogehoge"
AuthType Basic
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
deny from all
</Files>
.htpasswdをアップロード、.htaccessは上書きする
FTPで「public_html内の対象サイトドメイン内の、wp-contentなどと同階層」に「.htpasswd」と「.htaccess」の２つをアップロードしますと、以下のような構成になるかと思います。
これで終了です。
この状態でサイトにアクセスして
無事認証を突破できれば、成功です！
実はプラグインでもBasic認証をかけることはできるが…
Basic認証をかけるプラグインは一応あります。しかし、WP BASIC Authなど更新されていないものがほとんどなので、推奨できるものが正直ないです。
更新されているものだと、一応Password Protectedという、パスワードのみをかけられるものがあります。
個人的な感情で恐縮ですが、Basic認証でない認証のものは、レビューツールでサイトを取り込めないので、レビュアーとしてはきついです…^^;
ポートフォリオにもできればかけてほしい
これをご覧の方はポートフォリオにBASIC認証をかけるために見てくれてる方も多いと思いますが、もしBASIC認証がかかっていないと
おっと、ちゃんとheadにnoindexはあるのかな？
と確認する手間がかかるので、めんどくさがらずにかけてほしいと思います。
正直レンタルサーバーの管理画面から触れるのがベスト
FTPをつないでファイルの出し入れを行うのは、かなり緊張感があります。
ConoHa WING 
やエックスサーバー 
なら管理画面からBasic認証の設定が行えるため、おすすめです。
今回の「.htaccess」「.htpasswd」を設置する手法は
- 訳あってサーバーの管理画面に入れない
- サーバー自体が対応していない
- 実案件を意識して練習しておきたい
このような場合に使用するといいかなと思います。
以下の記事ではConoHa WINGでのサイト公開からBASIC認証のかけ方まで丁寧に解説しています。おすすめです！！
納品方法やテスト環境について詳しく学ぶ↓
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
作業はVSCodeで行っていきます。