Zenn
😀

Node.jsでBasic認証を設定する方法【動画版あり】

2022/04/18に公開
Node.js
auth
tech

はじめに

この記事ではNode.jsでBasic認証を行う方法について説明します。説明にあたり、下記4つのケースを想定します。

  • Expressを使い、npmパッケージを使うケース
  • Expressを使い、npmパッケージを使わないケース
  • Expressを使わず、npmパッケージを使うケース
  • Expressを使わず、npmパッケージを使わないケース

関連リンクを下記に示します。

https://www.youtube.com/watch?v=-FrAzwDwjd4

コーディングの準備

ターミナルで下記のコマンドを実行してコーディングの準備をします。

mkdir nodejs-basic-auth
cd nodejs-basic-auth
npm init -y
npm install --save express basic-auth-connect basic-auth
touch case-01.js case-02.js case-03.js case-04.js

ケース1:Expressを使い、npmパッケージを使うケース

case-01.jsのソースコードを下記に示します。

上記のソースコードでは basic-auth-connect を利用していますが、npmのページに書かれているようにこのnpmパッケージは非推奨扱いなので basic-auth などを使ってミドルウェアを自作することが推奨されています。代替するnpmパッケージとしては express-basic-auth などが候補として挙げられます。

動作確認の方法

ターミナルで下記のコマンドを実行してWebサーバーを起動します。

node case-01.js

続いて新規のターミナルを起動してから下記のコマンドを実行して認証情報なしではアクセスできないことを確認します。

curl -v http://localhost:3000/

上記のコマンドの実行結果を下記に示します。

*   Trying ::1:3000...
* Connected to localhost (::1) port 3000 (#0)
> GET / HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.77.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 401 Unauthorized
< X-Powered-By: Express
< WWW-Authenticate: Basic realm="Authorization Required"
< Date: Mon, 02 May 2022 02:15:20 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< Content-Length: 12
< 
* Connection #0 to host localhost left intact
Unauthorized

続いて下記のコマンドを実行して認証情報ありでアクセスできることを確認します。

curl -v http://username:password@localhost:3000/

上記のコマンドの実行結果を下記に示します。

*   Trying ::1:3000...
* Connected to localhost (::1) port 3000 (#0)
* Server auth using Basic with user 'username'
> GET / HTTP/1.1
> Host: localhost:3000
> Authorization: Basic dXNlcm5hbWU6cGFzc3dvcmQ=
> User-Agent: curl/7.77.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< X-Powered-By: Express
< Content-Type: application/json; charset=utf-8
< Content-Length: 11
< ETag: W/"b-Ai2R8hgEarLmHKwesT1qcY913ys"
< Date: Mon, 02 May 2022 02:15:55 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< 
* Connection #0 to host localhost left intact
{"ok":true}

ケース2:Expressを使い、npmパッケージを使わないケース

case-02.jsのソースコードを下記に示します。

ポイントを下記に示します。

  1. Authorizationヘッダの有無を確認しています。
  2. Authorizationヘッダを解析しています。
  3. 認証方式が"Basic"であることを確認しています。
  4. ユーザー名とパスワードを確認しています。
  5. 認証が成功した場合は次のミドルウェアへ進みます。
  6. 認証が失敗した場合は401(Unauthorized)応答を返します。

動作確認の方法についてはケース1と同様ですので割愛します。

ケース3:Expressを使わず、npmパッケージを使うケース

case-03.jsのソースコードを下記に示します。

上記のソースコードでは basic-auth を利用しています。
このnpmパッケージを利用することで下記3点の処理を自分で実装する必要が無くなります。

  • Authorizationヘッダの有無の確認
  • Authorizationヘッダの解析
  • 認証方式が"Basic"であることの確認

動作確認の方法についてはケース1と同様ですので割愛します。

ケース4:Expressを使わず、npmパッケージを使わないケース

case-04.jsのソースコードを下記に示します。

内容はケース3とケース4と合わせ技です。動作確認の方法についてはケース1と同様ですので割愛します。

おわりに

どの方法でもBasic認証を行うことができますが、Expressを利用する場合は basic-auth-connect や express-basic-auth を使い、Expressを利用しない場合は basic-auth を使うケースが多いのではないかと思います。

私はExpressを利用しており普段は basic-auth-connect を使っていますが、記事を書くために色々と調べて今後は express-basic-auth を使おうと思いました。

いまだに何かと必要となる場面の多いBasic認証ですが、色々な方法がある中でどの方法を選べば良いかを決めるための参考になれば幸いです。また、お気づきの点などありましたらお気軽にコメントをいただければ幸いです。最後までお読みいただきありがとうございました！

GitHubで編集を提案

Discussion