プログラミング/仕事

Basic認証(ベーシック認証)のかけ方【HTMLとWordPress2種類】

BASIC認証(ベーシック認証)のかけ方【HTMLとWordPress2種類】

こんにちは、フリーランスエンジニアのしょーごです。

今回はBasic認証のかけ方をできるだけ分かりやすく紹介していきます。

ありさちゃん
ありさちゃん
BASIC認証をかけないとなんですが、かけ方がいまいちわかりません…というか、本当にかける必要あるの?
まさひろくん
まさひろくん
WordPressでのかけ方もセットで知りたいです。
ようこちゃん
ようこちゃん
AuthUserFileのパスが分からず詰みです…

しょーご

あーたしかにAuthUserFileは一番混乱するかも

しょーご

そのあたり丁寧に説明していきますね。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

BASIC認証とは何なのか?

ベーシック認証(Basic認証)とはWebサイトの特定の領域、つまりページやファイルにアクセス制限をかけることができる認証方法の1つです。

これによって、例えば

  • 公開前のサイトに未関係の人間がアクセスできないようにする
  • Googleのクローラーの巡回を防ぎ、検索一覧に載らないようにする
  • 特定の人しか見せたくないテスト環境

これらを実現することができます。

ちゃんと認証がかかっていれば、「ユーザー名」「パスワード」の入力を求められます。

BASIC認証の技術的な話

仕組みについてもう少し詳しく話すと、BASIC認証というのはWebサーバーの機能です。特に無料のWebサーバーだと利用できないこともあります。

また、ログイン情報を入力して送信する際に「Base64」という文字コードを用いて通信を行います。「Base64」は簡易的な通信を行う際の文字コードで、httpなどで通信する(httpsじゃない)場合に脆弱になりやすいです。

しょーご

セキュリティ面を考えて必ずhttps(SSL化)前提で設定しましょう。

理想:レンタルサーバーの管理画面でらくらく

ConoHa

レンタルサーバーの場合は管理画面からラクラクかけられるものもあります。

例えば私がおすすめしているConoHa WING の設定方法はとても簡単です。

ファイルのアップロードもFTPを使わずとも、ファイルマネージャーで即アップできますし、ディレクトリのアクセス制限を行えば、即Basic認証は終わります。

しょーご

初学者の方には特にこちらをおすすめしたいです。

【国内最速No.1】高性能レンタルサーバーConoHa WING

万能な方法を紹介

しかし、管理画面からでも場合によってはうまくかからない場合もありますし、実案件ではサーバーの管理画面に入れない場合もあるかもしれないので、

FTPなどでレンタルサーバーにアクセスして自力でBASIC認証をかける万能な方法を紹介します。

Basic認証の前提

  • 「.htaccess」と「.htpasswd」の2つのファイルを設置することで認証がかけられる
  • ファイルを作成、編集するのは自分のエディタなどローカル環境、設置するのは「レンタルサーバー内」
  • レンタルサーバーに接続するにはFileZiilaなどのFTPが必要なので、使い方は知っておくべし

【HTMLサイト編】自力でBASIC認証のかけ方

Basic認証の流れ
  1. 認証をかけたいサイトのレンタルサーバーフルパスを調べる
  2. .htaccessと.htpasswdの用意
  3. 2つのファイルをFTPでアップロード
  4. ページにアクセスしてIDとPasswordを入力
  5. ページを表示できたら成功

ここでは自分のエディタでファイルを作成し、FTPでサーバーに接続してファイルのやり取りを行います。

①認証をかけたいディレクトリのフルパスを調べる

まずは一番ややこしい「AuthUserFile」を調べておきます。

実は.htaccessと.htpasswordのファイルを設置した階層までのフルパスを調べておく必要があるんですが、これはレンタルサーバーのフルパスであって、WebサイトのURLではないので、PHPで調べてあげる必要があります。

作業はVSCodeで行っていきます。

phpファイルを作成し、以下のコードを記入

エディタで任意の名前のphpファイル(ここではpath.php)を作成し、以下のコードを書いてください。

<?php
  echo __FILE__;
?>

__FILE__
これはマジカル定数と呼ばれているもので、ファイルのフルパスが格納されている定数になります。

認証をかけたいディレクトリにFTPでファイルを設置

作成したphpファイルをFTPを利用して、BASIC認証をかけたいディレクトリ(サイト全体ならトップページと同階層)に設置します。

まずは自分のサーバーのFTP接続情報を確認し、FileZiilaなどFTPツールでサーバーに接続していきます。

FileZilla 使い方

通常はルートはpublic_html以下であることが多いので、そこに設置するといいかなと思います。

FileZilla FTPツール

public_html内ドメイン毎にディレクトリが別れている場合は、その中が大抵トップページになっているかなと思います。

そこに設置してやればいいです。

サーバーのフルパスが表示される

例えばサイトのURLが「exemple.com」であれば、「exemple.com/path.php」にアクセスすると、ファイルを設置した場所までのフルパスが表示されます。

エックスサーバー だと「/home/[サーバーID]/example.com/public_html/path.php」みたいな表示になるようです(使用するのは/path.phpより前の部分)

しょーご

フルパスを確認したら、必ずphpファイルは消すようにしましょう。パスが万人に丸見えで良いことはないです。

②「.htaccess」 を作成する

.htaccessファイルを自分のエディターなどのローカル環境で作成します。

以下のコードを入れていきます。

AuthUserFile (先ほど調べたフルパス)/.htpasswd
AuthName "hogehoge"
AuthType Basic
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
  deny from all
</Files>

AuthUserFile

先程調べた「.htpasswdファイルまでのフルパス」+「/.htpasswd」を書きます。

AuthName “~~”

ダイアログに表示される文字列を指定します。何でも良いですが、半角英数字で入力しておきます。

AuthType Basic

認証方法の指定で、今回はBasic認証なのでBasicにします。

require valid-user

IDとpasswordを知っているユーザーにアクセスを許可する記述です。

deny from all

ブラウザから「.htpasswd」「.htaccess」にアクセスできないようにする記述です。
パスワードなどの重要な情報を記述しているので、他人に見られないようにします。

③.htpasswdファイルを作成する

このファイルには「ID」「Password」を記入します。これがBasic認証で入力することになる情報なんですが、Passwordは暗号化して記入してあげる必要があります。

暗号化ツールとして、「htpasswd file generation」を紹介します。

ここで暗号化したパスワードを.htpasswdに貼り付けていきます。

root:XrZvOgQ8U7x.6

④2つのファイルをアップロード

「.htaccess」「.htpasswd」の2つのファイルをFTPなどで認証をかけたいディレクトリにアップロードします(path.phpを置いた場所と同じ階層に置きます)

うまく行っていれば、example.comを開けばBasic認証の画面にいくはずです。

ここで入力するパスワードは暗号化したものではなく、元々のものです。

もし何度入力しても認証を突破できなければ、フルパスの方が間違っている可能性があります。

【WordPress編】自力でBasic認証のかけ方

私のWordPressサイト「トロンボーンクラブ」を例に操作していきます。

しょーご

既にレンタルサーバーなどにWordPressサイトを立ち上げている前提で話していきます。

今回1からWordPressサイトを立ち上げるなら、先に適当なサンプルサイトをレンタルサーバーに立ち上げておくと、フルパスが調べやすくていいかと思います。

Basic認証の流れ
  1. レンタルサーバーのフルパスを調べる
  2. wp-contentと同階層に既にある.htaccessを編集
  3. .htpasswdを作成
  4. レンタルサーバーのwp-contentと同階層に2つのファイルを設置
  5. ページにアクセスしてIDとPasswordを入力
  6. ページを表示できたら成功

①.htacessと.htpasswdでかける場合

フルパス確認

まずはフルパスを確認します。

index.phpやfront-page.phpなどなんでもいいですが、テンプレートファイルに

<?php
  echo __FILE__;
?>

を記入してフルパスを確認します。すると、

/home/サーバーID/public_html/tromboneclub.site/wp-content/themes/トロンボーンクラブ/page.php

このようにテンプレートファイルまでのフルパスがサイトに表示されます。

この「/home/サーバーID/public_html/tromboneclub.site」の部分までを使用するので、メモっておいて、すぐにPHPの記述は消してください。

この後設置する.htpasswdはwp-contentと同階層に設置するため、wp-content以下はいらないのです。

.htaccess編集

WordPressの場合は「wp-content」などと同じ階層に既に.htaccessが存在するので、それを編集していきます。

すると、既にいくつか記述がされているのが見えると思います。

この#BEGIN WordPressの記述より前に設定を書いていきます。

# BEGIN WordPressと# END WordPressの間は触らないようにお願いします。

AuthUserFile /home/サーバーID/public_html/tromboneclub.site/.htpasswd
AuthName "hogehoge"
AuthType Basic
require valid-user
<Files ~ "^.(htpasswd|htaccess)$">
  deny from all
</Files>

.htpasswdをアップロード、.htaccessは上書きする

FTPで「public_html内の対象サイトドメイン内の、wp-contentなどと同階層」に「.htpasswd」「.htaccess」の2つをアップロードしますと、以下のような構成になるかと思います。

これで終了です。

この状態でサイトにアクセスして

無事認証を突破できれば、成功です!

何度も認証情報を入れても突破できないようでしたら、それはフルパス(AuthUserFile)が間違っている可能性が高いです。

実はプラグインでもBasic認証をかけることはできるが…

Basic認証をかけるプラグインは一応あります。しかし、WP BASIC Authなど更新されていないものがほとんどなので、推奨できるものが正直ないです。

更新されているものだと、一応Password Protectedという、パスワードのみをかけられるものがあります。

しょーご

個人的な感情で恐縮ですが、Basic認証でない認証のものは、レビューツールでサイトを取り込めないので、レビュアーとしてはきついです…^^;

ポートフォリオにもできればかけてほしい

これをご覧の方はポートフォリオにBASIC認証をかけるために見てくれてる方も多いと思いますが、もしBASIC認証がかかっていないと

しょーご

おっと、ちゃんとheadにnoindexはあるのかな?

と確認する手間がかかるので、めんどくさがらずにかけてほしいと思います。

正直レンタルサーバーの管理画面から触れるのがベスト

FTPをつないでファイルの出し入れを行うのは、かなり緊張感があります。

ConoHa WING エックスサーバー なら管理画面からBasic認証の設定が行えるため、おすすめです。

今回の「.htaccess」「.htpasswd」を設置する手法

  • 訳あってサーバーの管理画面に入れない
  • サーバー自体が対応していない
  • 実案件を意識して練習しておきたい

このような場合に使用するといいかなと思います。

納品方法やテスト環境について詳しく学ぶ↓

\\\コーディング課題公開中///

HTML初心者からWordPress実案件レベルまでのコーディング演習課題noteで公開しています。

コーディング練習課題
  1. デザインカンプからのコーディング
  2. プロによる2回の表示確認特典
  3. ポートフォリオとして使用OK

初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編WordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

しょーご

自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります!

基本的にまとめて購入していただくとかなりお得になります。

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

\課題の詳細はこちらから/

あなたに是非読んでほしい記事です!