【初心者向け】エックスサーバーでサイトにBasic認証(アクセス制限)設定する方法

Sana

こんにちは、朝起きてから娘のいたずらで髪の毛に大きめの洗濯バサミがついていることにしばらく気がつかず、周囲にアリエッティと勘違いされるところだったSanaです♪

借りぐらしのアリエッティ
Monica先輩

しばらく気が付かないなんて、アリエンティね

Sana

Monica先輩、つっこみがするどい…

Sana

ところで、BASIC認証について知りたいので教えてください!

Monica先輩

OK。WebサイトにBasic認証(アクセス制限)をかける方法はいくつかあるけど、その中でも一番簡単な方法をご紹介するわ。
コードをいじらずに済む方がお好きな方向けね。

Sana

本記事では、Webサイト全体にBasic認証(アクセス制限)設定する方法、設定時の注意点を、9枚の画像を使用しながらご紹介いたします!
ぜひ最後まで読んでいただけると嬉しいです♪

こんな方向け
  • Web制作勉強中の方
  • 「Basic認証って一体何!?難しい操作なしで簡単にやりたい!」という方
  • XserverでWebサイト全体にBasic認証(アクセス制限)設定する方法を知りたい方
CONTENTS

アクセス制限とは?

指定のフォルダに対して、Basic認証をかけることができます。

IDとパスワードを用いてアクセス制限をかけることができるので、会員制のサイト等を運用する場合にご利用いただけます。

【Xserver公式マニュアル】https://www.xserver.ne.jp/manual/man_server_limit.php

Web制作などで必須となるBasic認証(以下アクセス制限と呼びます)。

アクセス制限は、会員制サイトのほか、公開前のホームページを知らない人に見られたくない場合など、パスワードで閲覧制限をかける機能です。指定のフォルダやWebサイト全体をパスワードで保護することが可能になります。

アクセス制限の特徴

ブラウザがログイン情報を記憶

一度アクセス制限で認証に成功すると、ユーザー名とパスワードはブラウザに記憶され、再び入力する手間を省くことができます。ただし、あくまでブラウザに依存する機能なので、Chromeで認証してもSafariでは認証が必要、といった感じになります。

また、ブラウザを閉じるまでの間は再認証なしで何度でもアクセスすることが可能になります。仮に違うWebサイトを閲覧した後でも、ブラウザさえ閉じていなければ、再認証なしで再びアクセスすることが可能です。

利用する際のブラウザやデバイスによってログイン情報が記憶されないこともあるので、注意が必要です。

エックスサーバーでサイトにBasic認証(アクセス制限)設定する方法
〜5steps〜

【手順1】エックスサーバーのサーバーパネルへログイン

【手順2】「アクセス制限」をクリック

【手順3】「設定対象ドメイン」を選択

  • 「設定対象ドメイン」がアクセス制限をかけたいドメインになっているかを確認
  • 「現在のフォルダ」の「ユーザー設定」をクリック

【手順4】ユーザー設定でユーザーIDとパスワードを設定する

  • ユーザーIDとパスワードを設定し、「確認画面へ進む」をクリック

※アクセス制限をONにしたあと、管理画面へログインする際や、サイトURLでHPを閲覧する際に必要な部分です。忘れないようにスクショやメモをしておきます。

  • 「フォルダ一覧に戻る」をクリック

【手順5】「現在のフォルダ」のアクセス制限をONにする

  • 「現在のフォルダ」のアクセス制限をONにする
  • 「設定する」をクリック

これでアクセス制限がONになりました!

実際にアクセス制限がかかっているか検証

実際にサイトへアクセスしてみます。すると、サイトが表示される前にこのような画面が表示されます。

ChromeでサイトURLに飛んだ画面

SafariでサイトURLに飛んだ画面

どちらも先ほど設定したユーザーIDとパスワードを入力すれば通常通り閲覧、管理画面へのログインが可能になります。

認証に失敗した場合の画面

「ユーザーID」「パスワード」の組み合わせを間違うと、アクセスできない仕組みになっています。

これで、ユーザーIDとパスワードを知っている人だけしかサイトへアクセスできなくなりました。

アクセス制限を解除する

解除も簡単です(^o^)v

  • 「現在のフォルダ」のアクセス制限を「OFF」にする
  • 「設定する」をクリック

以上です!

まとめ

Basic認証って難しそう・・・と思った方も、このようにサーバーパネルからアクセス制限を行えば、ONもOFFも難しい操作なしで行うことができます!

この記事を見てくださった方の情報の一つになれば幸いです。

最後まで読んでいただき、ありがとうございました♡

この記事が気に入ったら
いいね または フォローしてね!

  • URLをコピーしました!

コメントお待ちしております(^.^)

コメントする

CAPTCHA

CONTENTS