メインコンテンツにスキップ

Passport.jsとの連携方法

基本的なアプリケーションから始めましょう

const express = require("express");
const { createServer } = require("node:http");
const { Server } = require("socket.io");
const session = require("express-session");
const bodyParser = require("body-parser");
const passport = require("passport");
const LocalStrategy = require("passport-local").Strategy;
const { join } = require("node:path");

const port = process.env.PORT || 3000;

const app = express();
const httpServer = createServer(app);

const sessionMiddleware = session({
  secret: "changeit",
  resave: true,
  saveUninitialized: true,
});

app.use(sessionMiddleware);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(passport.session());

app.get("/", (req, res) => {
  if (!req.user) {
    return res.redirect("/login");
  }
  res.sendFile(join(__dirname, "index.html"));
});

app.get("/login", (req, res) => {
  if (req.user) {
    return res.redirect("/");
  }
  res.sendFile(join(__dirname, "login.html"));
});

app.post(
  "/login",
  passport.authenticate("local", {
    successRedirect: "/",
    failureRedirect: "/",
  }),
);

passport.use(
  new LocalStrategy((username, password, done) => {
    if (username === "john" && password === "changeit") {
      console.log("authentication OK");
      return done(null, { id: 1, username });
    } else {
      console.log("wrong credentials");
      return done(null, false);
    }
  }),
);

passport.serializeUser((user, cb) => {
  console.log(`serializeUser ${user.id}`);
  cb(null, user);
});

passport.deserializeUser((user, cb) => {
  console.log(`deserializeUser ${user.id}`);
  cb(null, user);
});

const io = new Server(httpServer);

httpServer.listen(port, () => {
  console.log(`application is running at: https://:${port}`);
});

ユーザーコンテキストの共有​

ユーザーコンテキストは、以下を呼び出すことでSocket.IOサーバーと共有できます

function onlyForHandshake(middleware) {
  return (req, res, next) => {
    const isHandshake = req._query.sid === undefined;
    if (isHandshake) {
      middleware(req, res, next);
    } else {
      next();
    }
  };
}

io.engine.use(onlyForHandshake(sessionMiddleware));
io.engine.use(onlyForHandshake(passport.session()));
io.engine.use(
  onlyForHandshake((req, res, next) => {
    if (req.user) {
      next();
    } else {
      res.writeHead(401);
      res.end();
    }
  }),
);

何が起こるかというと

  • express-session ミドルウェアは、Cookieからセッションコンテキストを取得します
  • passport ミドルウェアは、セッションからユーザーコンテキストを抽出します
  • そして最後に、ユーザーコンテキストが見つかった場合、ハンドシェイクは検証されます
ヒント

onlyForHandshake() メソッドは、ミドルウェアがセッションの最初のHTTPリクエストにのみ適用されることを保証します。

これでuser オブジェクトにアクセスできるようになります

io.on("connection", (socket) => {
  const user = socket.request.user;
});

ユーザーIDの使用​

ユーザーIDを使用して、ExpressとSocket.IO間のリンクを作成できます

io.on("connection", (socket) => {
  const userId = socket.request.user.id;

  // the user ID is used as a room
  socket.join(`user:${userId}`);
});

これにより、特定のユーザーのすべての接続にイベントを簡単にブロードキャストできます

io.to(`user:${userId}`).emit("foo", "bar");

ユーザーが現在接続されているかどうかを確認することもできます

const sockets = await io.in(`user:${userId}`).fetchSockets();
const isUserConnected = sockets.length > 0;

Passport.jsとの互換性については以上です。読んでいただきありがとうございます！

完全な例はこちらにあります。

ヒント

この例は、ブラウザで直接実行できます