NuxtJS＋socketioで認証フィルタをはさむ（passport）

NuxtJSでサーバ側はexpress、websocketを使うのにsocket.ioを使っていて、ユーザー認証をpassportで行なう場合の覚書き。

今回試すこと
socket.ioのロード
サーバ側
クライアント側
1. pages/index.vue
参考リンク

今回試すこと

axiosを使ってサーバAPIでログインし、その後socket.ioでwebsocketに接続する。やりたいことは、サーバAPIで開始したセッションをsocket.ioで引き継ぎ利用することである。

これには、socket.ioのミドルウェアを使って開始済みのセッションを読み込めば、socket.ioのリクエストでセッションを扱える。気をつける点は、socket.ioのミドルウェア関数インターフェースがexpressのそれと異なっているので、正しく情報を引き継げるようミドルウェアをつないでやることである。具体的には、socket.ioのドキュメントにもあるとおり以下のようにすればよい。

const wrap = middleware => (socket, next) => middleware(socket.request, {}, next);

1	const wrap = middleware => (socket, next) => middleware(socket.request, {}, next);

socket.ioのロード

今回は、NuxtJSのmoduleのlistenフックを使ってsocket.ioサーバをnuxtのhttpサーバに統合する。serverMiddlewareで、/apiにexpressのappをマウントする。また、Nuxtのlistenフックを使ってsocket.ioサーバを統合するための設定をmodulesに定義する。

// nuxt.config.js
serverMiddleware: [{ path: '/api', handler: '~/server/index.js' }],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
'@nuxtjs/axios',
'~/modules/socket-io.js',
],

// nuxt.config.js

serverMiddleware: [{ path: '/api', handler: '~/server/index.js' }],

// Modules: https://go.nuxtjs.dev/config-modules

modules: [

// https://go.nuxtjs.dev/axios

'@nuxtjs/axios',

'~/modules/socket-io.js',

// ~/modules/socket-io.js
import { attachSocketIO } from '../server/io'
export default function () {
this.nuxt.hook('listen', (server, listener) => {
attachSocketIO(server)
})
}

// ~/modules/socket-io.js

import { attachSocketIO } from '../server/io'

export default function () {

this.nuxt.hook('listen', (server, listener) => {

attachSocketIO(server)

})

}

サーバ側

今回は動作検証のため、セッションはメモリストアを使っている。socket.ioとセッションストアを共有するため、共通の定義を使うようにしている。

server/index.js

import express from 'express'
import passport from 'passport'
import LocalStrategy from 'passport-local'
import session from './session'
const app = express()
// 今回はDBを使わず簡易のリストデータを使う
const USERS = [
{
username: 'username1',
password: 'password1',
},
]
// セッションのMemoryStoreはsocket.ioと共有する
app.use(session)
app.use(express.urlencoded({ extended: true }))
app.use(express.json())
app.use(passport.initialize())
app.use(passport.session())
passport.use(
new LocalStrategy(function (username, password, done) {
const user = USERS.find(
(data) => data.username === username && data.password === password
)
if (!user) {
return done(null, false)
}
return done(null, { username: user.username })
})
)
passport.serializeUser(function (user, done) {
done(null, user)
})
passport.deserializeUser(function (user, done) {
done(null, user)
})
app.post(
'/login',
passport.authenticate('local', {
successRedirect: '/',
failureRedirect: '/',
}),
(req, res, next) => {
res.json(req.user)
}
)
app.post('/logout', (req, res, next) => {
req.logout()
res.redirect('/')
})
app.get('/session', (req, res, next) => {
res.json(req.user)
})
export default app

import express from 'express'

import passport from 'passport'

import LocalStrategy from 'passport-local'

import session from './session'

const app = express()

// 今回はDBを使わず簡易のリストデータを使う

const USERS = [

{

username: 'username1',

password: 'password1',

]

// セッションのMemoryStoreはsocket.ioと共有する

app.use(session)

app.use(express.urlencoded({ extended: true }))

app.use(express.json())

app.use(passport.initialize())

app.use(passport.session())

passport.use(

new LocalStrategy(function (username, password, done) {

const user = USERS.find(

(data) => data.username === username && data.password === password

)

if (!user) {

return done(null, false)

}

return done(null, { username: user.username })

})

)

passport.serializeUser(function (user, done) {

done(null, user)

})

passport.deserializeUser(function (user, done) {

done(null, user)

})

app.post(

'/login',

passport.authenticate('local', {

successRedirect: '/',

failureRedirect: '/',

}),

(req, res, next) => {

res.json(req.user)

}

)

app.post('/logout', (req, res, next) => {

req.logout()

res.redirect('/')

})

app.get('/session', (req, res, next) => {

res.json(req.user)

})

export default app

server/session.js

import session from 'express-session'
const ses = session({ secret: 'secret', resave: true, saveUninitialized: true })
export default ses

import session from 'express-session'

const ses = session({ secret: 'secret', resave: true, saveUninitialized: true })

export default ses

server/io.js

import socketIO from 'socket.io'
import passport from 'passport'
import session from './session'
// connect io middleware to express middleware
const wrap = (middleware) => (socket, next) =>
middleware(socket.request, {}, next)
export function attachSocketIO(server) {
const io = socketIO(server, { serveClient: false })
// セッションのMemoryStoreはexpressと共通にする
io.use(wrap(session))
io.use(wrap(passport.initialize()))
io.use(wrap(passport.session()))
io.use((socket, next) => {
if (socket.request.user) {
next()
} else {
next(new Error('unauthorized'))
}
})
io.on('connection', (socket) => {
socket.emit('echo', {
message: 'hello',
})
})
return io
}

import socketIO from 'socket.io'

import passport from 'passport'

import session from './session'

// connect io middleware to express middleware

const wrap = (middleware) => (socket, next) =>

middleware(socket.request, {}, next)

export function attachSocketIO(server) {

const io = socketIO(server, { serveClient: false })

// セッションのMemoryStoreはexpressと共通にする

io.use(wrap(session))

io.use(wrap(passport.initialize()))

io.use(wrap(passport.session()))

io.use((socket, next) => {

if (socket.request.user) {

next()

} else {

next(new Error('unauthorized'))

}

})

io.on('connection', (socket) => {

socket.emit('echo', {

message: 'hello',

})

return io

}

クライアント側

クライアント側は、ログインしてセッション確認するだけのためのインターフェースにする。以下のような感じ。

ログインしていない状態の時。

ログインしてsocket.ioにつながった時。

Viewテンプレートはveutifyを使う。

pages/index.vue

NuxtJSは、Universalモードで動かしているのでSSRを行なう。sessionは、asyncDataフックを使ってコンポーネントのdataに統合する。

<template>
<v-app>
<v-main>
<v-card class="ma-5 pa-5" width="400" flat>
<v-text-field
v-model="username"
label="username"
required
></v-text-field>
<v-text-field
v-model="password"
label="password"
required
></v-text-field>
<v-btn :disabled="!loggedIn" @click="submit"> ログイン </v-btn>
<v-alert
class="my-5"
:type="socket && socket.connected ? 'success' : 'error'"
dense
>
{{ socketStatus }}
</v-alert>
<v-dialog v-model="dialog" width="300">
<pre class="pa-5">{{ session }}</pre>
</v-dialog>
<v-btn text :disabled="loggedIn" @click="getSession">session</v-btn>
|
<v-btn :disabled="loggedIn" text @click="logout">logout</v-btn>
</v-card>
</v-main>
</v-app>
</template>
<script>
import { io } from 'socket.io-client'
export default {
async asyncData({ app }) {
const session = await app.$axios.$get('/api/session')
return { session }
},
data() {
return {
dialog: false,
username: 'username1',
password: 'password1',
socket: null,
socketStatus: 'disconnected',
session: false,
}
},
computed: {
loggedIn() {
return !this.session
},
},
mounted() {
if (this.session) {
this.connectWs()
}
},
methods: {
async submit() {
await this.$axios
.$post('/api/login', {
username: this.username,
password: this.password,
})
.then((user) => {
this.session = user
if (this.socket && this.socket.connected) {
this.socket.close()
}
this.connectWs()
})
},
async logout() {
await this.$axios.$post('/api/logout')
if (this.socket) {
this.socket.close()
}
this.session = false
},
async getSession() {
this.session = await this.$axios.$get('/api/session')
this.dialog = true
},
connectWs() {
this.socket = io({ transports: ['websocket'] })
this.socket.on('connect_error', (data) => {
this.socketStatus = data.message
})
this.socket.on('echo', (data) => {
this.socketStatus = data.message
})
this.socket.on('disconnect', (reason) => {
this.socketStatus = 'disconnected'
if (reason === 'io server disconnect') {
this.socket.connect()
}
})
},
},
}
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<v-app>

<v-main>

<v-card class="ma-5 pa-5" width="400" flat>

<v-text-field

v-model="username"

label="username"

required

></v-text-field>

<v-text-field

v-model="password"

label="password"

required

></v-text-field>

<v-btn :disabled="!loggedIn" @click="submit"> ログイン </v-btn>

<v-alert

class="my-5"

:type="socket && socket.connected ? 'success' : 'error'"

dense

</v-alert>

<v-dialog v-model="dialog" width="300">

<pre class="pa-5">{{ session }}</pre>

</v-dialog>

<v-btn text :disabled="loggedIn" @click="getSession">session</v-btn>

<v-btn :disabled="loggedIn" text @click="logout">logout</v-btn>

</v-card>

</v-main>

</v-app>

</template>

import { io } from 'socket.io-client'

export default {

async asyncData({ app }) {

const session = await app.$axios.$get('/api/session')

return { session }

data() {

return {

dialog: false,

username: 'username1',

password: 'password1',

socket: null,

socketStatus: 'disconnected',

session: false,

}

computed: {

loggedIn() {

return !this.session

mounted() {

if (this.session) {

this.connectWs()

}

methods: {

async submit() {

await this.$axios

.$post('/api/login', {

username: this.username,

password: this.password,

})

.then((user) => {

this.session = user

if (this.socket && this.socket.connected) {

this.socket.close()

}

this.connectWs()

})

async logout() {

await this.$axios.$post('/api/logout')

if (this.socket) {

this.socket.close()

}

this.session = false

async getSession() {

this.session = await this.$axios.$get('/api/session')

this.dialog = true

connectWs() {

this.socket = io({ transports: ['websocket'] })

this.socket.on('connect_error', (data) => {

this.socketStatus = data.message

})

this.socket.on('echo', (data) => {

this.socketStatus = data.message

})

this.socket.on('disconnect', (reason) => {

this.socketStatus = 'disconnected'

if (reason === 'io server disconnect') {

this.socket.connect()

}

})

}

</script>

検証用プログラムは以下

GitHub - moritetu/nuxt-with-socket.io-passport: sample nuxt program with socket.io and passport

sample nuxt program with socket.io and passport. Contribute to moritetu/nuxt-with-socket.io-passport development by crea...