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

本ブログはアフィリエイト広告を利用しています

WEB / アプリ
WEB / アプリ
この記事は約6分で読めます。

とっちゃん@nyanco! です。

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

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

スポンサーリンク

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

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

ブラウザによって見た目や表示される文言が異なります。こちらはWindowsのGoogle Chromeのウィンドウ。

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

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

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

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

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

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

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

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

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

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

かもしくは、

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

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

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

.htaccess
.htpasswd

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

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

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

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

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

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

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

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

・【2行目】AuthName [ 適当な文字列 ]
赤字部分に、認証を求められる画面に現れる文字列を引用符(”)で囲んで記述します。ちなみに表示されないブラウザもあります。任意のものでOKですが、日本語は文字化けすることもあるので英数字で。
【例:AuthName “password”←こちらをコピーペーストすると「”」が全角になることがあるので、確認して全角になっていたら半角に打ち直してください。

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

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

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

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

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

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

<?php
echo __FILE__;
?>

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

アップロードしたい場所にすでに「index.php」がある場合は、「test」などダミーフォルダを作成してその中に「index.php」をアップロードし、4.で表示されるフルパスの「/test」を削除するという技で対応可能です。

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

全てコピーして、末尾の「index.php」を「.htpasswd」に変更すればフルパスの完成です!
【例:AuthUserFile /home/xxxxxxxx/public_html/xxxxx/.htpasswd

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

以下、サンプルとなります。

AuthType Basic
AuthName "password"
AuthUserFile /home/xxxxxxxx/public_html/xxxxx/.htpasswd
require valid-user

これで「.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個まとめてパスワードの暗号化を行えます。

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

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

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

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

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

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

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

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

コメント