WEBサイト構築時のテストページに.htaccessを使ってBasic認証をかける

Pocket
LINEで送る

WEBサイトをコーディングしているとき、テストサーバーなり本番サーバーなりにアップしてクライアントに確認してもらうのですが、そのままアップしてGoogle等に拾われたら、開発中のページが公開された状態になり大変なことになってしまいます。
そんなときはBasic認証!
なんて、基本中の基本なのですがちゃんと覚えれていないので、記事としてまとめて復習&アウトプットでしっかり覚えたいと思います。

X serverやSAKURAインターネットではファイルマネージャーで簡単に設定できます。このページではそれ以外の手動で設定する内容になります。

.htaccessを作る

不可視ファイルをいきなり作れないので、まずはテキストエディターでhtaccess.txtを作ります。
文字コードが選べるエディターの方がいいと思います。

AuthUserfile /(フルパス)/.htpasswd
AuthGroupfile /dev/null
AuthName "Please enter your ID and password."
AuthType Basic
require valid-user

便宜上「HTML」となっていますが、テキストです。最後の行は改行を入れておきます。
以下、上記記述の解説です。

AuthUserfile ログインユーザーのIDとパスワードの情報を書いた.htpasswdの場所をフルパスで記載します。
(フルパスの調べ方は後述します)
AuthGroupfile 上記AuthUserfileのグループ版なのですが、Basic認証はユーザーごとに認証するため書かなくてもいいです。
AuthGroupfile /dev/nullで「指定無し」の意味になります。
AuthName ログイン情報の入力ウインドウに表示される文章になります。ブラウザによっては表示されません。
AuthType 認証方式です。Basic認証なのでBasicと記載します。
require valid-user 認証されたユーザーのアクセスを許可する設定です。

フルパスの調べ方

フルパス? URLでいいっしょ?
駄目なんです。
サーバーのルートディレクトリからのフルパスはURLとは別で、.htaccess(htaccess.txt)に記載するのはフルパスの必要があります。
調べるためには、まず任意の名前でphpファイルを作ります。中の記載はこれだけです。

<?php
echo __FILE__;
?>

このphpファイルを.htpasswdと同じ階層にアップしブラウザでアクセスすると、ブラウザの画面に該当phpファイルのフルパスが表示されます。
表示されたフルパスのphpファイル名の部分を.htpasswdに書き換えて、htaccess.txtに記載します。
確認後はphpファイルを忘れずに削除しておきましょう。

.htpasswdを作る

同じくテキストエディターでhtpasswd.txtを作ります。ここにBasic認証のログイン情報、IDとパスワードを記載します。
「ユーザー名:エンコードされたパスワード」なのですが、そのまま記載せず、オンライン上にたくさんあるパスワード暗号化ツールを使用して、暗号化したテキストを記載します(例えば下記サイト)。


ここではダミーでIDにuser、Passwordにtestsiteと入力し「生成」をクリックすると、下に暗号化されたテキストが生成されますので、それを使用します。

htaccess.txtと同じく、最後の行は改行を入れておきます。

アップロード&名称変更

ここまでで作成したhtaccess.txthtpasswd.txtを、FTPソフトでサーバーの認証をかけたいディレクトリにアップします。
そのままだとただのテキストファイルなので、それぞれhtaccess.txt.htaccesshtpasswd.txt.htpasswdと名称変更します。
パーミッションは「604」あるいは「644」にします。

.htaccessを置いたディレクトリにアクセスして、アクセス認証のウインドウが開き、設定したID・パスワードでログインできたらBasic認証、設置完了です!

うまくいかないとき

サーバーが古い!

古いサーバーだとBasic認証がうまくできないときがあります。サーバー管理者に問い合わせましょう。
XHTMLなどでコーディングされているクラシカルなサイトだと、古いサーバーを使用していることが多いので注意ですね。

サーバー側の設定でhtaccessを使えなくしている!

「テストページをこのサーバーに上げてbasic認証かけて〜」ってディレクターが言ってたじゃないですか、現場ですったもんだする前に環境整えてから連絡してくださいよ……と愚痴りたくもなりますが、これもサーバー管理者に問い合わせましょう。

テキストのコードがBOM付き!

どこかでタイプミスしている!

全角スペースを使ってる!

アップする場所を間違えてる!

おまけ:不可視ファイルを表示させる

Macintosh編

[command] + [shift] + [.(ピリオド)]
もう一度押すと、非表示に戻ります。

Windows10編

なんでもいいのでフォルダを開いて、上のタブから「表示」から「隠しファイル」にチェックを入れると表示されます。

Macに慣れてると毎回イラっとするんですが、Windowsではデフォルトでファイル拡張子が表示されない仕様になっています。拡張子を表示させたい場合もこの「表示」の「ファイル名拡張子」をチェックを入れると、無事表示されるようになります。

おまけ:metaに検索robot除けの記述をする

念のため、metaに検索robot除けの記述をしておきます。

<meta name="robots" content="noindex,nofollow,noarchive">

検索robotに「検索エンジンに登録させないでね(noindex)、リンクをたどらせないでね(nofollow)、キャッシュ作らないでね(noarchive)」というお願いする内容になります。絶対聞いてくれる訳でもないんですが、やらないよりはマシということで。
ちなみに、このmetaに書く方法とrobot.txtを作る方法は併用しない方がいいようです。

Pocket
LINEで送る

back to top