Basic認証を試してみた

# はじめに
以前から気になっていたBasic認証を試していました。![成功する際の画面-2.png](https://qiita-image-store.s3.amazonaws.com/0/252687/d675c905-e378-3ef9-98ec-b7d5afc83b8a.png)


限定共有したいサイトや開発中のサイトを他人に見られたくない場合に使えますね！

今回参考にしたのは、こちらの記事。
![Basic認証検証して見た.png](https://qiita-image-store.s3.amazonaws.com/0/252687/c182af32-7bc9-972c-2d9d-6045fb3793af.png)

とてもわかりやすくまとめられており、この手順に沿ってやるとうまく行くはずです！
エラーが出た時の原因や対応方法についても書かれているので、まず問題ないでしょう。

では、早速挑戦。
# 実装
## ファイル構成
![ファイル構成.png](https://qiita-image-store.s3.amazonaws.com/0/252687/47fc4e66-fdfc-a83d-6161-c47529bf5620.png)
コードを書いて行く前に、まずはこのようなファイルを用意します。
 - トップ画面の`idex.html`
 - Basic認証定義する`.htaccess`
 - IDとPasswordを定義する`.htpassword`
の３つです。

## index.htmlファイル
![indexhtmlのサンプル.png](https://qiita-image-store.s3.amazonaws.com/0/252687/e3229c31-bf5b-221a-98c7-1434084b30a0.png)
サンプルなのでシンプルにテストという文字列だけ入れました。

## .htaccessファイル
![htpasswdへのパスが間違った記述.png](https://qiita-image-store.s3.amazonaws.com/0/252687/be815cf7-c508-e733-5767-18df7f57a46e.png)
このようにとてもシンプルで、４つの定義だけで大丈夫です。
`AuthType` => `Basic`
`AuthName` => `[なんでもOK]`
`AuthUserFile` => `[.htpasswdファイルの場所]`
`require valid-user`

ここで注意が必要なのが、`AuthUserFile`。サーバーにアップロードする際に自分がどこのディレクトリに置いたかで、記述が変わってきます。これが間違えてるとエラーになります。

## .htpasswdファイル
### ファイルの中身
![htpasswdにて暗号化されて記述.png](https://qiita-image-store.s3.amazonaws.com/0/252687/6238b24e-61db-6302-1c7b-2379a95ba501.png)
このファイルには、IDとPasswordの組み合わせを書いておきます。後ほど認証画面で入力する値はここと一致しなければなりません。

書き方は`ID:Password`です。

さて、ここでも<font color="red">注意点</font>があるのですが、それは`Password`に関しては、<font color="red">**暗号化しなければならない**</font>ということです。

**暗号化せずに**書いて挑戦して見ましたが、<font color="red">認証されませんでした</font>。

### 暗号化のために
この暗号化ですが、こちらのサイトを使うと簡単です。
[![基本認証パスワード暗号化サイト.png](https://qiita-image-store.s3.amazonaws.com/0/252687/ed8473fd-d27a-0d5c-55b3-cecd37c67a58.png)](https://www.nishishi.com/scripts/htpasswd/)

画像のように、IDとPasswordを入れて、`パスワード暗号化`ボタンを押すだけ。

![基本認証パスワードの暗号化画面.png](https://qiita-image-store.s3.amazonaws.com/0/252687/c46d8435-f5f4-6e69-e8c1-9e4286d7ec84.png)
このように一瞬で生成してくれます。
あとはこれをコピペでいいので、`.htpasswd`ファイルに書きます。

## サーバーへのアップロード
![サクラサーバーへのアップロード-2.png](https://qiita-image-store.s3.amazonaws.com/0/252687/f214f2f0-44ce-c42c-1792-72775088f915.png)
今回は`さくらサーバー`を使って見ます。`basicauth`というディレクトリを作り、その中に先ほどの３つのファイルをアップロードします。

そう、たったこれだけ。めちゃくちゃ簡単！

# 検証
さて、先ほどアップロードした先のURLへアクセスしてみましょう！
すると。。。
![成功する際の画面.png](https://qiita-image-store.s3.amazonaws.com/0/252687/4503b28f-a2ce-0314-eccd-c0e35f5594fe.png)
おーーー！！ちゃんとIDとPasswordを求められます！！
入力してみましょう！

ほいっとな。
![成功画面.png](https://qiita-image-store.s3.amazonaws.com/0/252687/c3237e84-cd35-af85-e977-baeedb57cf83.png)

おー！ちゃんと「テスト」という文字が入った`index.html`ファイルが表示されました！
**大成功！**

# エラーが出たら
先ほど`.htaccess`ファイルの`AuthUserFile`に設定する「ファイルの置き場所のパス」に注意が必要と書きましたが、実際に私もここで少しつまずきました。

先ほどは、`./htpasswd`と画像では書いてありますが、もちろんこれではうまくいきません。サーバーにアップロードさせた際のディレクトリ構造に合わせる必要がありますね。

もし、間違ったパスのままサーバーへアップロードするとどうなるのでしょう？

こうなります。

## エラー例
認証を求められるので、入力します。
![入力してみる-2.png](https://qiita-image-store.s3.amazonaws.com/0/252687/65fc9289-c795-2ce7-effc-2fdb39fc17b3.png)
合っているIDとパスワードを入れても、<font color="red">繰り返しこのように認証を求められてしまいます。</font>
![再度IDとパスワードを要求される-2.png](https://qiita-image-store.s3.amazonaws.com/0/252687/b0f228e2-0ddc-68dd-e82b-633882b0f826.png)
このように、繰り返し認証を求められる場合は、`.htaccess`ファイルの`AuthUserFile`に設定部分を疑いましょう。

## 対策
`.htaccess`ファイルの`AuthUserFile`に書くパスの部分ですが、サーバーへのアップロードの際に以下の部分を見てみましょう。
![サクラサーバーへのアップロード-2-2.png](https://qiita-image-store.s3.amazonaws.com/0/252687/6f2dc6b7-0d2d-cde3-19bb-a331c9d2dd32.png)
FileZillaの場合はここに、ディレクトリへのパスが出ますのでコピペしちゃえば楽ですね。
だいたい`/home/ディレクトリ名/www/ディレクトリ名/・・・・`のようになるのではないでしょうか？

![合ったhtpasswdへのパス.png](https://qiita-image-store.s3.amazonaws.com/0/252687/78913e27-4d88-54eb-8488-cb35c2d961d8.png)

このようにするとうまくいきました。


# 最後に
このBasic認証に関しては、情報も多いので苦戦することはないでしょう。しかし、スクリーンショットとともに紹介している記事が見当たらなかったので今回まとめてみました。かなりハショッていますが、このくらいで本当にできちゃいますよー。