ポートフォリオの作り方をゼロから徹底解説

【コピペで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を入力すれば表示されます。

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。

おわりに

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

ではまた!