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

とっちゃん@nyanco! です。

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

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

パスワード認証（Basic認証）とは

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

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

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

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

Basic認証(基本認証)でアクセス制限をかける方法 [ホームページ作成] All About

ウェブサイト内の特定ページやディレクトリにアクセス制限を施す設定方法として、Basic認証(ベーシック認証／基本認証)の使い方を初心者向けに解説。ユーザー名(ID)とパスワードの入力が必要な会員制ホームページの作成方法をご紹介。HTMLの修正は不要で、.htaccessファイル等を書けば簡単にパスワード認証を設定できま...

allabout.co.jp

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

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

まず、パスワードをかけたいディレクトリ内に新規でテキストファイルをふたつ作成します。

このディレクトリに含まれるページ・コンテンツ全てが認証対象となります。つまりTOPページのディレクトリに設置すると全てのページが認証対象となります。

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

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

かもしくは、

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

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

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

.htaccess
.htpasswd

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

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

拡張子が非表示になっている場合は拡張子の編集ができないので、下記記事を参照して拡張子を表示した状態で行ってください。

【Windows10】ファイルの「拡張子」を表示・非表示にさせる方法【超簡単】

今回はWIndows10の「拡張子（かくちょうし）」を表示・非表示にする方法のご紹介です。肉玉にゃんこ設定は超簡単で1分もかかりませんですにゃ～そもそも「拡張子」とは？そもそも「拡張子」とは...

blog.nyanco.me

2021.05.01

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ファイルの場所のフルパスの調べ方はこちらのサイト様の記事でクリアできました。

フルパスの調べ方 - Qiita

.htaccessの置き場所をフルパスで書こうとしたら、フルパスの情報がわかならかったので、やり方を調べてみました。phpを使って調べるという記事があったので、参考にやってみました。AuthU…

qiita.com

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

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」ファイルの編集は完了なので、保存して閉じておきます。

3. 「.htpasswd」ファイルを編集

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

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

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

例：
yamada:OwDsByaIZup4c
itou:rwyyzxRCfCKUI
satou:ieMdsJ4dPNvuk

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

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

▼こちらのwebサービスなどを利用します。

基本認証パスワード暗号化 - にしし ふぁくとりー

基本認証（BASIC認証）を使って「IDとパスワード」によるアクセス制限を施す際には、パスワードを暗号化して.htpasswdファイルに記載する必要があります。ここでは、最大10個まとめてパスワードの暗号化を行えます。

www.nishishi.com

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

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

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

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

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

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

本記事がどなたかの参考になれば幸いです。

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