WordPressにBasic認証をかけて閲覧制限をつける

デイトラ卒業制作でWordPressサイトを作るのですが、実際にあるサイトの”実案件を体験してみよう”という形式なので成果物としてポートフォリオサイトに掲載する際に”模写コーディングであることの明記”に加えて”Basic認証”を求められます(基本認証という呼び方もあります)。この記事ではそのBasic認証についてまとめています。方法は様々あるのですが、今回は.htaccessと.htpasswdというファイルを用意する方法を採用しましたので、そこだけ知りたい方は「.htaccessと.htpasswdを使用」に飛んでください。

Basic認証とは

簡単に言うと閲覧制限です。ブラウザ上のサイトにアクセスした時にポップアップで「ユーザー名とパスワード」を求められ、入力しないと表示できない”鍵”の役割です。間違った内容を入力すると「401 Authorization Required」などのエラーメッセージが表示されサイト内に入れない、という動きになります。広く一般に見てほしいページのような場合は付けませんが、デイトラのような有料の会員サイトのメンバーや制作中のサイトを関係者のみで共有したい場合に用いられます。

このような特徴があります。ルートディレクトリに設置すればサイト全体が認証範囲になります。

しかしセキュリティの面での不安もあり、”httpでのBasic認証”は簡単に情報を読まれてしまいます。サーバーに送信する際に「Base64」という文字コードを使用していてそれは”Wireshark”を使うと通信をキャプチャーされてしまい、idとpasswordともに見られてしまうようです。Basic認証は簡易的な制限であり、このような脆弱性も理解したうえでBasic認証を使用してください。ちなみにさらに厳重な方法では”ダイジェスト認証”などがあるそうです。

Wire sharkは外部とどのような通信を行っているかを調べるネットワーク解析ツール。無料で使用でき、不審な通信を調べたりやデバック的役割に広く使われているツールであるため「そういうのもあるんだな～」と覚えておきましょう。

方法は大きく分けて3つ

WordPressサイトにBasic認証をかける方法は３つあり、まとめておきます

プラグインを使用

ここまでWordPressサイトを作ってきた人には「じゃあプラグインかな」という方もいるかと思いますが、当然プラグインを入れた分だけサイトは重くなります。”プラグインの入れすぎは良くない”と聞いたことありますよね？そしてそのプラグイン側にも課題があります。よく名前が挙げられる「WP BASIC Auth」が最終更新6年前…「HTTP Auth」で2年前…何か大きな問題があれば報告が挙がるでしょうからこれを使用してもいいのですが「使用中のWordPressバージョンで未検証」とある場合は一旦立ち止まってみてください。

レンタルサーバーから設定

プラグインの導入・設定や.htaccessファイルへの記述も無く、レンタルサーバーの管理画面で設定するのこの方法が最も簡単だと思います。契約しているサーバー会社によって細かな手順は異なると思いますが、

大体このような流れだと思いますので、「サーバー会社名　Basic認証」などで検索しひとつずつ進んでください。プラグインとは違いサーバーの管理画面は扱っている情報の重要度が高いのでくれぐれも慎重に。

.htaccessと.htpasswdを使用

いよいよ本題です。今回はこの２つのファイルを作りBasic認証をデイトラ卒業制作に導入しましたが、「WordPress Basic認証」で検索すると出てくる内容はだいぶ異なります…それで僕自身迷ったわけですが、うまくいった方法を紹介します。

.htpasswdを作成

まずは簡単なほうから作ります。名前の通りIDとパスワードをここに記します。例としてID:shirokuma パスワード:graduationとしますが、パスワードは暗号化されたものでなくてはいけないので、「LUFTTOOLS」でこのパスワードを暗号化します。

「生成」を押すと下に「ID:password」の形で暗号化されました

これをコピーして「.htpasswd」というファイルを作り

shirokuma:mA7ojHv8KL8dk

とだけ貼り付けて.htpasswdの作成は完了です。これだけです。

.htaccessを作成

「.htaccess」というファイルを作り…厳密には.htaccessは僕の場合すでにありましたし、もう何か書かれています。#BIGIN LiteSpeedから始まり#END WordPressとありましたが、これは消さないように残しておき、書き足します。すでに存在するファイルに追記する際にはバックアップを忘れずに。ここから様々な情報がヒットして迷う所なんですが、複数記しておきます。参考にしてください。

AuthType Basic
AuthUserFile "フルパス"/.htpasswd
AuthName "[認証名]"
require valid-user

AuthType Basic
AuthUserFile “フルパス”/.htpasswd
AuthGroupFile /dev/null
require valid-user
<Files ~ “^.(htpasswd|htaccess)$”>
deny from all
</Files>

この２つが出てきますね。僕はこのどちらでもなく(笑)AuthType,UserFile,GroupFile,Name,requireの５項目を書き<Files ~></Files>は書いていませんが、問題無く出来ました。Name”認証名”は好きな名称で大丈夫です。問題は”フルパス”です。

フルパスの調べ方

今回はWordPressサイト全体に認証をかけて閲覧を制限することを想定しています。フルパスとはそのディレクトリが「どこにあるかの絶対位置」を意味し、「.htpasswdはここにあるよ」を.htaccessで示すことをしていきます(「ここから見てあれはこの位置だよ」が相対パスでしたね)。そこでフルパスを調べるわけですが、フルパスはサイトのURLではありませんので注意が必要です。「fullpass.php」というファイルを作り

<?php
echo __FILE__;
?>

とだけ書いてください。これを認証をかけたいディレクトリにアップロードします。

「は？どこ？」って思いましたよね…僕もです。ここで躓きました。”Basic認証をかけたいディレクトリ”って当たり前のように書かれてて初心者思いでないページが多すぎます。

fullpass.phpはwp-admin,content,includesと同じ階層に設置します。content→themes→自作テーマの中かと思ってましたが、これではプラグインなどは外になってしまいますからね。先に書きますが.htaccessと.htpasswdもここにアップロードすることになります。

URL「サイト名/fullpass.php」にアクセスするとfullpass.phpがいる場所をブラウザで表示してくれますのでコピーしてください。これも作業環境によって様々なので「/home/~/~/」もあれば「/var/~/~/」などもあるそうですが僕は/home/~でした。サーバー情報なのでパスを調べた後のfullpass.phpはアップロードしたままではなく削除しておく方がいいそうです。

この段階で「/home/~/~/fullpass.php」になっているので最後だけ「/home/~/~/.htpasswd」に書き換えます。これが.htaccessのAuthUserFileの “フルパス”/.htpasswdの部分になるわけです。ここまで出来て.htaccessファイルの完成です。.htpasswdに比べて難しいですよね。

先ほども書きましたが.htaccessと.htpasswdをfullpass.phpと同じようにwp-admin,content,includesと同じ階層にアップロードしてやっっと準備が整いました。サイトにアクセスしてみましょう。

ポップアップで認証を求められたら成功です。お疲れ様でした。