任意のwebページにパスワード認証をかける方法

WEB / アプリ

とっちゃん@nyanco! です。

任意のwebページにパスワード認証(Basic認証)をかける方法の覚書です。

webページにパスワードをかける時は、今まではレンタルサーバーのコントロールパネルから設定するものだと思っていたのですが、FTPソフトがあれば意外と簡単に自分だけでできちゃうことに気付いてビックリだったので、一連の流れを記事にまとめておきます。

スポンサーリンク

パスワード認証(Basic認証)とは

そもそもパスワード認証(ベーシック認証)とは、対象のページにアクセスしようとすると、以下のようなウィンドウでアクセスしてきたユーザーにIDとパスワードの入力を求めることができる、もっとも簡易的な認証機能のことです。

▲こちらはWindowsのGoogle Chromeのウィンドウ。
ブラウザによって結構見た目や文言が変わります。

ちなみにMacでも、iPhoneでもAndroidスマホでも同じように機能する汎用性の高いスグレモノです。

任意のwebページにパスワード認証をかける方法

主に下記サイト様の記事を参考にしました。とても分かりやすいです!

詳しい説明は上記サイト様に任せるとして、ザックリ理解してサックリ設置したい人向けの記事を目指して書きます。

1. テキストファイルを2つ作成

まず、パスワードをかけたいディレクトリ内に新規でテキストファイルを2つ作成します。
※このディレクトリに含まれるページ・コンテンツ全てが認証対象となります。つまりTOPページのディレクトリに設置すると全てのページが認証対象となります。

・新規テキストファイルの作成方法

「右クリック」>「新規作成」>「テキスト ドキュメント」

かもしくは、

ショートカットキー「ctrl」+「shift」+「T」

で「新しいテキスト ドキュメント.txt」を生成できます。

ファイル名を変更する時は拡張子「.txt」まで全てを選択した状態で、それぞれ以下の名前に変更します。

.htaccess
.htpasswd

普段は見慣れない、拡張子だけのようなファイル名です。

ちなみに拡張子を含めて名前を変更しようとすると、下記のアラートが出ますが「はい」でOKです。

拡張子が非表示になっていると拡張子の編集ができないので、下記サイト様を参照して拡張子を表示した状態で行ってください。
Windows10 – ファイルの拡張子を表示/非表示にする – PC設定のカルマ

2. 「.htaccess」ファイルを編集

「.htaccess」をメモ帳などのテキストエディタで開いて、次の4行をコピペ・記述します。

AuthType Basic
AuthName [ 適当な文字列 ]
AuthUserFile [ .htpasswdファイルの場所 ]
require valid-user

1行づつを説明します。
赤字部分以外はそのままでOKです。

・【1行目】AuthType Basic
IDとpasswordによって行う、もっとも基本的な認証方式である「Basic認証」を使うという指定の意味です。このままでOK。

・【2行目】AuthName [ 適当な文字列 ]
赤字部分に、認証を求められる画面に現れる文字列を引用符(”)で囲んで記述します。ちなみに表示されないブラウザもあります。任意のものでOKですが、日本語は文字化けすることもあるので英数字で。【例:”password”】

・【3行目】AuthUserFile [ .htpasswdファイルの場所 ]
先ほど新規作成した「.htpasswd」ファイルのファイルパス(場所)をフルパスで記述します。

こちらで少し苦戦しましたが、.htpasswdファイルの場所のフルパスの調べ方はこちらの記事でクリアできました。

こちらも簡単にまとめると…

1. 「index.php」という拡張子が「php」のテキストファイルを作成する

2. メモ帳などのテキストファイルで「index.php」を開き、下記3行をコピペする

<?php
echo __FILE__;
?>

3. .htpasswdファイルがある同じ階層に「index.php」をアップロードする

4. ディレクトリのURLにブラウザでアクセスすると、下記のようにフルパスを表示してくれます。

全てコピーして、末尾の「index.php」を「.htpasswd」に変更すればフルパスの完成です!

・【4行目】require valid-user
全てのアクセスしたユーザーに認証を求めるという設定です。このままでOK。

これで「.htaccess」ファイルの編集は完了なので、保存して閉じておきます。

続いて「.htpasswd」ファイルを編集

.htpasswdファイルの中身は、以下のようにとってもシンプルな書式です。

ユーザー名:パスワード
ユーザー名:パスワード
ユーザー名:パスワード

ユーザー名(ID)と対になるパスワードを半角コロン記号「:」で区切って一行ずつに記述するだけです。
上記では3行、つまり3人分のユーザーの設定ということになりますが、1人で良いなら1行だけでOKです。

例:

yamada:OwDsByaIZup4c
itou:rwyyzxRCfCKUI
satou:ieMdsJ4dPNvuk

上記の例では、1行目が「yamada」というユーザーの設定、2行目が「itou」というユーザーの設定、3行目が「satou」というユーザーの設定で、「:」から右の文字列がパスワードです。

ただしこのパスワードはパスワードそのものではなく、「ハッシュ化」されたパスワードとなり、ハッシュ化するには別途webサービスなどを利用する必要があります。
※ハッシュ化とは、ざっくり言うと元にもどせない暗号化のようなものです。ハッシュ化された文字列はパスワードではない点に注意!!

▼こちらのwebサービスなどを利用します。
基本認証パスワード暗号化 – にしし ふぁくとりー

これで「.htpasswd」ファイルの編集は完了です!

「.htaccess」と「.htpasswd」をアップロードしてブラウザでアクセスする

FTPソフトで編集した「.htaccess」と「.htpasswd」をアップロードして、あとはブラウザで対象となるURLにアクセスします。

下記のようなアラートが出るので、ユーザー名とパスワードを入力してページが閲覧できたら成功です!

閲覧できない場合、以下の設定が間違えている可能性があります。

  • ハッシュ化されたパスワードを入力している
  • 「.htaccess」内の「.htpasswd」のフルパスが間違えている

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント