たった3分!ベーシック認証の付け方!【プログラミング】

Basic認証 備忘録

こんにちは、3度の飯よりベーシック認証、なっちる先生(@nacchi_jagariko)です。

今回は、エンジニアなら知っておくべきベーシック認証の付け方について説明していきます。

とっても簡単なので、3分ほどで終わります〜。

この記事は以下のような人向けです。

ベーシック認証の付け方を知りたい

それでは参りましょう。

スポンサーリンク

ベーシック認証とは

そもそもベーシック認証とはなんなのかという方もいるかもしれません。

サイトにアクセスするとユーザー名パスワードの入力画面が出てくるようにするのが、ベーシック認証になります。

開発するためにサイトを非公開にするためであったり、セキュリティ的に守るためにベーシック認証を設定します。

以下で、ささっとベーシック認証の設定方法を解説していきます。

ベーシック認証の付け方は3ステップ!

さて、早速ベーシック認証をつけていきましょう。

ベーシック認証を付けるまでは、

  1. .htaccessファイルの作成
  2. .htpasswdファイルの作成
  3. ファイルをアップロードする

という3ステップになります。

以下で詳しく説明していきます。

.htaccessファイルの作成

.htaccessファイルに追加すべき文を簡単に作成できるサイトがあるので、そちらで作っていきましょう。

こちらのサイトです→.htaccess Editor

サイトにアクセスしたら、

  • ファイル一覧の拒否
  • ベーシック認証

のタブにてベーシック認証の諸々を設定していきます。

ファイル一覧の拒否

こちら「する」に設定してください。

ベーシック認証

ユーザー名、パスワード、.htpasswdのファイルのパスを記入してください。

.htpasswdのファイルのパスは、ルートパスにしてください。

/home/hogehogeとか、/var/www/htmlとかですね。

そして、ファイルの配置ですがドキュメントルート以下にしてください。

.htaccessファイルが元からあるなら、同じ階層に.htpasswdファイルを作成するのが手っ取り早いです。

上の手順を踏むと、ページ下にテキストが出てきます。

そちらのテキストを.htaccessファイルに貼り付けて、ひとまず.htaccessファイルについては完了です。

※生成したテキストの意味は記事の最後で解説してあります。

.htpasswdファイルの作成

お次に.htpasswdファイルを作成していきます。

.htpasswdファイルには、ユーザー名とパスワードを書いておきます。

しかし、ファイルに書くパスワードはきちんとエンコードしたものを記入しなければいけません。

上の画像のように、「.htpasswdを作成」ボタンを押せば、自動でエンコードされたものが出てくるので、そちらを.htpasswdファイルに記入して完了です。

上記の場合で言うと、

がを.htpasswdファイルに記入します。

複数設定したい場合は、同じ要領で、ユーザー名とパスワードを以下のように書いてしまえればOKです。

ファイルをアップロードする

最後に、CyberduckFileZillaのようなFTPソフトを使って.htaccessファイルと.htpasswdファイルをアップロードすれば完了です。

どちらも不可視ファイルだから注意してね!

不可視ファイルの表示の仕方のショートカットはこちらを参考にしてみてください↓

作業がはかどる!ショートカットはこれだけおさえおこう!
こんにちは、なっちる先生(@nacchi_jagariko)です。 日々、ショートカットキーを駆使して、ストレスなくパソコンとともに過ごしています。 パソコンで作業する際、 あぁーーー!コピペめんどい!...

詳しい説明

.htaccessにて貼り付けたテキストの説明を少しします。

【全体像】

【個別の説明】

<Files ~ “^\.(htaccess|htpasswd)$”> deny from all </Files>

.htaccessファイルと.htpasswdファイルをブラウザで見れないようにする設定です。

Options -Indexes

cssやjsのファイルにブラウザでアクセスした時に見れるようにしないという意味です。

AuthUserFile /home/hogehoge

.htpasswdまでのパスです。(ルートパス)

AuthGroupFile /dev/null

グループごとにアクセスを制限はしないという意味です。
「AuthGroupFile=アクセス制限するグループ」は「/dev/null=存在しない」

AuthName “Please enter your ID and password”

ダイアログに表示される文章です。

AuthType Basic

basic認証にしますという意味。
basic認証のほかに、Digest(ダイジェスト認証)があります。

require valid-user

入力したIDとパスワードが合っていればアクセスできるという意味。(ユーザー名に関係なく)
「valid-user=IDとパスワードを正当に入力したユーザー」

order deny,allow

Allow にも Deny にもマッチしないリクエストは拒否されるという意味。
こちらデフォルトの設定なので、わざわざ書かなく大丈夫です。

 

参考ページ

まとめ

こんな感じでほんの数分でベーシック認証は設定できます。

このサイトみたいに.htaccessファイルを簡単に作れるサイトがあるのとっても助かりますね。

JavaSciptで作れそう〜

プログラミングの勉強として作ってみるのも楽しいかもしれませんね。

以上でなっちる先生の授業を終わります〜。

素敵なプログラミングライフを!

スポンサーリンク
備忘録
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました