如何为Nuxt Server Middleware配置Google授权验证

结论 #

Nuxt.js 没有针对 serverMiddleware 的 Google 认证开箱即用方案，但可以基于你现有 @nuxtjs/auth 的配置，通过谷歌官方的校验工具快速实现权限校验，实现成本很低。

具体实现步骤 #

1. 安装必要依赖
   你需要两个依赖：cookie-parser 用于解析 express 请求中的 cookie，google-auth-library 用于校验 Google 签发的 id_token 合法性。

npm install cookie-parser google-auth-library

2. 修改 ~/api/db.js 代码，增加权限校验中间件
   完整代码示例如下：

const express = require('express')
const app = express()
const { OAuth2Client } = require('google-auth-library')
const cookieParser = require('cookie-parser')

// 初始化Google OAuth客户端，client_id和你nuxt.config.js里的配置一致
const googleClient = new OAuth2Client(process.env.GOOGLE_KEY)

// 注入cookie解析中间件
app.use(cookieParser())

// 自定义认证校验中间件
const authGuard = async (req, res, next) => {
  // 从cookie中获取auth模块写入的token信息
  const rawToken = req.cookies['auth._token.google']
  const tokenExpire = req.cookies['auth._token_expiration.google']

  // 无token直接返回401
  if (!rawToken || !tokenExpire) {
    return res.status(401).send('Unauthorized')
  }

  // 校验token是否过期
  if (Date.now() > Number(tokenExpire)) {
    return res.status(401).send('Token expired')
  }

  // 去掉token前缀的Bearer字符串，拿到纯id_token
  const idToken = rawToken.replace('Bearer ', '')

  try {
    // 校验id_token的合法性，确认是谷歌签发、且受众是你的应用
    const ticket = await googleClient.verifyIdToken({
      idToken: idToken,
      audience: process.env.GOOGLE_KEY
    })
    const payload = ticket.getPayload()
    // 校验通过，把用户信息挂载到req上，后续业务逻辑可以直接使用
    req.user = {
      id: payload.sub,
      email: payload.email,
      name: payload.name,
      avatar: payload.picture
    }
    next()
  } catch (err) {
    return res.status(401).send('Invalid token')
  }
}

// 所有接口都经过authGuard校验，你也可以单独给指定路由加校验
app.use(authGuard)

app.get('/fields/:schema', async (req, res) => {
  var result = []
  // 此处为业务逻辑，可以直接使用req.user里的用户信息做权限控制
  res.json(result)
})

module.exports = app

注意事项 #

• 你配置的 GOOGLE_KEY 环境变量需要在服务端运行环境中也能访问，不要仅配置在客户端侧的环境变量中。
• 如果你有多个 serverMiddleware 需要做权限校验，可以把上面的 authGuard 中间件抽成单独的公共文件，各个接口直接引用即可，不需要重复编写逻辑。
• 如果你使用的是旧版的 @nuxtjs/auth 模块，cookie 的 key 命名可能存在差异，你可以对照浏览器请求头里的 cookie 字段调整代码里的 cookie 名即可。

内容的提问来源于stack exchange，提问作者Bogdan Timofeev