こんにちは、フリーランスエンジニアのしょーごです。
今回はBasic認証(ベーシック認証)の設定方法を、できるだけ分かりやすく紹介していきます。
あーたしかにAuthUserFileは一番混乱するかも
そのあたり丁寧に説明していきますね。
この記事を書いたのは
しょーご（@samurabrass）
このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
2025年には「8日以内提出」という納期と「修正10箇所以内」という品質項目が課された、模擬案件編も追加
コーディングに自信をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
BASIC認証とは何なのか？
ベーシック認証（Basic認証）とはWebサイトの特定の領域、つまりページやファイルにアクセス制限をかけることができる認証方法の1つです。
これによって、例えば
- 公開前のサイトに未関係の人間がアクセスできないようにする
- Googleのクローラーの巡回を防ぎ、検索一覧に載らないようにする
- 特定の人しか見せたくないテスト環境
これらを実現することができます。
ちゃんと認証がかかっていれば、「ユーザー名」「パスワード」の入力を求められます。
BASIC認証の技術的な話
仕組みについてもう少し詳しく話すと、BASIC認証というのはWebサーバーの機能です。特に無料のWebサーバーだと利用できないこともあります。
また、ログイン情報を入力して送信する際に「Base64」という文字コードを用いて通信を行います。「Base64」は簡易的な通信を行う際の文字コードで、httpなどで通信する（httpsじゃない）場合に脆弱になりやすいです。
セキュリティ面を考えて必ずhttps（SSL化）前提で設定しましょう。
理想：レンタルサーバーの管理画面でらくらく
レンタルサーバーの場合は管理画面からラクラクかけられるものもあります。
例えば私がおすすめしているConoHa WING 
の設定方法はとても簡単です。
ファイルのアップロードもFTPを使わずとも、ファイルマネージャーで即アップできますし、ディレクトリのアクセス制限を行えば、即Basic認証は終わります。
同じくおすすめしている「シン・レンタルサーバー 
」でも秒で設定が終わります。
ConoHa WING
https://www.conoha.jp/wing 
シン・レンタルサーバー
https://server.xfree.ne.jp/ 
初学者の方は、まずはレンタルサーバーの管理画面でかけてみてください。大量の画像で解説しています。
現実：万能な方法を紹介
しかし、管理画面からでも場合によってはうまくかからない場合もありますし、実案件ではサーバーの管理画面に入れない場合もあるかもしれないので、
FTPなどでレンタルサーバーにアクセスして自力でBASIC認証をかける万能な方法を紹介します。
ピンチのときほど、この手法のありがたみが分かります。
以下の記事で導入と使い方の学習を済ませておいてください。
Basic認証の前提
- 「.htaccess」と「.htpasswd」の２つのファイルを設置することで認証がかけられる
- ファイルを作成、編集するのは自分のエディタなどローカル環境、設置するのは「レンタルサーバー内」
- レンタルサーバーに接続するにはFileZiilaなどのFTPが必要なので、使い方は知っておくべし（FTPツールのおすすめFileZillaの使い方）
【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」にアクセスすると、ファイルを設置した場所までのフルパスが表示されます。
だとフルパスを確認したら、必ず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認証をかけることも可能
う〜んサーバー触ってhtaccessとか触りたくない…というかクライアントにサーバー情報教えてもらえなさそう…
こんな場合はプラグインを用いるといいです。以下の記事で解説しています。
ポートフォリオにもできればかけてほしい
これをご覧の方はポートフォリオにBASIC認証をかけるために見てくれてる方も多いと思いますが、もしBASIC認証がかかっていないと
おっと、ちゃんとheadにnoindexはあるのかな？
と確認する手間がかかるので、めんどくさがらずにかけてほしいと思います。
私の出しているコーディング練習課題もそうですし、デイトラWeb制作コースでも課題にはBASIC認証をかけてもらっています。
正直レンタルサーバーの管理画面から触れるのがベスト
FTPをつないでファイルの出し入れを行うのは、かなり緊張感があります。
「シン・レンタルサーバー 」やエックスサーバー 
なら管理画面からBasic認証の設定が行えるため、おすすめです。
今回の「.htaccess」「.htpasswd」を設置する手法は
- 訳あってサーバーの管理画面に入れない
- サーバー自体が対応していない
- 実案件を意識して練習しておきたい
このような場合に使用するといいかなと思います。
以下の記事ではシンレンタルサーバーでのサイト公開からBASIC認証のかけ方まで丁寧に解説しています。おすすめです！！
BASIC認証設定後はOGP確認も
本番環境では、一般公開の前にOGPの確認を行ってください。本番環境でもBASIC認証中にOGPの確認ができます。
納品方法やテスト環境について詳しく学ぶ↓
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。2025年も案件獲得や転職に成功した人が多数出ています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
しょーごログのコーディング課題後に、ニートから最大月収100万を稼げる用になった方のインタビュー記事も参考になるはずです。
ご寄付を頂けると今後の更新の励みになります！
作業はVSCodeで行っていきます。