【コピペで1分】ベーシック認証の設定方法

この記事を読むのに必要な時間は約 3 分です。

ベーシック認証（BASIC認証）を設定することで簡単にIDとパスワードによるサイトの保護ができます。
作成中だったり見せたくないページにはベーシック認証（BASIC認証）をによる保護が有効です。

そんなベーシック認証（BASIC認証）をの設定方法について詳しく解説します。

.htaccessを設定する

ベーシック認証を設定するには「.htaccess」に追記する必要があります。
ベーシック認証を設定したいディレクトリに「.htaccess」を配置します。
下記コードをコピペして「.htaccess」に追記してください。

AuthUserFile /hogehoge/hugahuga/.htpasswd
AuthName “Member Only!”
AuthType Basic
require valid-user

「AuthUserFile /hogehoge/hugahuga/.htpasswd」は絶対パスで指定します。

エックスサーバを利用している場合なら「/home/xs123456/xs123456.xsrv.jp/public_html/domainname.com/.htpasswd」
さくらレンタルサーバを利用している場合なら「/home/domainname/www/domain_public/.htpasswd」
といった感じですね。

サーバのコントロールパネルから調べられますが、調べ方がよく分からない場合は下記リンクで詳しく解説しています。

【簡単】サーバーのフルパスの調べ方

.htpasswdを設定する

.htaccessと同じディレクトリに「.htpasswd」を配置します。
中身に「basic:eCv1DQR539J46」といったIDと暗号化したパスワードを記述します。

「basic:eCv1DQR539J46」は
ID→basic
PASS→passwordを暗号化したもの
を意味します。

.htpasswdを簡単に生成してくれる便利サイトがあるので活用すると良いでしょう。

生成したコードを「.htpasswd」にコピペすれば完了です。

ベーシック認証が設定されているか確認

あとはベーシック認証を設定したサイトにアクセスし、ベーシック認証が設定されているかを確認します。

設定されていたら上記のようなポップアップ画面（サンプルはFirefox）が表示されます。
設定したIDとPasswordを入力すれば表示されます。

おわりに

以上、ベーシック認証の設定方法でした。
ソースのコピペと.htpasswdのジェネレータを使えば1分で設定できます。

ではまた！

コピペで1分シリーズ

【JS不要、コピペで1分】CSSだけで作るポップアップメニュー

【JS不要、コピペで1分！】CSSだけで作るトグルボタン

【JS不要、コピペで1分】CSSだけで作るタブ切り替えメニュー【レスポンシブ対応】

【JS不要、コピペで1分】CSSだけで作るマウスオーバーでふわっと色が変わるボタン

【コピペで1分】ベーシック認証の設定方法

【ベーシック認証】特定のディレクトリやファイルの認証を除外する方法

【ベーシック認証】特定のファイルだけBasic認証を設定する方法

【コピペで1分】問い合わせ完了ページへ直接アクセスした際にリダイレクトさせる方法

【コピペで1分】CSSで作る括弧のデザイン5選