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コーディング

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

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

  2. HTMLコーディング

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

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

  3. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの対処法

    大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。さて、前回に引き続き今回もEC-CUBE関…

  4. HTMLコーディング

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

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

  5. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  6. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

コメント

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

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

CAPTCHA


最近の記事

  1. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法
  2. WEBデザイン

    【Photoshop】ボタントレース方法
  3. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法
  4. WEBデザイン

    【illustrator】簡単トレース方法
  5. HTMLコーディング

    EC-CUBE3をローカル環境へインストールしてみよう
PAGE TOP