什么是鉴权

鉴权是指验证用户是否有权利访问系统的行为，简单说就是需要鉴定用户的身份。

鉴权的作用

HTTP 协议本身是无状态的，但是在实际的web开发中经常有一些操作需要状态，比如想要访问一些私人访问权限的文章、获取个人信息等都需要明确用户的身份。最简单的方案就是每次都发送账户和密码,但是这样的操作并不安全。

常见的鉴权方式

cookie-session

鉴权 - 图1

实现原理：

  • 服务器在接受客户端首次访问时在服务器端创建seesion，然后保存seesion(我们可以将seesion保存在
    内存中，也可以保存在redis中，推荐使用后者)，然后给这个session生成一个唯一的标识字符串,然后在
    响应头中种下这个唯一标识字符串。
  • 签名。这一步通过秘钥对sid进行签名处理，避免客户端修改sid。（非必需步骤）
  • 浏览器中收到请求响应的时候会解析响应头，然后将sid保存在本地cookie中，浏览器在下次http请求的
    请求头中会带上该域名下的cookie信息。
  • 服务器在接受客户端请求时会去解析请求头cookie中的sid，然后根据这个sid去找服务器端保存的该客
    户端的session，然后判断该请求是否合法。
  1. // redis-store.js
  2. const Redis = require('ioredis')
  3. const { Store } = require('koa-session2')
  5. class RedisStore extends Store {
  6.   constructor(redisConfig) {
  7.     console.log(redisConfig)
  8.     super()
  9.     this.redis = new Redis(redisConfig)
  10.   }
  12.   async get(sid, ctx) {
  13.     let data = await this.redis.get(`SESSION:${sid}`)
  14.     return JSON.parse(data)
  15.   }
  17.   async set(session, { sid = this.getID(24), maxAge = 1000000 } = {}, ctx) {
  18.     try {
  19.       // Use redis set EX to automatically drop expired sessions
  20.       await this.redis.set(`SESSION:${sid}`, JSON.stringify(session), 'EX', maxAge / 1000)
  21.     } catch (e) {}
  22.     return sid
  23.   }
  25.   async destroy(sid, ctx) {
  26.     return await this.redis.del(`SESSION:${sid}`)
  27.   }
  28. }
  30. module.exports = RedisStore
  1. // index.js
  2. const Koa = require('koa')
  3. const Router = require('koa-router')
  4. const cors = require('koa2-cors')
  5. const bodyParser = require('koa-bodyparser')
  6. const static = require('koa-static')
  7. const session = require('koa-session2')
  8. const Store = require('./redis-store')
  10. const DBConfig = {
  11.   host: '127.0.0.1',
  12.   port: 6379
  13. }
  15. const app = new Koa()
  17. // cors
  18. app.use(cors({ credentials: true }))
  20. app.use(static(__dirname + '/'))
  21. app.use(bodyParser())
  23. // 配置 session
  24. app.keys = ['WJiol#23123_'] // secret 用于加密字符串
  26. const config = {
  27.   key: 'userId', // (string) cookie key (default is koa:sess)
  28.   maxAge: 12 * 60 * 60 * 1000,
  29.   overwrite: true, // (boolean) can overwrite or not (default true) 覆盖之前设置同名的 cookie
  30.   httpOnly: true, // (boolean) httpOnly or not (default true)
  31.   signed: true, // (boolean) signed or not (default true)
  32.   rolling: false, // (boolean) Force a session identifier cookie to be set on every response. The expiration is reset to the original maxAge, resetting the expiration countdown. (default is false)
  33.   renew: false, // (boolean) renew session when session is nearly expired, so we can always keep user logged in. (default is false)
  34.   store: new Store(DBConfig) // 使用redis存储session
  35. }
  37. app.use(session(config, app))
  39. app.use((ctx, next) => {
  40.   // ignore favicon
  41.   if (ctx.path === '/favicon.ico') return
  43.   // test session
  44.   // let n = ctx.session.views || 0
  45.   // ctx.session.views = ++n
  46.   // ctx.body = n + ' views'
  47.   next()
  48. })
  50. // 登录鉴权
  51. app.use((ctx, next) => {
  52.   if (ctx.url.indexOf('login') > -1) {
  53.     next()
  54.   } else {
  55.     console.log('session', ctx.session.userinfo)
  56.     if (!ctx.session.userinfo) {
  57.       ctx.body = {
  58.         message: '用户未登录'
  59.       }
  60.     } else {
  61.       next()
  62.     }
  63.   }
  64. })
  66. const router = new Router()
  68. router.post('/login', async ctx => {
  69.   const { body } = ctx.request
  70.   console.log('body', body)
  71.   //设置session
  72.   ctx.session.userinfo = body.username
  73.   ctx.body = {
  74.     message: '登录成功'
  75.   }
  76. })
  77. router.post('/logout', async ctx => {
  78.   //设置session
  79.   delete ctx.session.userinfo
  80.   ctx.body = {
  81.     message: '登出系统'
  82.   }
  83. })
  84. router.get('/getUser', async ctx => {
  85.   ctx.body = {
  86.     message: '获取数据成功',
  87.     userinfo: ctx.session.userinfo
  88.   }
  89. })
  91. app.use(router.routes())
  92. app.use(router.allowedMethods())
  94. app.listen(3000)
  1. // index.html
  2. <html>
  3. <head>
  4.   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5.   <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
  6. </head>
  8. <body>
  9.   <div id="app">
  10.     <div>
  11.       <input v-model="username">
  12.       <input v-model="password">
  13.     </div>
  14.     <div>
  15.       <button v-on:click="login">Login</button>
  16.       <button v-on:click="logout">Logout</button>
  17.       <button v-on:click="getUser">GetUser</button>
  18.     </div>
  19.     <div>
  20.       <button onclick="document.getElementById('log').innerHTML = ''">Clear Log</button>
  21.     </div>
  22.   </div>
  23.   <h6 id="log"></h6>
  24.   </div>
  25.   <script>
  26.     // axios.defaults.baseURL = 'http://localhost:3000'
  27.     axios.defaults.withCredentials = true
  28.     axios.interceptors.response.use(
  29.       response => {
  30.         document.getElementById('log').append(JSON.stringify(response.data))
  31.         return response;
  32.       }
  33.     );
  34.     var app = new Vue({
  35.       el: '#app',
  36.       data: {
  37.         username: 'test',
  38.         password: 'test'
  39.       },
  40.       methods: {
  41.         async login() {
  42.           await axios.post('/login', {
  43.             username: this.username,
  44.             password: this.password
  45.           })
  46.         },
  47.         async logout() {
  48.           await axios.post('/logout')
  49.         },
  50.         async getUser() {
  51.           await axios.get('/getUser')
  52.         }
  53.       }
  54.     });
  55.   </script>
  56. </body>
  58. </html>

Token验证

session-cookie的验证方式存在一些不足：

  • 跨域情况下无法传递cookie，需要另外配置
  • 客户端不只是浏览器，还有可能是APP、小程序，这样就没法使用 cookie
  • cookie被劫持的话，容易遭受 CSRF 攻击

目前来说鉴权常用的是 Token 验证方案，通过签发、验证令牌来指判断用户是否有权利访问系统。

鉴权 - 图2

实现原理：

  • 客户端使用用户名跟密码请求登录；
  • 服务端收到请求，去验证用户名与密码；
  • 验证成功后，服务端会签发一个令牌(Token)，再把这个 Token 发送给客户端；
  • 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 或者 LocalStorage 中 ；
  • 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token；
  • 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据 。
  1. // index.html
  2. <html>
  3.   <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5.     <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
  6.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <div>
  11.         <input v-model="username" />
  12.         <input v-model="password" />
  13.       </div>
  14.       <div>
  15.         <button v-on:click="login">Login</button>
  16.         <button v-on:click="logout">Logout</button>
  17.         <button v-on:click="getUser">GetUser</button>
  18.       </div>
  19.       <div>
  20.         <button @click="logs=[]">Clear Log</button>
  21.       </div>
  22.       <!-- 日志 -->
  23.       <ul>
  24.         <li v-for="(log,idx) in logs" :key="idx">
  25.           {{ log }}
  26.         </li>
  27.       </ul>
  28.     </div>
  29.     <script>
  30.       axios.interceptors.request.use(
  31.         config => {
  32.           const token = window.localStorage.getItem('token')
  33.           if (token) {
  34.             // 判断是否存在token，如果存在的话，则每个http header都加上token
  35.             // Bearer是JWT的认证头部信息
  36.             config.headers.common['Authorization'] = 'Bearer ' + token
  37.           }
  38.           return config
  39.         },
  40.         err => {
  41.           return Promise.reject(err)
  42.         }
  43.       )
  45.       axios.interceptors.response.use(
  46.         response => {
  47.           app.logs.push(JSON.stringify(response.data))
  48.           return response
  49.         },
  50.         err => {
  51.           app.logs.push(JSON.stringify(response.data))
  52.           return Promise.reject(err)
  53.         }
  54.       )
  55.       var app = new Vue({
  56.         el: '#app',
  57.         data: {
  58.           username: 'test',
  59.           password: 'test',
  60.           logs: []
  61.         },
  62.         methods: {
  63.           async login() {
  64.             const res = await axios.post('/login', {
  65.               username: this.username,
  66.               password: this.password
  67.             })
  68.             localStorage.setItem('token', res.data.token)
  69.           },
  70.           async logout() {
  71.             localStorage.removeItem('token')
  72.           },
  73.           async getUser() {
  74.             await axios.get('/getUser')
  75.           }
  76.         }
  77.       })
  78.     </script>
  79.   </body>
  80. </html>
  1. // index.js
  2. const Koa = require('koa')
  3. const router = require('koa-router')()
  4. const static = require('koa-static')
  5. const bodyParser = require('koa-bodyparser')
  6. const jwt = require('jsonwebtoken')
  7. const jwtAuth = require('koa-jwt')
  9. const app = new Koa()
  10. const secret = 'WJiol#23123_'
  12. app.use(bodyParser())
  13. app.use(static(__dirname + '/'))
  15. // Custom 401 handling if you don't want to expose jwtAuth errors to users
  16. app.use(function(ctx, next) {
  17.   return next().catch(err => {
  18.     if (401 == err.status) {
  19.       ctx.status = 401
  20.       ctx.body = {
  21.         message: 'Protected resource, use Authorization header to get access\n'
  22.       }
  23.     } else {
  24.       throw err
  25.     }
  26.   })
  27. })
  29. app.use(jwtAuth({ secret }).unless({ path: [/^\/login/] }))
  31. // ignore favicon
  32. app.use((ctx, next) => {
  33.   if (ctx.path === '/favicon.ico') return
  34.   next()
  35. })
  37. router.post('/login', async ctx => {
  38.   const { body } = ctx.request
  40.   //登录逻辑，略
  42.   const userinfo = body.username
  43.   ctx.body = {
  44.     message: '登录成功',
  45.     user: userinfo,
  46.     // 生成 token 返回给客户端
  47.     token: jwt.sign(
  48.       {
  49.         data: userinfo,
  50.         exp: Math.floor(Date.now() / 1000) + 60 * 60 // 设置 token 过期时间，一小时后，秒为单位
  51.       },
  52.       secret
  53.     )
  54.   }
  55. })
  57. router.get('/getUser', async ctx => {
  58.   console.log(ctx.state.user)
  60.   ctx.body = {
  61.     message: '获取数据成功',
  62.     userinfo: ctx.state.user.data
  63.   }
  64. })
  66. app.use(router.routes())
  67. app.use(router.allowedMethods())
  68. app.listen(3000)

JWT原理解析

Bearer Token包含三个组成部分：令牌头、payload、哈希

  1. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjoidGVzdCIsImV4cCI6MTU3NzA4NjA2MCwiaWF0IjoxNTc3MDgyNDYwfQ.YgLghsMdLkrhPLAD3f2kNmDBaDVmBSOxve7E9xEIF3A
  • 签名：默认使用base64对令牌头、payload进行编码，使用HS256算法对令牌头、payload和密钥进行签名生成哈希
  • 验证：默认使用HS256算法对令牌中数据签名并将结果和令牌中哈希比对
  1. // jsonwebtoken.js
  2. const jsonwebtoken = require('jsonwebtoken')
  4. const secret = 'WJiol#23123_'
  6. const user = {
  7.   username: 'gongyz',
  8.   password: '123456'
  9. }
  11. const token = jsonwebtoken.sign(
  12.   {
  13.     data: user.username,
  14.     exp: Math.floor(Date.now() / 1000) + 60 * 60 // 设置 token 过期时间
  15.   },
  16.   secret
  17. )
  19. console.log('生成token:' + token)
  21. console.log('解码:', jsonwebtoken.verify(token, secret).data)

HMAC SHA256 HMAC(Hash Message Authentication Code，散列消息鉴别码，基于密钥的Hash算法的认 证协议。消息鉴别码实现鉴别的原理是，用公开函数和密钥产生一个固定长度的值作为认证标识，用这个标 识鉴别消息的完整性。使用一个密钥生成一个固定大小的小数据块，即MAC，并将其加入到消息中，然后传 输。接收方利用与发送方共享的密钥进行鉴别认证等。 BASE64 按照RFC2045的定义，Base64被定义为：Base64内容传送编码被设计用来把任意序列的8位字节描 述为一种不易被人直接识别的形式。（The Base64 Content-Transfer-Encoding is designed to represent arbitrary sequences of octets in a form that need not be humanly readable.） 常见于邮件、http加密， 截取http信息，你就会发现登录操作的用户名、密码字段通过BASE64编码的 Beare Beare作为一种认证类型(基于OAuth 2.0)，使用”Bearer”关键词进行定义 参考文档： jsonwebtoken、koa-jwt 阮一峰 JWT解释 http://www.ruanyifeng.com/blog/2018/07/json_web_token-tutorial.html

Oauth（开放授权）

第三方登入主要基于OAuth 2.0。OAuth协议为用户资源的授权提供了一个安全的、开放而又简易的标
准。与以往的授权方式不同之处是OAUTH的授权不会使第三方触及到用户的帐号信息（如用户名与密码），
即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权。

案例：github 登录

鉴权 - 图3

  1. // index.html
  2. <html>
  3.   <head>
  4.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  5.     <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
  6.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <button @click="oauth">Login with Github</button>
  11.       <button @click="getUser">Get UserInfo</button>
  12.       <div v-if="userInfo">
  13.         Hello {{ userInfo.name }}
  14.         <img :src="userInfo.avatar_url" />
  15.       </div>
  16.     </div>
  17.     <script></script>
  18.     <script>
  19.       axios.interceptors.request.use(
  20.         config => {
  21.           const token = window.localStorage.getItem('token')
  22.           console.log(token)
  23.           if (token) {
  24.             // 判断是否存在token，如果存在的话，则每个http header都加上token
  25.             // Bearer是JWT的认证头部信息
  26.             config.headers.common['Authorization'] = 'Bearer ' + token
  27.           }
  28.           return config
  29.         },
  30.         err => {
  31.           return Promise.reject(err)
  32.         }
  33.       )
  35.       axios.interceptors.response.use(
  36.         response => {
  37.           app.logs.push(JSON.stringify(response.data))
  38.           return response
  39.         },
  40.         err => {
  41.           app.logs.push(JSON.stringify(response.data))
  42.           return Promise.reject(err)
  43.         }
  44.       )
  45.       var app = new Vue({
  46.         el: '#app',
  47.         data: {
  48.           logs: [],
  49.           userInfo: null
  50.         },
  51.         methods: {
  52.           async oauth() {
  53.             window.open('/auth/github/login', '_blank')
  54.             const intervalId = setInterval(() => {
  55.               console.log('等待认证中..')
  56.               if (window.localStorage.getItem('authSuccess')) {
  57.                 clearInterval(intervalId)
  58.                 console.log('认证结束')
  59.                 // window.localStorage.removeItem('authSuccess')
  60.                 this.getUser()
  61.               }
  62.             }, 500)
  63.           },
  64.           async getUser() {
  65.             const res = await axios.get('/auth/github/userinfo')
  66.             console.log('res:', res.data)
  67.             this.userInfo = res.data
  68.           }
  69.         }
  70.       })
  71.     </script>
  72.   </body>
  73. </html>
  1. // index.js
  2. const Koa = require('koa')
  3. const router = require('koa-router')()
  4. const static = require('koa-static')
  5. const axios = require('axios')
  6. const querystring = require('querystring')
  7. const jwt = require('jsonwebtoken')
  8. const jwtAuth = require('koa-jwt')
  10. const app = new Koa()
  12. const accessTokens = {}
  13. const secret = 'WJiol#23123_'
  14. const config = {
  15.   client_id: '1fe9675becdbcb12d1c5',
  16.   client_secret: 'c4e99ba1e79b393d4da8a872dd2fda2bc10f3953'
  17. }
  19. app.use(static(__dirname + '/'))
  21. router.get('/auth/github/login', async ctx => {
  22.   //重定向到认证接口,并配置参数
  23.   var path = `https://github.com/login/oauth/authorize?${querystring.stringify({ client_id: config.client_id })}`
  25.   //转发到授权服务器
  26.   ctx.redirect(path)
  27. })
  29. router.get('/auth/github/callback', async ctx => {
  30.   const code = ctx.query.code
  31.   const params = {
  32.     client_id: config.client_id,
  33.     client_secret: config.client_secret,
  34.     code: code
  35.   }
  36.   let res = await axios.post('https://github.com/login/oauth/access_token', params)
  37.   const access_token = querystring.parse(res.data).access_token
  38.   const uid = Math.random() * 99999
  39.   accessTokens[uid] = access_token
  41.   console.log('accessTokens', accessTokens)
  43.   const token = jwt.sign(
  44.     {
  45.       data: uid,
  46.       // 设置 token 过期时间，一小时后，秒为单位
  47.       exp: Math.floor(Date.now() / 1000) + 60 * 60
  48.     },
  49.     secret
  50.   )
  51.   ctx.response.type = 'html'
  52.   ctx.response.body = ` <script>window.localStorage.setItem("authSuccess","true");window.localStorage.setItem("token","${token}");window.close();</script>`
  53. })
  55. router.get('/auth/github/userinfo', jwtAuth({ secret }), async ctx => {
  56.   // 验证通过，state.user
  58.   console.log('jwt playload:', ctx.state.user)
  60.   const access_token = accessTokens[ctx.state.user.data]
  61.   res = await axios.get('https://api.github.com/user?access_token=' + access_token)
  63.   ctx.body = res.data
  64. })
  66. app.use(router.routes())
  67. app.use(router.allowedMethods())
  69. app.listen(3000)