メンタリングをしていて、ベーシック認証のかけ方についてご質問いただくことが割と多かったので、本記事にまとめていきます！
カンスケ作業自体はさほど難しくないので、1つ1つ丁寧に進めていきましょう！
ベーシック認証とは
サイトにアクセスした際に、まれにユーザー名とパスワードの入力が求められる場合があります。
添付のようなものです。
これがいわゆるベーシック認証で、管理者が設定したユーザー名とパスワードを正しく入力することで、サイトが閲覧できるようになります。
カンスケサイトを不特定多数の方に閲覧してほしくないようなケースで使用されます。例えば、サーバーにアップされた開発中のサイトなどに使用されますね！
ベーシック認証のかけ方
では以下のステップで進めていきます！
①.htpasswdファイルを作成
②FTPでサーバーにアクセスし、.htpasswdファイルをアップロード
③.htaccessファイルに、ベーシック認証用の記述を追加
①.htpasswdファイルを作成
ファイルの作成
まず、ご自身のPCで、「.htpasswd」という名前で新規ファイルを作成してください。
以下のようにVSCodeを使うと簡単です。
認証用のユーザー名とパスワードを.htpasswdに記述
作成した.htpasswdファイルに、直接認証用のユーザー名とパスワードを記載していきます。
ただし、ユーザー名とパスワードは暗号化しておく必要があるので、下記LUFTTOOLSさんの便利なツールを使って暗号化していきます！
上記にアクセスしましたら、以下のように赤枠に設定したいユーザー名とパスワードを入力してください。
今回は簡単に、ユーザー名をkansuke・パスワードをpassにしたいと思います。
入力後、「生成」ボタンを押すと、青枠に暗号化された文字列が出てきますので、それを.htpasswdにコピペしてください。
②FTPでサーバーにアクセスし、.htpasswdファイルをアップロード
次に、サーバーにFTP接続し、①で作成した.htpasswdをアップロードしていきます！
※今回FTPツールは、FileZillaを使用しますが、FileZilla以外を使用している方はそれ以外で同じように進めていただければ結構です。
FTP接続→ベーシック認証をかけたいサイトのルートディレクトリに移動
まず、ベーシック認証をかけたいサイトのサーバーにFTP接続し、ベーシック認証をかけたいサイトのルートディレクトリに移動します。
WordPressであれば、以下赤枠のようにwp-adminやwp-contentがある階層が、ルートディレクトリになります。
.htpasswdファイルをアップロード
移動したルートディレクトリに、.htpasswdファイルをアップロードします。
これでアップロードは完了です。
③.htaccessファイルに、ベーシック認証用の記述を追加
最後に、.htpasswdをアップロードしたディレクトリに、.htaccessというファイルを用意します。
WordPressサイトの場合は、WordPressインストール時にすでに存在しているはずです。
WordPress以外の例えば静的サイトの場合はご自身で.htaccessファイルの作成が必要です。
その場合は、.htpasswdを作成した際と同じ方法で.htaccessファイルを作成し、ベーシック認証をかけたいサイトのルートディレクトリにアップロードしてください。
.htaccessファイルに、ベーシック認証用の記述を追加
では、.htaccessファイルに認証用の記述を追加します。
まずは以下の4行をコピペしてください。
AuthType Basic
AuthName "Input your ID and Password."
AuthUserFile /home/ドメイン名/フォルダ名/.htpasswd
require valid-userそして、3行目の「AuthUserFile /home/ドメイン名/フォルダ名/.htpasswd」だけ修正します。
3行目は、サーバーのhomeディレクトリから、.htpasswdまでのファイルパスを記述する必要があります。
FileZillaを使用している場合は、.htpasswdが存在する階層まで移動したうえで、下記赤枠の部分のパスをそのまま転記し、「転記した文字列/.htpasswd」の形になればOKです！
ファイルパスの修正が完了しましたら、修正した.htaccessファイルを再アップロードし、保存します。
これで、サイトにアクセスをすると、以下のようにベーシック認証がかかっているはずです。
設定したユーザー名とパスワードを入力し、問題なくログインできるか試してみてください！
おしまい
以上、ベーシック認証のかけ方でした！
クライアントワークにて、制作したサイトをテストサーバーにアップし先方に確認いただく際などは、最低限ベーシック認証をかけておきましょう。
公開前のサイトが意図せずネット上に公開されてしまうようなミスを防ぐことができます。