Socket.IO接続の認証を徹底解説！JWT、セッションID、ミドルウェアのメリットとデメリット

Node.js、Socket.IO、JWT を用いたSocket.IO接続の認証

このチュートリアルでは、Node.js、Socket.IO、JSON Web Token (JWT) を使って、Socket.IO接続を認証する方法を説明します。認証を行うことで、不正なユーザーによる接続を防止し、アプリケーションのセキュリティを強化することができます。

動作概要

1. クライアントは、ログインやサインアップ時にJWTトークンを取得します。
2. クライアントは、JWTトークンをヘッダー情報としてSocket.IOサーバーに接続します。
3. サーバーは、受信したトークンを検証し、有効であれば接続を許可します。
4. トークンが無効または期限切れの場合、サーバーは接続を拒否し、クライアントにエラーメッセージを送信します。

実装

サーバー側

1. 必要なライブラリのインストール

npm install socket.io jsonwebtoken

1. Socket.IOサーバーのセットアップ

const io = require('socket.io')(server);
const jwt = require('jsonwebtoken');
const secret = 'your_secret_key'; // シークレットキーを設定

io.use(async (socket, next) => {
  if (socket.handshake.query.token) {
    try {
      const decoded = jwt.verify(socket.handshake.query.token, secret);
      socket.userId = decoded.userId; // デコードされたペイロードからユーザーIDを取得
      next();
    } catch (error) {
      console.error('トークンが無効です:', error);
      socket.disconnect();
    }
  } else {
    console.error('トークンが提供されていません');
    socket.disconnect();
  }
});

io.on('connection', (socket) => {
  console.log('ユーザー', socket.userId, 'が接続しました');
  // 認証済みのユーザーのみが実行できるイベントをここで処理
});

クライアント側

1. JWTトークンの取得

// ログインやサインアップ処理
const login = async (username, password) => {
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
  });
  const data = await response.json();
  if (data.token) {
    localStorage.setItem('token', data.token); // トークンをローカルストレージに保存
    return true;
  } else {
    return false;
  }
};

const socket = io('http://localhost:3000', {
  auth: {
    token: localStorage.getItem('token'), // ヘッダーにトークンを含める
  },
});

socket.on('connect', () => {
  console.log('サーバーに接続しました');
});

socket.on('disconnect', () => {
  console.log('サーバーとの接続が切断されました');
});

補足

• 上記は基本的な例であり、具体的な実装はご自身のアプリケーションに合わせて調整する必要があります。
• より高度な認証機能を実現したい場合は、Passport.jsなどのライブラリを併用するのも良いでしょう。
• 本番環境で使用する場合には、シークレットキーを安全に管理することが重要です。

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt'); // パスワードハッシュ化用ライブラリ

const app = express();
const server = http.createServer(app);
const io = socketIO(server);

const secret = 'your_secret_key'; // シークレットキーを設定
const users = []; // ユーザー情報

// ユーザー登録
app.post('/api/register', async (req, res) => {
  const { username, password } = req.body;

  // パスワードをハッシュ化
  const hashedPassword = await bcrypt.hash(password, 10);

  // ユーザー情報を保存
  users.push({
    id: users.length + 1,
    username,
    password: hashedPassword,
  });

  res.json({ message: 'ユーザー登録が完了しました' });
});

// ログイン
app.post('/api/login', async (req, res) => {
  const { username, password } = req.body;

  // ユーザーを検索
  const user = users.find((user) => user.username === username);

  if (!user) {
    return res.status(401).json({ message: 'ユーザーが見つかりません' });
  }

  // パスワード検証
  const isValidPassword = await bcrypt.compare(password, user.password);

  if (!isValidPassword) {
    return res.status(401).json({ message: 'パスワードが間違っています' });
  }

  // JWTトークンを生成
  const token = jwt.sign({ userId: user.id }, secret);

  res.json({ token });
});

// Socket.IO接続の認証
io.use(async (socket, next) => {
  if (socket.handshake.query.token) {
    try {
      const decoded = jwt.verify(socket.handshake.query.token, secret);
      socket.userId = decoded.userId; // デコードされたペイロードからユーザーIDを取得
      next();
    } catch (error) {
      console.error('トークンが無効です:', error);
      socket.disconnect();
    }
  } else {
    console.error('トークンが提供されていません');
    socket.disconnect();
  }
});

// 接続イベント
io.on('connection', (socket) => {
  console.log('ユーザー', socket.userId, 'が接続しました');

  // 認証済みのユーザーのみが実行できるイベントをここで処理
  socket.on('message', (message) => {
    console.log('ユーザー', socket.userId, ':', message);
  });
});

server.listen(3000, () => {
  console.log('サーバーを起動しました: http://localhost:3000');
});

const io = require('socket.io-client');

// ログイン処理
const login = async (username, password) => {
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
  });
  const data = await response.json();
  if (data.token) {
    localStorage.setItem('token', data.token); // トークンをローカルストレージに保存
    return true;
  } else {
    return false;
  }
};

// Socket.IOサーバーへの接続
const socket = io('http://localhost:3000', {
  auth: {
    token: localStorage.getItem('token'), // ヘッダーにトークンを含める
  },
});

socket.on('connect', () => {
  console.log('サーバーに接続しました');
  socket.emit('message', 'Hello from the client!');
});

socket.on('disconnect', () => {
  console.log('サーバーとの接続が切断されました');
});

• このサンプルコードは、基本的な機能のみを実装しています。本番環境で使用する場合には、エラー処理やセキュリティ対策を強化する必要があります。
• ユーザー情報を保存する users 配列は、データベースに置き換える必要があります。

このサンプルコードが、ご自身のアプリケーション開発に役立つことを

Socket.IO接続の認証：代替方法

前回ご紹介した方法は、JSON Web Token (JWT) を用いたSocket.IO接続の認証方法でした。

今回は、JWT以外にも利用可能な代替手段として、以下の3つの方法をご紹介します。

1. セッションID
2. カスタム認証ミドルウェア
3. 外部認証サービス

セッションIDを用いた方法は、比較的シンプルで実装も容易です。

1. ExpressなどのWebフレームワークを用いて、セッション管理機能を有効にします。
2. ユーザーがログインすると、セッションIDを生成し、クライアント側に送信します。
3. Socket.IO接続時に、クライアント側から送信されたセッションIDを検証し、有効であれば接続を許可します。

1. サーバーから受け取ったセッションIDを、Cookieなどに保存します。
2. Socket.IO接続時に、保存したセッションIDをヘッダー情報として送信します。

利点

• 比較的シンプルで実装しやすい
• 状態管理がサーバー側で行われるため、クライアント側の負担が少ない

欠点

• セッションIDが盗まれた場合、不正アクセスが可能になる
• スケーラビリティが低い

カスタム認証ミドルウェアを用いた方法は、より柔軟な認証ロジックを実現できます。

1. Socket.IO接続前に実行されるカスタム認証ミドルウェアを作成します。
2. ミドルウェア内で、独自の認証ロジックを実装します。
3. 認証に成功した場合、接続を許可します。

• 特に特別な処理は必要ありません。

• 独自の認証ロジックを実装できる
• セキュリティを強化しやすい

• 開発・実装コストがかかる
• 複雑なロジックを扱うと、メンテナンスが難しくなる

外部認証サービスを用いた方法は、オAUTH2やSAMLなどの標準規格に基づいた認証を行うことができます。

1. Google Sign-InやAuth0などの外部認証サービスを導入します。
2. ユーザーがログインすると、外部認証サービスから認証トークンを取得します。

1. 外部認証サービスのライブラリを導入し、ログイン処理を行います。

• 標準規格に基づいた認証が可能
• セキュリティレベルが高い
• 複数のアプリケーションで共通の認証システムを利用できる

• 導入・設定に手間がかかる
• ランニングコストがかかる場合がある

どの方法が最適かは、アプリケーションの要件や環境によって異なります。

• シンプルで使いやすい認証方法が必要な場合は、セッションIDがおすすめです。
• より柔軟な認証ロジックが必要な場合は、カスタム認証ミドルウェアがおすすめです。
• 高度なセキュリティと使いやすさを求める場合は、外部認証サービスがおすすめです。

上記以外にも、様々な認証方法があります。ご自身のアプリケーションに合った方法を選択してください。