はじめに
フロントエンドの業務やコーディング作業では、公開前に必ずクライアントに確認をとるわけですが、公開前なので不特定多数のアクセスを避けたい。そんなときによく使われているのがBasic認証です。
調べるといくらでも出てくるテーマですが、備忘録かねてまとめました。
目次
用語集
Basic認証とは（Wikipediaより）
Basic認証（ベーシックにんしょう、Basic Authentication）とは、HTTPで定義される認証方式の一つ。基本認証と呼ばれることも。
Basic認証では、ユーザ名とパスワードの組みをコロン ":" でつなぎ、Base64でエンコードして送信する。このため、盗聴や改竄が簡単であるという欠点を持つが、ほぼ全てのWebサーバおよびブラウザで対応しているため、広く使われている。
あくまで簡易的な仕組みなことに注意。特定のファイルやディレクトリに対してかけることもあるそうです。
.htaccess
webサーバーの設定を制御するファイル。ファイルをサーバー内に設置することで、リダイレクトなどアクセス制御を行う。
.htpasswd
認証に使うためのユーザー名（ID）とパスワードを格納したファイル。
実はファイル名は「.htpasswd」じゃなくても良いみたいです。
下準備〜不可視ファイルを作成できるようにする〜
Macで.htaccessファイルを作ろうとすると「"."（ドット）で始まる名前はシステムだけが使用できます。別の名前を指定してください」と警告が出てファイルが作成できません。
こちらの解決方法を3点ほど紹介します。
方法1. ターミナルでコマンド入力
$ defaults write com.apple.finder AppleShowAllFiles true
$ killall Finder
普段見えない不可視ファイルもすべて見えるようにして、ファインダー再起動するよってコマンドです。戻す場合は以下を再度コマンド入力。
$ defaults write com.apple.finder AppleShowAllFiles false
$ killall Finder
方法2. ショートカット
command⌘ + shift + .（ドット）
これだけで不可視ファイルの表示ON/OFFが切り替えられる。ターミナル操作ってなんやったんや...
方法3. サーバーにアップしてから名称変更する
「htaccess.txt」などと仮の拡張子で保存しておいて、サーバーにアップロードしてから「.htaccess」と名称変更する。この場合でも問題なく動作するようです。
.htaccessの書き方
AuthUserFile "/home/hogehoge/.htpasswd"
AuthName "Please enter your ID and Password."
AuthType BASIC
require valid-user
| パラメータ | 意味 |
|---|---|
| AuthUserFile | .htpasswdのファイルの所在地（サーバー内のフルパス）を指定。パスの調べ方は後述 |
| AuthName | Basic認証時に表示される文字列。日本語以外が無難らしいです。 |
| AuthType | 「BASIC」と指定することでBasic認証となる |
| require | valid-userを指定すると「すべてのユーザーに対して」Basic認証をかける |
.htpasswdの書き方
「ユーザー名:パスワード」のように書きます。
ユーザー名 → test
パスワード → 0000
上記の場合以下のようになります。
test:0000
ただし、前述したとおりBasic認証はセキュリティ的にはゆるいらしいのでパスワードは暗号化するのが一般的なようです。以下のツールをつかって暗号化しましょう！
Apacheのベーシック認証用パスワード発行フォーム
オンライン版「.htaccess」作成ツール
引っかかったところ・注意点
「AuthUserFile」サーバー内のフルパスを調べる方法
フルパスの調べ方がよくわからず、最初はサーバーエラーがでて途方にくれていました。
同じ現象にあった方は以下試してみてください。
- 以下を記述したPHPファイルを作成します。（名前は任意）
<?php
echo __FILE__;
?>
- フルパスが知りたいディレクトリにアップロードし、ブラウザでアクセスします。
- フルパスがブラウザに表示されます。
パーミッション（アクセス権）の変更
やらなくても動作はしますが、セキュリティ対策のため可能であればしておきましょう。
1. 「.htaccess」と「.htpasswd」をサーバーアップロード後、選択して右クリック
2. 「情報をみる」もしくは「属性変更」をクリック
3. 「8進法」とか「属性」と書かれたところの「644」を「604」に変更し適用。
参考リンク
以上です！思いの外長くなってしまった。
間違いや改善点などありましたら是非コメントお願いします！