摘要：即便是使用為主作為服務(wù)端開發(fā)在項(xiàng)目中也會(huì)經(jīng)常用到要去其他的系統(tǒng)調(diào)用服務(wù)的場(chǎng)景。對(duì)于服務(wù)端調(diào)用的場(chǎng)景加上這個(gè)基本認(rèn)證也會(huì)比在前端直接使用這種比較空的更加合適。本文將介紹使用在服務(wù)端調(diào)用時(shí)面對(duì)最基本的認(rèn)證認(rèn)證的處理方式。

Node作為前后端分離的”利器“由于它使用JS語(yǔ)法的特殊性，可以使得前端更好的利用Node來(lái)作為中間層十分方便得調(diào)用后臺(tái)提供的“黑盒”API。即便是使用Node為主作為服務(wù)端開發(fā)在項(xiàng)目中也會(huì)經(jīng)常用到要去其他的系統(tǒng)調(diào)用服務(wù)的場(chǎng)景。

請(qǐng)求的認(rèn)證一直是一個(gè)web系統(tǒng)很重要的一環(huán)，直接關(guān)系到了系統(tǒng)的安全。對(duì)于Node在服務(wù)端方面，稍微復(fù)雜的認(rèn)證機(jī)制使用的最多的就是passport模塊，通過(guò)它強(qiáng)大而又靈活的Strategy機(jī)制，官方同時(shí)也提供了很多策略滿足很多常見(jiàn)的場(chǎng)景。當(dāng)然今天的主題是最簡(jiǎn)單的基礎(chǔ)認(rèn)證 HTTP Basic Authentication，提供了對(duì)http最為基礎(chǔ)的認(rèn)證策略，即用戶名和密碼。對(duì)于服務(wù)端調(diào)用API的場(chǎng)景加上這個(gè)基本認(rèn)證也會(huì)比在前端直接使用這種比較“空”的更加合適。

本文將介紹使用Node在服務(wù)端調(diào)用API時(shí)面對(duì)最基本的HTTP認(rèn)證 -- HTTP Basic Authentication認(rèn)證的處理方式。即不同的服務(wù)端http client諸如axios, request, restler的使用。

首先對(duì)HTTP Basic Authentication這個(gè)最簡(jiǎn)單的http認(rèn)證形式進(jìn)行簡(jiǎn)單介紹

上圖所示，在客戶端進(jìn)行資源請(qǐng)求的時(shí)候由于該接口API設(shè)置了http基本認(rèn)證對(duì)資源的訪問(wèn)進(jìn)行了限制，則客戶端必須提供用戶名和密碼并且服務(wù)端驗(yàn)證通過(guò)時(shí)才會(huì)得到資源。

下面將使用使用express搭建一個(gè)簡(jiǎn)單的需要基本認(rèn)證的接口，需要說(shuō)明的是在express3中express還集成了很豐富的中間件系統(tǒng)，比如你可以直接通過(guò)app.use(express.basicAuth("username", "password"));來(lái)設(shè)置一個(gè)基本認(rèn)證。在express4開始由于分離了中間件系統(tǒng),你需要多出一步手動(dòng)安裝basic-auth中間件的過(guò)程。

//app.js
const express = require("express")
const basicAuth = require("basic-auth")
const bodyParser = require("body-parser")
const app = express();
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended:true
   }))
app.all("/api", function (req, res) {
    const credentials = basicAuth(req)
    if (!credentials || credentials.name !== "ray" || credentials.pass !== "123") {
        res.statusCode = 401
        res.setHeader("WWW-Authenticate", "Basic realm="example"")
        res.end("go away")
    } else {
        console.log(req.body)
        if(req.body.need && req.body.need === "money"){
            res.json({
                key: "show me the money"
            });
        }else{
            res.json({
                key: "show me the gold"
            })  
        }            
    }
});

app.listen(3000, function () {
    console.log("Example app listening on port 3000!");
});

先簡(jiǎn)單的搭建起一個(gè)提供api的服務(wù)器，當(dāng)你執(zhí)行node app.js之后訪問(wèn)localhost:3000/api的時(shí)候就會(huì)看到瀏覽器彈出讓你輸入用戶名和密碼的對(duì)話框，你如果點(diǎn)擊了取消，即不提供用戶名和密碼，或者錯(cuò)誤密碼，就會(huì)驗(yàn)證失敗，你將看到‘go away’。當(dāng)你提供了正確的密碼則將得到"show me the gold"。

值得一提的是，express的搭建中,我使用了body-parser這個(gè)中間件，原因是接下來(lái)我們使用node在服務(wù)端請(qǐng)求api的時(shí)候會(huì)使用POST方法傳遞參數(shù)，即我想得到的是"show me the money"這句話。而http的post請(qǐng)求默認(rèn)的數(shù)據(jù)格式是www-form-urlencoded解析的時(shí)候需要bodyParser.urlencoded支持。

其實(shí)在Node端可以用的http client模塊有很多，比如可以使用pipe進(jìn)行流式操作的request,以及我現(xiàn)在在做的項(xiàng)目中使用的restler,當(dāng)然還有現(xiàn)在很火爆的前后端都可以使用，并且基于現(xiàn)代異步基礎(chǔ)--Promise的axios,接下來(lái)就介紹對(duì)于這三個(gè)模塊在服務(wù)端去請(qǐng)求一個(gè)設(shè)了HTTP Basic Authentication認(rèn)證的API接口，就是從我們上面用express搭起來(lái)的簡(jiǎn)單的服務(wù)器得到"show me the money"這句話。

npm install --save request安裝request模塊到我們項(xiàng)目目錄，然后新建req.js文件。

//req.js
const request = require("request")

request.post("http://localhost:3000/api", {
    "auth": {
        "user": "ray",
        "pass": "123",
        "sendImmediately": false
    },
    "form": {
        need: "money"
    }
}, function (err, httpResponse, data) {
    if (err) {
        console.log(err);
    } else {
        console.log(`data:${data}`)
    }
})

request模塊本身體積確實(shí)有點(diǎn)大，上面使用它的post方法，通過(guò)在第二個(gè)參數(shù)對(duì)象中寫上auth屬性提供對(duì)http基礎(chǔ)認(rèn)證所需要的用戶名和密碼，第二個(gè)屬性form就是放在請(qǐng)求的body中的類型為application/x-www-form-urlencoded參數(shù)，將會(huì)被我們的express服務(wù)器通過(guò)req.body解析到，當(dāng)然，需要bodyParser.urlencoded()提供支持。

接下來(lái)，先node app.js開啟我們的服務(wù)器，之后你再去node req.js運(yùn)行這個(gè)文件你就會(huì)看到data:{"key":"you get the money"}了

npm install --save axios,新建axi.js

//axi.js
const axios = require("axios")

axios({
        url: "http://localhost:3000/api",
        method: "post",
        auth: {
            username: "ray",
            password: "123"
        },
        data: {
            need: "money"
        }
    })
    .then((response) => {
        console.log(response.data)
    })
    .catch(function (error) {
        console.log(error);
      });

axios最大的特點(diǎn)就是可以十分愉快的使用Promise，并且它的體積足夠的小，它對(duì)基礎(chǔ)認(rèn)證的信息同樣也是在配置中的auth屬性，而他所需要隨請(qǐng)求放在body中的參數(shù)是放在data字段中，而且需要注意的是他返回的數(shù)據(jù)是在返回結(jié)果的data字段中，同樣，此時(shí)你node axi.js也能得到{ key: "you get the money" }.

npm install --save restler,新建rest.js

const rest = require("restler")

rest.post("http://localhost:3000/api",{
    username:"ray",
    password:"123",
    data: {
        need:"money"
    }
}).on("complete",function(data){
    console.log(data)
})

最后是restler模塊,需要的認(rèn)證信息直接是其第二個(gè)參數(shù)options中的兩個(gè)字段username和password,攜帶在body中的信息依舊是放在data字段中，用監(jiān)聽事件的方式監(jiān)聽complete事件發(fā)生觸發(fā)回調(diào)函數(shù)你就得到了通過(guò)驗(yàn)證的消息{ key: "you get the money" }。

當(dāng)然上述三個(gè)模塊以及瀏覽器發(fā)送請(qǐng)求不帶認(rèn)證信息都將得到帶著401的"go away",三個(gè)模塊不在請(qǐng)求的body中帶上參數(shù)need都會(huì)”show you the gold”。

最后，如果有錯(cuò)誤與不足還希望您能指出:)
完整demo地址
個(gè)人博客地址