
ベーシック認証を使用して簡易ログイン機能を作成する
特定のユーザーや特定のページに閲覧制限をかける時などにログイン機能などが実装されますが、いざ作成するとなると結構ハードルが高いですよね。そんな時にはベーシック認証を使うことで手軽にログイン機能を実装することができます。
シンプルな機能のベーシック認証
ベーシック認証はブラウザ上で使用できるIDとパスワードを入力する簡単なログイン機能です。指定したディレクトリ以下や特定のページへのアクセスを制限することができます。ログイン機能のプログラムを作成するわけではなく、ベーシック認証に必要な2つのファイルを用意するだけで実装が可能です。まずはベーシック認証に必要な「.htaccess」と「.htpasswd」と下記2点のファイルを作成します。htaccessファイル(ディレクトリ単位で制限の場合)の作成
最初にhtaccessファイルから見ていきます。このファイルはすでに存在している場合は追記する形になります。htaccessファイルにはベーシック認証に関する設定など記述します。下記はディレクトリ単位で制限をかける場合になり、このhtaccessファイルと同階層に置かれたファイルやディレクトリのアクセスは全て制限がかかります。 【.htaccess】AuthUserFile /www/admin/.htpasswd(.htpasswdファイルまでのフルパスを入力) AuthGroupFile /dev/null AuthName "ログイン情報を入力してください" (ベーシック認証名を指定) AuthType Basic require valid-user
htaccessファイル(ファイル単位で制限の場合)の作成
次はファイル単位でアクセスの制限をかける場合の記述です。複数のファイルを指定することも可能です。下記の内容では、www/admin配下にあるlogin.phpとadmin.phpファイルに制限がかかります。複数ファイルの指定にはファイル同士を|で区切ります。上から3行目までの記述は、htaccessファイルとhtpasswdファイル自体に制限をかける記述になります。 【.htaccess】<Files ~ "^\.(htaccess|htpasswd)$"> deny from all </Files> AuthUserFile /www/admin/.htpasswd(.htpasswdファイルまでのフルパスを入力) AuthGroupFile /dev/null AuthName "ログイン情報を入力してください" (ベーシック認証名を指定) AuthType Basic order deny,allow <Files ~ (login.php|admin.php)> require valid-user </Files>
htpasswdファイルの作成
htaccessファイルの作成が終わったら、次はhtpasswdファイルを用意していきます。ここにはベーシック認証での入力に必要なIDとパスワードのペアを:で区切り必要なペアを1行づつ記入していきます。ただしこのファイルに記入するパスワードは暗号化しておく必要があります。暗号化の方法については色々なウェブサービスが提供されているのでそちらを利用します。 【.htpasswd】user1:HMJzhDsm2DR/2 (ID:暗号化されたパスワード) user2:qU1lUMghaBtNc user3:TvrTTIAZ.bGkI
作成したファイルを設置しログイン機能を実装
これまでに作成した、htaccessファイルとhtpasswdファイルをサイト内のディレクトリにアップロードします。アップロードする場所は認証をかけるディレクトリになります。htpasswdファイルについてはhtaccessファイル内でファイルパスを設定しているのでそれに合わせるように注意します。 これで認証されるディレクトリにアクセスしますとブラウザ上でIDとパスワードの入力を求められるダイアログが表示されるようになります。認証が成功するとページが表示され、失敗すると401エラーが返されます。 このようにベーシック認証を使うことで手軽にログイン機能をサイト内に実装することが可能になります。ただしセキュリティーなどの観点からあくまで簡易ログイン機能として用いたほうがよさそうです。サイト内にちょっとしたアクセス制限をかけたい時には有効ですね。categories
- WordPress(61)
- JavaScript(49)
- Vue.js(48)
- CSS(46)
- jQuery(34)
- Nuxt.js(22)
- Sass(21)
- Gulp(17)
- webpack(16)
- PHP(14)
- HTML(14)
- GSAP(11)
- React(10)
- Vite(9)
- Pug(9)
- Laravel(8)
- Cordova(8)
- Linux(7)
- Next.js(6)
- Apache(5)
- Shopify(4)
- REST API(4)
- Node.js(4)
- Smarty(3)
- Git(3)
- JSON(3)
- その他プログラミング(3)
- Google Apps API(3)
- Bootstrap(3)
- 環境構築・システム(3)
- TypeScript(2)
- EJS(2)
- RMS(2)
- Docker(2)
- Instagram API(2)
- Excel VBA(2)
- SVG(1)
- Dart(1)
- ECカートASP(1)
- Markdown(1)
- AMP(1)
- Nginx(1)
- XML(1)
- shellscript(1)
- Ruby(1)
- MySQL(1)