ベーシック認証(Basic認証)のかけ方【フルパスを調べる方法あり】

CODE

ベーシック認証のかけ方と、ベーシック認証をかける時に必要なフルパスの調べ方の解説記事です。

エックスサーバーなど、管理画面上で簡単にベーシック認証をかけられるサイトは良いのですが、自分で.htaccess等を設置しなければならないこともあります。

この記事を書いている私(わや@wayasblog)は、Web制作会社でエンジニアとして働いています。

ベーシック認証をかける時にかなり手間取ってしまったので、備忘録として残しておきます。

スポンサーリンク

ベーシック認証(Basic認証)のかけ方

まず、手順をおさらいしておきます。

  1. フルパスを調べる
  2. .htaccessを作成
  3. .htpasswdを作成
  4. 設置
  5. 完成

順番に見ていきましょう。

フルパスを調べる

ベーシック認証をかけるには、.htaccess.htpasswdファイルが必要です。

.htaccessを作成する際にサイトのフルパスを書く必要があるので、最初に調べておきましょう。

任意の名前のphpファイルを作成し、以下を記述します。

<?php
echo __FILE__;
?>

このファイルを、フルパスを調べたいディレクトリにアップロードします。

そして、ブラウザで先ほどのファイルにアクセスすると、フルパスが表示されるという仕組みです。

たとえばexapmle.comのフルパスを調べたいとしたら、その直下に任意のファイルを設置します。

そしてexapmle.com/任意のファイル名.phpにアクセスすればOKです。

エックスサーバーの場合は、/home/サーバID/example.com/public_html/任意のファイル.phpという感じで表示されます。

使用するのは、任意のファイル.phpの直前までのパスです。

.htaccessを作成

.htaccessがすでに存在していればそこに追記、なければ新たに作成します。

.htaccessの中身は、以下の通りです。

AuthUserFile "/フルパス/.htpasswd"
AuthName "Please enter your ID and Password." 
AuthType BASIC 
require valid-user
  • AuthUserFile:.htpasswdのファイルの所在地
  • AuthName:Basic認証時に表示される文字
  • AuthType:「BASIC」と指定することでBasic認証となる
  • require:認証ユーザー(valid-userの指定ですべてのユーザーが対象)

.htpasswdを作成

続いて、.htpasswdを作成していきます。

使いやすいのは、以下のサイトです。

» htpasswdファイル生成(作成)

IDとPasswordを入力して、生成を押せば「ID:暗号化されたパスワード」という形式で、出力してくれます。

次に、.htpasswdという名前のファイルを作成しましょう。

そして、先ほど生成された「ID:暗号化されたパスワード」を記述すればOKです。

設置

ベーシック認証をかけたいディレクトリに、以下の2つをアップロードしましょう。

  • .htaccessファイル
  • .htpasswdファイル

完成

ベーシック認証の画面

このように、ベーシック認証がかかれば完成です\(^o^)/

【まとめ】ベーシック認証(Basic認証)のかけ方

ベーシック認証の手順をまとめておきます。

  1. フルパスを調べる
  2. .htaccessを作成
  3. .htpasswdを作成
  4. 設置
  5. 完成

簡単なのですが、頻繁に使うものではないので忘れがちなんですよね。

特に、私はフルパスを調べるというところで時間がかかってしまいました…

以上です。最後までお読みいただき、ありがとうございました。

最後に宣伝

ココナラで、コーディングの相談を受け付けています。

  • CSSが上手く作れない
  • JavaScriptが思ったように動かない
  • ブログのデザインを修正したい
  • 勉強中でわからないところがあるから教えてほしい

このようなお悩みを解決していますので、「こんなの解決できる?」ということがあったら、ぜひ質問だけでも以下のリンクよりどうぞ。

HTML / CSS / JSのお悩みを解決します コーディングでお困りの方はお気軽にお問い合わせください! | Webサイト制作に関する相談 | ココナラ
HTML / CSS / JavaScript(jQuery)のお悩み相談、ご質問を受け付けます。「CSSが上手く作れない」「JavaScriptが思ったように...

コメント

タイトルとURLをコピーしました