Basic認証とは?アクセス制限の方法やポイント

Basic認証について

Webサイトへのアクセスを制限する方法の一つが「Basic認証」です。
Basic認証が設定されたサイトにアクセスしようとすると、下記の画像のようにユーザー名・パスワードの入力を求められます。それぞれ正しい情報を入力できて、初めてサイトにアクセスできるようになります。

開発途中のWebサイトを開発者・クライアントだけが閲覧できるようにしたい、というシチュエーションで用いられることが多いです。

Basic認証を設定するには

1.「.htaccess」ファイルを作成する

まずは「.htaccess」という名前のファイルを作成します。ファイルが作成したら、以下のように記述します。

AuthType Basic
AuthName "[認証名]"
AuthUserFile ".htpasswdファイルの場所"
require valid-user

それぞれの項目について解説していきます。

・AuthType
認証方法の設定をします。Basic認証を設定するには「Basic」と書きます。

・AuthName
認証の名前を定義します。任意の名称で構いませんが、文字化けの可能性を避けるため半角英数字で記述しましょう。

・AuthUserFile
次のステップで作成する「.htpasswd」というファイルへのフルパスを記述します。

・require valie-user
「全ユーザーに認証求める」という意味の記述です。コピペで貼り付けましょう。

以上4つの項目について記述できたら、認証をかけたいディレクトリ内でファイルを保存・アップロードすれば完了です。

※「.htaccess」は不可視ファイルと呼ばれるもので、通常はPC上で表示されないよう設定されています。ファイルを作ったけど見当たらない場合、「Command + Shift + .(ドット)」のショートカットキーで表示させることができます。

2.「.htpasswd」

次に「.htpasswd」というファイルを作成します。Basic認証で必要となるログイン情報「ID」「パスワード」について記述していきます。作成できたら、以下のように記述しましょう。

[ユーザー名1]: [暗号化されたパスワード1]

ユーザー名と暗号化されたパスワードを半角コロンで区切ります。
複数のアカウントを設定したい場合は、改行して新しいユーザー名とパスワードの組み合わせを記述します。

パスワードについてですが、何度も書かれているように「暗号化」しなければなりません。次のステップで、この暗号化について説明していきます。

3.パスワードを暗号化

Basic認証を設定する際、パスワードの暗号化は必須です。Web上に、Basic認証用のパスワード生成ツールを提供しているサービスがいくつかありますので、使いやすいもので行いましょう。この記事ではLUFTTOOLSを使用します。

ページを開いたら上のようにIDとPasswordの入力欄が表示されます。任意のものを記述したら、緑色の生成ボタンを押してください。

入力欄の下に、このような情報が表示されます。白枠の情報がIDとPasswordになりますので、これをそのまま「.htaccess」に張り付ければOKです。

これで必要な情報は揃ったので、「.htaccess」で指定した場所に「.htpasswd」をアップロードすれば完了です。

フルパスとは?調べ方について

「.htaccess」に記述する情報として、「.htpasswd」ファイルへのパスが挙げられたと思います。その際に、「絶対パス」でも「相対パス」でもなく、「フルパス」という形式で記述しなければなりません。「現在位置とは無関係に、最上位ディレクトリから目的のディレクトリ・ファイルまでの道筋を省略無しで記述する」というもので、聞き慣れない方も多いかと思います。

ただし、このフルパスを調べる方法は意外と簡単です。
まず、フルパスを調べたいディレクトリに下記のコードを記述したphpファイル(ここではpath.phpとします)を設置します。その後、path.phpのURLをブラウザで閲覧すると、そのディレクトリのフルパスがページに表示されるようになっています。

<?php
echo __FILE__;
?>
こちらの記事はいかがでしたか?
+1
0
+1
0
+1
0
+1
0

【PR】Tech Tech Zoo

【PR】オリジナルキャラクター「てくてくず」を公開しました!

作品は、随時X(旧Twitter)で公開していきます!
ぜひ「てくてくず」の作品を応援していただけたら嬉しいです。

X(旧Twitter)アカウントはこちら:
https://twitter.com/tech_tech_zoo

RECENT ENTRIES

  • スクロールアニメーションに革命!CSSだけで実装する方法を解説します【JavaScriptなし】

    VIEW MORE
  • 【徹底考察】divタグとは【今更聞けない】

    VIEW MORE
  • WordPressの条件分岐タグまとめ(記述例あり)

    VIEW MORE

CONTACT

contact