まずはじめに

このブログを見てくださっている方の中には、

『FTP』や『BASIC認証』というワードを初めて聞いた方がいるかもしれないので、

それぞれ説明していきますね💁🏻‍♀️

『知ってるよ！！』という方はすっ飛ばして次の章へどーぞっ☺️

BASIC認証とは

BASIC認証は、Webサーバーが特定のページやリソースへのアクセスを制限するために使用するHTTPの認証方式の一つです。

ユーザー名とパスワードを要求し、認証に成功した場合のみ、Webサイトへのアクセスを許可する仕組みです。

HTTP：WebブラウザとWebサーバーの間でデータを送受信する仕組みのこと。

FTPとは

インターネット上でファイルを転送するためのプロトコルです。

パソコン内にあるHTMLや画像ファイルをサーバーに転送することで、インターネット上のWebサイトとして公開できます。

今回はFileZillaというFTPソフトを使用しています。

プロトコル：コンピュータでデータをやりとりするために定められた手順や規約、信号の電気的規則、通信における送受信の手順などを定めた規格のこと。

『FTPを使ってBASIC認証をかける』とは??

👩🏻『FTPからBASIC認証がかけられるんですか??』

と社長に聞いてみたところ、

👨🏻『.htaccessと.htpasswdという2つのファイルをサーバーにアップすることでFTPからもBASIC認証かけることができます！』

と教えていただきました。

なるほど、たまにFTPで見かける『.htaccess』ファイルはアクセス制限のためのファイルだったのか。。。

ここで浮かび上がる疑問は『ファイルをサーバーにアップするのはわかったけど、何を書けばいいんだろう??』ということです。

.htaccessと.htpasswdについて詳しく説明していきますね！

確認しておくこと

次章に進む前に確認していただきたいことが2つあります！

1つ目、不可視ファイルはFinder（WindowsはFile Explorer）で表示されますか？

不可視ファイルとは「.（ドット）」から始まるファイルのことで、FinderやFile Explorerでは非表示設定になっています。

VSCodeで.htaccessと.htpasswdを作成して、保存して確認してみてください。

.htaccessと.htpasswdはFinder（WindowsはFile Explorer）では非表示の設定になっていますので、

先に表示されるように設定しておきましょう。

Macの方👇

ショートカット⌘Command＋⇧Shift＋.（ドット）で表示・非表示切り替えることができます。

Windowsの方👇

File Explorer上部にある『表示』タブを選択し、『隠しファイル』のチェックボックスをオンにしてください。

次に、次章以降で『ドキュメントルート』と『ドメイン』という言葉が出てきますのでおさらいしておきましょう。

ドキュメントルート

サーバー内でウェブサイトの公開用ファイルが配置される場所のことです。

URLに反映されないのでわかりにくいですが、『htdocs』 『www』『public_html』などが多いようです。

ドメイン

インターネット上の住所のようなものです。
例えば、example.com や google.com がドメインです。

絶対パスを調べる

.htaccessを作成する時に必要になるのでFTPの絶対パスを調べてみましょう。

phpファイルを作って以下のコードを貼り付けてください。

<?php 
    echo dirname(__file__);
?>

どんなファイル名でも問題ありませんが、ここではpath.phpにしておきましょう。

作成できたら、FTPでドメイン直下にアップします。

実際にURLを打って確認してみましょう。

例）https://kokodakenohanashi.com/の場合→https://kokodakenohanashi.com/path.php

画面の左上に、上の画像のような文言が表示されます。

実際に案件で表示させた時の画像なので特定されないように一部伏せていますが、

home/ホスト名/ドキュメントルート/ドメインという順番で表示されるはずです。

.htaccessの作り方

以下の４項目を設定してください。

このあと.htacessはドキュメントルート（ここではpublic_html）直下にサーバーアップしますので、

先ほど調べた絶対パスを使うと以下のようになります。

AuthUserFile "/home/FTPのホスト名/public_html/.htpasswd"
AuthName "Please enter user name and Password." 
AuthType BASIC 
require valid-user 

.htpasswdの作り方

ユーザー名とパスワードを決める

左側にユーザー名、コロンを挟んで右側パスワードを書きます。

パスワードを生成するのが難しい方はランダムでパスワードを生成してくれるツールを使ってみてください👇

パスワード生成（パスワード作成）ツール

test:EAwFNLXy8yER

パスワードを暗号化

BASIC認証はセキュリティ面が弱いのでパスワードを暗号化しておきましょう。

パスワード暗号化ツールを使って、暗号化します👇

.htaccess による認証用　パスワード暗号化ツール

test:zzJePjaUE7PTY

「生成」ボタンを押すたびに暗号化されたパスワードが変わりますが、

どれを使っても大丈夫ですのでご安心を🙆‍♀️

FTPで.htaccessと.htpasswdをアップする

ドキュメントルート直下にアップしましょう！

BASIC認証は、.htaccessと.htpasswdを設置した階層以下をまるっとロックすることができます。

上の図では緑の範囲をロックしてくれるわけです。

BASIC認証をかけたい範囲によってhtaccessとhtpasswdを設置する場所を調整してみてくださいね。

エラーが出る時

500エラーや入力しても何度もBASIC認証が出る場合など、

『うまくいかない。。。😞』という時は、以下の2つを確認してみてください。

• htaccessとhtpasswdがサーバーのどこにアップされているか
• htaccessの『AuthUserFile』に書いている絶対パスがあっているか

最後に

いかがでしたか??

皆さんの疑問は解決できましたか??

私が実際に案件でこれをやった時は、

エラーも出るし、入力しても入力してもBASIC認証が繰り返し出て突破できないしで、

2時間近く闘ってました😇

今回のブログを読んでくださった皆さんは、私の屍を飛び越えてひょいひょいっ！と実装できることを祈っております🙏

もし不明点があればいつでもブログのお問い合わせやTwiiter（@webis_takai）へ

気軽にメッセージ送っていただけると幸いです💌

次回のブログが今年最後のブログになりそうですね💭

今回はこの辺でっ！

最後までご覧いただきありがとうございました🙇🏻‍♀️