摘要：為用戶提供授權(quán)以允許用戶操作非公開資源，有很多種方式。具體的代碼根據(jù)不同的授權(quán)方案而有所不同。使用授權(quán)原理利用來驗(yàn)證用戶，有兩種機(jī)制實(shí)現(xiàn)。使用來實(shí)現(xiàn)用戶授權(quán)主要用于簽發(fā)如果有將異步的簽名。

?

在很多應(yīng)用中，我們都需要向服務(wù)端提供自己的身份憑證來獲得訪問一些非公開資源的授權(quán)。比如在一個(gè)博客平臺(tái)，我們要修改自己的博客，那么服務(wù)端要求我們能夠證明 “我是我” ，才會(huì)允許我們修改自己的博客。

為用戶提供授權(quán)以允許用戶操作非公開資源，有很多種方式。比如使用 token、session、cookie，還有允許第三方登錄授權(quán)的 OAuth 2.0.

為了理解這些技術(shù)的機(jī)制和它們之間的關(guān)系，本文就來一一使用這些方案實(shí)現(xiàn)一個(gè)前端通過后端驗(yàn)證授權(quán)來訪問后端服務(wù)的應(yīng)用。

我們將用 express 搭建一個(gè)簡(jiǎn)單的后端，為了保存用戶信息，我們使用 mongoDB。前端是一個(gè)注冊(cè)頁(yè)面和一個(gè)登錄頁(yè)面，此外還有一個(gè)修改用戶密碼的頁(yè)面，在這個(gè)頁(yè)面上修改密碼的操作只有在用戶登錄之后才被允許，也就是被服務(wù)端授權(quán)之后才能修改密碼，否則返回 401 未授權(quán)。

下面就是我們這個(gè)簡(jiǎn)單 demo 的文件結(jié)構(gòu)：

服務(wù)端結(jié)構(gòu)：

?

?

前端頁(yè)面結(jié)構(gòu)：

?

?

如上圖，我們?cè)诜?wù)端寫了4個(gè)路由分別用于用戶注冊(cè)、登錄、修改密碼、和登出。其中在登錄路由中，用戶登錄之后將會(huì)生成一個(gè)用戶憑證，在后續(xù)修改密碼的路由中將會(huì)利用這個(gè)憑證來授權(quán)用戶修改密碼。具體的代碼根據(jù)不同的授權(quán)方案而有所不同。前端相應(yīng)地分為注冊(cè)、登錄、修改密碼 3 個(gè)頁(yè)面：

注冊(cè)頁(yè)面：

?

登錄頁(yè)面：

?

修改密碼頁(yè)面：

?

我們最終實(shí)現(xiàn)的效果就是： (GIF圖過大，可以轉(zhuǎn)到GitHub項(xiàng)目地址查看：地址)

搭建起一個(gè)前后端分離的應(yīng)用框架之后，我們下面依次使用 token、OAuth 2.0、express-session 來實(shí)現(xiàn)用戶授權(quán)。

利用 session 來驗(yàn)證用戶，有兩種機(jī)制實(shí)現(xiàn)。

?

需要服務(wù)端在用戶登錄成功后生成一個(gè) session ID 保存在服務(wù)端，這個(gè)session ID 標(biāo)識(shí)當(dāng)前會(huì)話的用戶，以后用戶的每一次請(qǐng)求中都會(huì)包含session ID，服務(wù)端可以識(shí)別這個(gè) session ID 驗(yàn)證用戶身份然后才會(huì)授權(quán)。

?

把 session ID 和其他數(shù)據(jù)加密后發(fā)給用戶，由用戶來存儲(chǔ)并在以后每次請(qǐng)求中發(fā)給服務(wù)端來驗(yàn)證。比如可以用 cookie 存儲(chǔ)發(fā)送，也可以使用其他客戶端存儲(chǔ)。

本文使用 express-session 來實(shí)現(xiàn)。并且使用上述 session 的第一種機(jī)制。所以先來看一下 express-session 主要的 API：

?

session( options )：生成 session 中間件，使用這個(gè)中間件會(huì)在當(dāng)前會(huì)話中創(chuàng)建 session，session 數(shù)據(jù)將會(huì)被保存在服務(wù)端，而 session ID 會(huì)保存在 cookie。options 為傳入的配置參數(shù)，有以下這些參數(shù)：

1.  cookie：
       存儲(chǔ) session ID，
       默認(rèn)值 { path: ‘/‘, httpOnly: true,secure: false, maxAge: null }）
2.  genid：
       一個(gè)函數(shù)，返回一個(gè)字符串用來作為新的 session ID，傳入 req 可以按需在 req 上添加一些值。
3.  name：
       存儲(chǔ) session ID 的 cookie 的名字，默認(rèn)是"connect.sid"，但是如果有多個(gè)使用 express-session 的 app 運(yùn)行在同一個(gè)服務(wù)器主機(jī)上，需要用不同的名字命名  express-session 的 cookie。
4.  proxy ：
       當(dāng)設(shè)置了secure cookies（通過”x-forwarded-proto” header ）時(shí)信任反向代理。
5.  resave：
       強(qiáng)制保存會(huì)話，即使會(huì)話在請(qǐng)求期間從未被修改過
6.  rolling：
       強(qiáng)制在每次響應(yīng)時(shí)，都設(shè)置保存會(huì)話標(biāo)識(shí)符的cookie。cookie 到期時(shí)間會(huì)被重置為原始時(shí)間 maxAge。默認(rèn)值為`false`。
7.  saveUninitialized：
       默認(rèn) `true`, 強(qiáng)制存儲(chǔ)未初始化的 session。
8.  secret ( 必需 ）:
       用來對(duì)session ID cookie簽名，可以提供一個(gè)多帶帶的字符串作為 secret，也可以提供一個(gè)字符串?dāng)?shù)組，此時(shí)只有第一個(gè)字符串才被用于簽名，但是在 express-session 驗(yàn)證 session ID   的時(shí)候會(huì)考慮全部字符串。 
9.  store:
       存儲(chǔ) session 的實(shí)例。
10. unset：
       控制 req.session 是否取消。默認(rèn)是 `keep`，如果是  `destroy`,那么 session 就會(huì)在響應(yīng)結(jié)束后被終止。

?

?

req.session：這是 express-session 存放 session 數(shù)據(jù)的地方，注意，只有 session ID 存儲(chǔ)在 cookie，所以 express-session 會(huì)自動(dòng)檢查 cookie 中的 session ID ，并用這個(gè) session ID 來映射到對(duì)應(yīng)的 session 數(shù)據(jù)，所以使用 express-session 時(shí)我們只需讀取 req.session ，express-session 知道應(yīng)該讀取哪個(gè) session ID 標(biāo)識(shí)的 session 數(shù)據(jù)。

1. 可以從 req.session 讀取 session ：
       req.session.id：每一個(gè) session 都有一個(gè)唯一ID來標(biāo)識(shí)，可以讀取這個(gè)ID，而且只讀不可更改，這是 req.sessionID 的別名；
       req.session.cookie：每一個(gè) session 都有一個(gè)唯一 的cookie來存儲(chǔ) session ID，可以通過 req.session.cookie 來設(shè)置 cookie 的配置項(xiàng)，比如 req.session.cookie.expires 設(shè)置為 false ，設(shè)置 req.session.cookie.maxAge 為某個(gè)時(shí)間。
2. req.session 提供了這些方法來操作 session：
       req.session.regenerate( callback (err) ): 生成一個(gè)新的 session, 然后調(diào)用 callback；
       req.session.destroy( callback (err) ): 銷毀 session，然后調(diào)用 callback；
       req.session.reload( callback (err) ):  從 store 重載 session 并填充 req.session ，然后調(diào)用 callback；
       req.session.save( callback (err) ): 將 session 保存到 store，然后調(diào)用 callback。這個(gè)是在每次響應(yīng)完之后自動(dòng)調(diào)用的，如果 session 有被修改，那么 store 中將會(huì)保存新的 session；
       req.session.touch(): 用來更新 maxAge。

?

?

req.sessionID：和 req.session.id 一樣。

?

?

store：如果配置這個(gè)參數(shù)，可以將 session 存儲(chǔ)到 redis和mangodb 。一個(gè)使用 rtedis 存儲(chǔ) session 的例子。store 提供了一下方法來操作 store：

1. store.all( callback (error, sessions) ) ：
       返回一個(gè)存儲(chǔ)store的數(shù)組；
2. store.destroy(sid, callback(error))：
       用session ID 來銷毀 session；
3. store.clear(callback(error))：
       刪除所有 session
4. store.length(callback(error, len))：
       獲取 store 中所有的 session 的數(shù)目
5. store.get(sid, callbackcallback(error, session))：
       根據(jù)所給的 ID 獲取一個(gè) session
6. store.set(sid, session, callback(error))：
       設(shè)置一個(gè) session。
7. store.touch(sid, session, callback(error))：
        更新一個(gè) session

?

以上就是 express-session 的全部 API。

1.3 使用 express-session

重點(diǎn)中的重點(diǎn)，巨坑中的巨坑：使用 express-session 是依賴于 cookie 來存儲(chǔ) session ID 的，而 session ID 用來唯一標(biāo)識(shí)一個(gè)會(huì)話，如果要在一個(gè)會(huì)話中驗(yàn)證當(dāng)前會(huì)話的用戶，那么就要求用戶前端能夠發(fā)送 cookie，而且后端能夠接收 cookie。所以前端我們?cè)O(shè)置 axios 的 withCredentials = true 來設(shè)置 axios 可以發(fā)送 cookie，后端我們需要設(shè)置響應(yīng)頭 Access-Control-Allow-Credentials:true，并且同時(shí)設(shè)置 Access-Control-Allow-Origin 為前端頁(yè)面的服務(wù)器地址，而不能是*。我們可以用 cors 中間件代替設(shè)置：

// 跨域

app.use(cors({
  credentials:  true,
  origin:  "http://localhost:8082",  // web前端服務(wù)器地址，，不能設(shè)置為 * 

}))

我開始就是因?yàn)闆]有設(shè)置這個(gè)，所以遇到了問題，就是后端登錄接口在session中保存 用戶名（ req.session.username = req.body.username） 之后，在修改用戶密碼的接口需要讀取 req.session.username 以驗(yàn)證用戶的時(shí)候讀取不到 req.session.username ，很明顯兩個(gè)接口的 req.session 不是同一個(gè) session，果然 console 出來 的 session ID 是不同的。這就讓我想到了 cookie，cookie 是生成之后每次請(qǐng)求都會(huì)帶上并且后端可以訪問的，現(xiàn)在存儲(chǔ)在 cookie 中的 session ID 沒有被讀取到而是讀取到了新 session ID，所以問題就出在后端不能拿到 cookie，也有可能是因?yàn)榍岸税l(fā)送不出去 cookie。可是開始的時(shí)候搜索關(guān)于 session ID 讀取不一致的這個(gè)問題我找不到解決辦法，而且發(fā)現(xiàn)很多人存在同樣的問題，但是沒有人給出答案，現(xiàn)在通過自己的思考想到了解決辦法，這是很多人需要避免的巨坑。

現(xiàn)在跨過了最大的一個(gè)坑，我們就可以來編寫前后端所有的邏輯了。關(guān)于注冊(cè)的邏輯，是一個(gè)很簡(jiǎn)單的用戶注冊(cè)信息填寫頁(yè)面，它發(fā)送用戶的名字和密碼到后端注冊(cè)接口，后端注冊(cè)接口保存用戶的名字和密碼到數(shù)據(jù)庫(kù)理。因此我在這里省略掉前端注冊(cè)頁(yè)面和后端注冊(cè)接口，只講前端登錄頁(yè)面和后端登錄接口，前端修改密碼頁(yè)面和后端修改密碼接口和登出接口。

?

前端登錄接口：

?

async function login(){ // 登錄
         
        let res = await axios.post("http://localhost:3002/login",{username,password})
        if(res.data.code === 0){
            setLoginSeccess(true)
            alert("登錄成功,請(qǐng)修改密碼")
            
        }else if(res.data.code === 2){
            alert("密碼不正確")
            return
        }else if(res.data.code === 1){
            alert("沒有該用戶")
            return
        }
    }

?

后端登錄接口：

?

const getModel = require("../db").getModel
const router = require("express").Router()
const users = getModel("users")

router.post("/", (req,res,next)=>{
    let {username, password} = req.body
    users.findOne({username},(err,olduser)=>{
        if(!olduser){
            res.send({code:1})// 沒有該用戶
        }else{
            if(olduser.password === password){// 登陸成功，生成 session
                req.session.username = olduser.username
                req.session.userID = olduser._id
                console.log("登錄時(shí)的會(huì)話 ID：",req.sessionID)
                req.session.save()
                res.send({code:0})// 登錄成功
            }else{

                res.send({code:2}) // 密碼錯(cuò)誤
            }
        }
    })
})

module.exports = router

?

前端修改密碼和登出頁(yè)面：

?

// src/axios.config.js:

// 支持 express-session 的 axios 配置
export function axios_session(){
    axios.defaults.withCredentials = true
    return axios
}

async function modify(){ // 修改密碼
       if(!input.current.value) return alert("請(qǐng)輸入新密碼")
       try{
           // 支持 session 的 axios 調(diào)用
           let res = await axios_session().post("http://localhost:3002/modify",{newPassword:input.current.value})
           if(res.data.code === 0)
               alert("密碼修改成功")
       }catch(err){
           alert("沒有授權(quán) 401")  
           console.log(err)
       }
}

async function logout(){ // 登出
        let res = await axios.post("http://localhost:3002/logout")
        if(res.data.code === 0){
            history.back()
        }
}

?

后端修改密碼接口：

?

const getModel = require("../db").getModel
const router = require("express").Router()
const users = getModel("users")
const sessionAuth = require("../middlewere/sessionAuth") 

router.post("/", sessionAuth, (req,res,next)=>{
    let {newPassword} = req.body
    console.log("修改密碼時(shí)的會(huì)話 ID：",req.session.id)
    if(req.session.username){
        users.findOne({username: req.session.username},(err,olduser)=>{
            olduser.password = newPassword
            olduser.save(err=>{
                if(!err){
                    res.send({code:0})// 修改密碼成功
                }
            })
        })
    }
})

module.exports = router

sessionAuth 驗(yàn)證中間件：

const sessionAuth = (req,res,next)=>{
    if(req.session && req.session.username){// 驗(yàn)證用戶成功則進(jìn)入下一個(gè)中間件來修改密碼
        next()
    }else{// 驗(yàn)證失敗返回 401
        res.sendStatus(401)
    }
}

module.exports = sessionAuth

?

后端登出：

?

const router = require("express").Router()
 
router.post("/", (req,res,next)=>{
    req.session.destroy(()=>console.log("銷毀session，已經(jīng)推出登錄"))
    res.send({code:0})
})

module.exports = router

我們還需要調(diào)用 session 的中間件，配置一些參數(shù)，才能在之后的中間件中使用 req.session 來進(jìn)行存儲(chǔ)、讀取和銷毀 session 的操作：

// server/app.js:

// session
app.use(session({
    secret: "123456789",// 必需，用來簽名 session
    unset:"destroy",// 在每次會(huì)話就熟后銷毀 session
    resave:true,
    saveUninitialized:false,
    rolling:true,
    cookie:{
        maxAge:60*60*1000// session ID 有效時(shí)間
    }

}))

2. 使用 JWT 授權(quán) 2.1 JWT 的原理：

首先來看看 JWT 的概念，JWT 的 token 由 頭部(head)、數(shù)據(jù)(payload)、簽名(signature) 3個(gè)部分組成 具體每個(gè)部分的結(jié)構(gòu)組成以及JWT更深的講解可以看看這個(gè)。其中頭部（header）和數(shù)據(jù)（payload）經(jīng)過 base64 編碼后經(jīng)過秘鑰 secret的簽名，就生成了第三部分----簽名(signature) ，最后將 base64 編碼的 header 和 payload 以及 signature 這3個(gè)部分用圓點(diǎn) . 連接起來就生成了最終的 token。

  signature = HMACSHA256(base64UrlEncode(header) + "." + base64UrlEncode(payload), secret)
  token = base64UrlEncode(header) + "." + base64UrlEncode(payload) + signature

token 生成之后，可以將其發(fā)送給客戶端，由客戶端來存儲(chǔ)并在以后每次請(qǐng)求中發(fā)送會(huì)后端用于驗(yàn)證用戶。前端存儲(chǔ)和發(fā)送 token 的方式有以下兩種：

2.1.1 使用 Header.Authorization + localStorage 存儲(chǔ)和發(fā)送 token

在 localStorage 中存儲(chǔ) token，通過請(qǐng)求頭 Header 的 Authorization 字段將 token發(fā)送給后端。

這種方法可以避免 CSRF 攻擊，因?yàn)闆]有使用 cookie ，在 cookie 中沒有 token，而 CSRF 就是基于 cookie 來攻擊的。雖然沒有 CSRF ，但是這種方法容易被 XSS 攻擊，因?yàn)?XSS 可以攻擊 localStorage ，從中讀取到 token，如果 token 中的 head 和 payload 部分沒有加密，那么攻擊者只要將 head 和 payload 的 base64 形式解碼出來就可以看到head 和payload 的明文了。這個(gè)時(shí)候，如果 payload 保護(hù)敏感信息，我們可以加密 payload。

2.1.2 使用 cookie 存儲(chǔ)和發(fā)送 token：

在這種情況下，我們需要使用 httpOnly 來使客戶端腳本無法訪問到 cookie，才能保證 token 安全。這樣就避免了 CSRF 攻擊。

2.2 使用 jsonwebtoken 來實(shí)現(xiàn) JWT 用戶授權(quán)：

jsonwebtoken 主要 API：

1. jwt.sign(payload, secretOrPrivateKey, [options, callback]) 用于簽發(fā) token

如果有 callback 將異步的簽名 token。

payload 就是我們要在 token 上裝載的數(shù)據(jù)，比如我們可以在上面添加用戶ID，用于數(shù)據(jù)庫(kù)查詢。payload可以是一個(gè)object, buffer或者string，payload 如果是 object，可以在里面設(shè)置 exp 過期時(shí)間。

secretOrPrivateKey 即包含HMAC算法的密鑰或RSA和ECDSA的PEM編碼私鑰的string或buffer，是我們用于簽名 token 的密鑰，secretOrPublicKey 應(yīng)該和下面 的 jwt.verify 的 secretOrPublicKey 一致。

options 的參數(shù)有：

  1）algorithm (default: HS256) 簽名算法，這個(gè)算法和下面將要講的 jwt.verify 所用的算法一個(gè)一致
  2）expiresIn: 以秒表示或描述時(shí)間跨度zeit / ms的字符串。如60，"2 days"，"10h"，"7d"，含義是：過期時(shí)間
  3）notBefore: 以秒表示或描述時(shí)間跨度zeit / ms的字符串。如：60，"2days"，"10h"，"7d"
  4）audience：Audience，觀眾
  5）issuer: Issuer，發(fā)行者
  6）jwtid: JWT ID
  7）subject: Subject，主題
  8）noTimestamp:
  9）header
  10）keyid
  11）mutatePayload

2. jwt.verify(token, secretOrPublicKey, [options, callback]) 用于驗(yàn)證 token

如果有 callback 將異步的驗(yàn)證 token。

token 便是我們保存在前端的token，我們將它發(fā)送給后端，后端調(diào)用 jwt.verify 并接受 token 和傳入放在后端的 secretOrPublicKey 來驗(yàn)證 token。注意這里的 secretOrPublicKey 與之前用于簽發(fā) token 的 secretOrPublicKey 應(yīng)該是同一個(gè)。

options 的參數(shù)有：

  1）algorithms: 一個(gè)包含簽名算法的數(shù)組，比如  ["HS256", "HS384"].
  2）audience: if you want to check audience (aud), provide a value here. The audience can be checked against a string, a regular expression or a list of strings and/or regular expressions.
  Eg: "urn:foo", /urn:f[o]{2}/, [/urn:f[o]{2}/, "urn:bar"]

  3）complete: return an object with the decoded { payload, header, signature } instead of only the usual content of the payload.
  4）issuer (optional): string or array of strings of valid values for the iss field.
  5）ignoreExpiration: if true do not validate the expiration of the token.
  6）ignoreNotBefore...
  7）subject: if you want to check subject (sub), provide a value here
  8）clockTolerance: number of seconds to tolerate when checking the nbf and exp claims, to deal with small clock differences among different servers
  9）maxAge: the maximum allowed age for tokens to still be valid. It is expressed in seconds or a string describing a time span zeit/ms.
  Eg: 1000, "2 days", "10h", "7d". A numeric value is interpreted as a seconds count. If you use a string be sure you provide the time units (days, hours, etc), otherwise milliseconds unit is used by default ("120" is equal to "120ms").

  10）clockTimestamp: the time in seconds that should be used as the current time for all necessary comparisons.
  11）nonce: if you want to check nonce claim, provide a string value here. It is used on Open ID for the ID Tokens. (Open ID implementation notes)

3. jwt.decode(token [, options]) 解碼 token

只是解碼 token 中的 payload，不會(huì)驗(yàn)證 token。 options 參數(shù)有:

  1）json: 強(qiáng)制在 payload 用JSON.parse 序列化，即使頭部沒有聲明 "typ":"JWT"  
  2）complete: true 則返回解碼后的包含  payload 和 header  的對(duì)象.

4. 錯(cuò)誤碼

在驗(yàn)證 token 的過程中可能或拋出錯(cuò)誤，jwt.verify() 的回調(diào)的第一個(gè)參數(shù)就是 err,err 對(duì)象有一下幾種類型：