はじめに
以前から気になっていたBasic認証を試していました。
限定共有したいサイトや開発中のサイトを他人に見られたくない場合に使えますね！
今回参考にしたのは、こちらの記事。
とてもわかりやすくまとめられており、この手順に沿ってやるとうまく行くはずです！
エラーが出た時の原因や対応方法についても書かれているので、まず問題ないでしょう。
では、早速挑戦。
実装
ファイル構成
コードを書いて行く前に、まずはこのようなファイルを用意します。
- トップ画面のidex.html
- Basic認証定義する.htaccess
- IDとPasswordを定義する.htpassword
の３つです。
index.htmlファイル
サンプルなのでシンプルにテストという文字列だけ入れました。
.htaccessファイル
このようにとてもシンプルで、４つの定義だけで大丈夫です。
AuthType => Basic
AuthName => [なんでもOK]
AuthUserFile => [.htpasswdファイルの場所]
require valid-user
ここで注意が必要なのが、AuthUserFile。サーバーにアップロードする際に自分がどこのディレクトリに置いたかで、記述が変わってきます。これが間違えてるとエラーになります。
.htpasswdファイル
ファイルの中身
このファイルには、IDとPasswordの組み合わせを書いておきます。後ほど認証画面で入力する値はここと一致しなければなりません。
書き方はID:Passwordです。
さて、ここでも注意点があるのですが、それはPasswordに関しては、暗号化しなければならないということです。
暗号化せずに書いて挑戦して見ましたが、認証されませんでした。
暗号化のために
この暗号化ですが、こちらのサイトを使うと簡単です。
画像のように、IDとPasswordを入れて、パスワード暗号化ボタンを押すだけ。
このように一瞬で生成してくれます。
あとはこれをコピペでいいので、.htpasswdファイルに書きます。
サーバーへのアップロード
今回はさくらサーバーを使って見ます。basicauthというディレクトリを作り、その中に先ほどの３つのファイルをアップロードします。
そう、たったこれだけ。めちゃくちゃ簡単！
検証
さて、先ほどアップロードした先のURLへアクセスしてみましょう！
すると。。。
おーーー！！ちゃんとIDとPasswordを求められます！！
入力してみましょう！
ほいっとな。
おー！ちゃんと「テスト」という文字が入ったindex.htmlファイルが表示されました！
大成功！
エラーが出たら
先ほど.htaccessファイルのAuthUserFileに設定する「ファイルの置き場所のパス」に注意が必要と書きましたが、実際に私もここで少しつまずきました。
先ほどは、./htpasswdと画像では書いてありますが、もちろんこれではうまくいきません。サーバーにアップロードさせた際のディレクトリ構造に合わせる必要がありますね。
もし、間違ったパスのままサーバーへアップロードするとどうなるのでしょう？
こうなります。
エラー例
認証を求められるので、入力します。
合っているIDとパスワードを入れても、繰り返しこのように認証を求められてしまいます。
このように、繰り返し認証を求められる場合は、.htaccessファイルのAuthUserFileに設定部分を疑いましょう。
対策
.htaccessファイルのAuthUserFileに書くパスの部分ですが、サーバーへのアップロードの際に以下の部分を見てみましょう。
FileZillaの場合はここに、ディレクトリへのパスが出ますのでコピペしちゃえば楽ですね。
だいたい/home/ディレクトリ名/www/ディレクトリ名/・・・・のようになるのではないでしょうか？
このようにするとうまくいきました。
最後に
このBasic認証に関しては、情報も多いので苦戦することはないでしょう。しかし、スクリーンショットとともに紹介している記事が見当たらなかったので今回まとめてみました。かなりハショッていますが、このくらいで本当にできちゃいますよー。