Socket.IOでユーザ認証

2018.11.14

ユーザ認証を含むWebSocket通信

今回は前回作成したチャットプログラムに、Socket.IOを使用してユーザ認証を含むチャット機能を追加しようと思います。

ミドルウェアに関して

ミドルウェアはアプリケーションとOSの中間的な処理を行うソフトウェアです。
公式ドキュメントによると、Socket.IOはミドルウェアを使用しています。
今回はこちらを利用して接続してきたソケットをハンドリングするミドルウェアを登録し、認証処理を追加しようと思います。

ユーザ認証を含むチャットプログラムの実装

環境について

前回と同様に下記環境で実装を進めていきます。

  • Node.js 8.11.4
  • WebサーバはKoaで作成

実装一覧

  • ユーザ認証チャットページ(/secret/)
  • パスワード入力フォーム
    (前回作成したチャットプログラムに追加。送信時に/secret/に遷移し、正しいパスワードならチャットページを表示、すでに入室しているクライアントに入室を通知する。間違えていたら再度パスワード入力フォームを表示させる。)

通信図

ファイル構成

  • manager.js
    (クライアント側の設定・イベント実装用ファイル)
  • layout.pug
    (クライアント側のjs・css読み込み用ファイル)
  • secret.pug・secret.html
    (クライアント側に表示されるユーザ認証チャットプログラムの表示用ファイル)
  • soc.html
    (前回作成したチャットプログラムの表示用ファイル)

接続の分割

今回新しく追加するユーザ認証付きのチャットプログラムと前回作成したプログラムの処理が混ざらないように、前回作成したプログラムのWebSocket接続と今回新しく作成するプログラムのWebSocket接続を、下記図のように異なるnamespaceを使用することで分割します。

まず、前回作成したチャットプログラムのWebSocket接続のnamespaceを「/public」に書き直します。

サーバ側の実装

[app.js]

クライアント側の実装

[manager.js]

これで、前回作成したプログラムのnamespace設置は完了しました。

パスワード入力フォームの設置

前回作成したプログラムにユーザ認証チャットに入室するためのパスワード入力フォームを追加します。

クライアント側の実装

[soc.html]

サーバ側の実装

パスワード送信フォームの遷移先における処理を定義します。

[app.js]

クライアント側の実装

namespaceへの接続がクライアント側からしかできないため、inputタグに送信されたパスワードを格納します。

[secret.pug]

仮に「1234」とパスワードを入れて送信します。

遷移先でパスワードの取得に成功しました。

Socket.IOへの認証処理の追加

Socket.IOに認証処理の追加と、認証に失敗したときと成功したときの表示と処理を作っていきます。

クライアント側

[secret.html]
[manager.js]

サーバ側

[app.js]

正しいパスワード「1234」を送信したところ、接続が成功し、入室通知が送られました。

続いて、上のクライアントで間違えたパスワードを送信し、下のクライアントで正しいパスワードを送信しました。

パスワードを間違えたクライアントは接続に失敗したので、パスワード再入力フォームが表示されており、正しいパスワードを送信したクライアントの入室通知も届かず、ユーザ認証が正常に働いていることを確認することができました。

まとめ

今回はSocket.IOを利用した認証方法を紹介しました。
前回の記事でも説明したように、WebSocket通信は便利ではありますが、セキュリティにおける脅威は多数あります。
今回はパスワード認証を例にしましたが、こうした認証方法は処理の工夫次第で悪意のあるクライアントの攻撃からサーバを守ることにも使えるのではないでしょうか。