HTMLコーディング

とっても簡単なベーシック認証(Basic認証)のかけ方

日本酒のひやおろしがおいしい季節になりました、お久しぶりですこんにちわ。
ともさんです。

久しぶりに業務でベーシック認証(Basic認証)をかける機会があったので、そのお話です。

ベーシック認証(Basic認証)とは?

基本認証と呼ばれることも。Basic認証では、ユーザ名とパスワードの組みをコロン “:” でつなぎ、Base64でエンコードして送信する。このため、盗聴や改竄が簡単であるという欠点を持つが、ほぼ全てのWebサーバおよびブラウザで対応しているため、広く使われている。

引用元:Wikipedia

みなさんも、特定のページへアクセスした時にIDとパスワードを求められたことがあるのではないでしょうか。
ソレです。
そういうものを設定します。

tomo_01

こういう画面のやつ。

今は契約しているレンタルサーバーの管理画面から簡単にアクセス制限の設置ができたりしますので、可能であればそちらの方が一瞬で設定可能です。
事情があってレンタルサーバーの管理画面には入れないとか、そんな機能はない!といった場合は手作業でベーシック認証(Basic認証)をかけることになります。

ベーシック認証(Basic認証)のかけ方 手順

今回のベーシック認証(Basic認証)は設置したディレクトリ以下のすべてのコンテンツに対して制限をかける方法です。
実際の手順は以下に沿って行います。

  • .htaccessを作成
  • .htpasswdを作成
  • 指定されたディレクトリ内にアップロード

ほら簡単。

.htaccessを作成

.htaccessを作成します。
ベーシック認証(Basic認証)の場合は以下のように記述すればOKです。

AuthUserFile フルパス/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter your ID and パスワード"
AuthType Basic
require valid-user

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

AuthUserFile

設定したいページのフルパスを記述します。
httpから始まるURLではなく、/homeから始まるフルパスです。
レンタルサーバーの管理画面から確認ができます。それができない場合はphpinfo.phpを使って調べましょう。
※phpinfo.phpについてはググれば出てきますので調べてみてください。

AuthName

“の中身を好きなように変えてください。
パスワード入力画面に表示される文字です。

.htpasswdを作成

設定するIDとパスワードを以下のような形式で記述します。

user:u9dGDdcN34MQM

これはIDが「user」で、パスワードが「hogehoge1234」です。
あれ?
パスワードが違いますねえ。

実は、パスワードは暗号化して記述する必要があります。
(ワタクシ、よくこの暗号化手順を忘れて認証できずに「ぐわあっ」ってなります。)

.htpasswdに記述するパスワードの暗号化はいろいろなサイト様がツールを提供してくださっていますので利用させていただきましょう。
私はよく以下サイト様を利用させていただいてます。
LUFTTOOLS

IDとパスワードは複数設定できます。
改行してどんどん追記すればOKです。

指定されたディレクトリ内にアップロード

ここまで準備できたら、あとはFTPでサーバーへアップロードするだけです。
作成した.htaccessと.htpasswdを同一ディレクトリ内にアップロードしましょう。

アップロードしたら、パーミッションを「604」に設定してください。

あとは確認

実際にベーシック認証(Basic認証)をかけたURLにアクセスします。
入力窓が表示されたら、設定したIDとパスワードで閲覧可能かを確認しましょう。

晴れて閲覧できたら、きちんと設置ができたということですね。
おめでとうございます(≧▽≦)

まとめ

ベーシック認証(Basic認証)は今はあまり使わない気もしますが。
こんな手作業で設置することもあんまりないのではないかなーと。
実際、私は2年ぶりくらいでした(; ・`д・´)

まあ、知識として知ってるのは悪いことではないと思うので。
以上、ともさんでしたー。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    【WordPressでGO!】WordPressをローカル環境へインストールしてみよう

    あけましておめでとうございます。今年もよろしくお願いいたします。2018年一発目の記事は、WordPressです(≧▽≦)WordPr…

  2. HTMLコーディング

    棒グラフをcssで表現してみよう

    何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。ちなみに、私のおすすめは「美少年」です。先日の案件で、サイト内に棒グ…

  3. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法

    先日会社の人たちと初登山へ行ってきましたが3回ほど盛大にコケてオシリが痛くなったともさんです、こんにちわ。・・・いや、登山楽しかったですよ。次回は…

  4. HTMLコーディング

    cssでグラデーションを描いてみよう

    年末に向けていろいろと身辺周りが慌ただしくなってきましたね。こんにちは、ともさんです( ^ω^ )グラデーションをcssで描けることはもう…

  5. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  6. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  2. HTMLコーディング

    【PHP】ページ毎に表示を変えるサイドメニューの分岐の方法
  3. WEB集客

    「Googleトレンド」を使いこなして人気のキーワードと流行を把握しよう
  4. WEBデザイン

    Photoshopで空模様の画像を作る方法
  5. WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.2リンクオブジェクト編
PAGE TOP