驗證碼

Node.js 的驗證碼確實很坑，底層本身不帶有這些操作。查詢了很多方法，大多都需要安裝新的底層依賴，跨平臺性非常低。而且涉及到一個很重要的問題，就是在部署的時候，你還得在部署的平臺上再安裝一次這個依賴。

介於以上原因，選擇了一個國人產的簡單的驗證碼生成庫 node-gd-bmp。

生成驗證碼

如何生成，參考 node-gd-bmp 文件。這裡只是研究如何將生成的驗證碼回傳給客戶端。

• 回傳一個字串

  伺服器：

  router.get('/captcha', function (req, res) {
  const img = makeCapcha();
  res.setHeader('Content-Type'
   
  , "text/plain"); // 設定響應頭
  res.end('data:image/bmp;base64,' + img.getFileData().toString('base64'));
  });

  客戶端：

  axios({
      url: '/security-code/captcha',
      method: 'GET',
      responseType: 'text'
  }).then(res => {
      this.setState({
      vcLoding: false,
      captcha: res.data // 使用返回的字串，這裡是在 React 中使用
  });
   
  

  HTML:

   // jsx 語法
  <img src={captcha} src='驗證碼'/> 
  // 也可用作背景
  <Button style={{backgroundImage: `url(${captcha})`}} onClick={this.handleVCButtonClick}></Button>

• 回傳一張圖片

  伺服器：

  router.get('/captcha', function (req, res) {
  const img = makeCapcha();
  res.setHeader('Content-Type', "image/bmp"); // 設定響應頭
   
  
  res.end(img.getFileData());
  });

  客戶端：

  handleButtonClick = () => {
      let BaseUrl = '/security-code/captcha?str=';
      // randomStr(16) 用於獲取16位的隨機字串
      // 在每次點選的時候 url 都改變，以防止瀏覽器進行快取
      this.setState({
          captcha: BaseUrl + randomStr(16)
      });
  }

  HTML:

   // jsx 語法
  <img src={captcha} src='驗證碼'/> 
  // 也可用作背景
  <Button style={{backgroundImage: `url(${captcha})`}} onClick={this.handleButtonClick} loading={vcLoding}></Button>

生成驗證碼:

由於驗證碼會在專案中的多個使用，因此，我們將它提取到一個單獨的模組：

// captcha.js
var svgCaptcha = require('svg-captcha');

// // 全域性配置, 需要時將註釋取消
// const options = {
//   width: 100,
//   height: 20,
//   fontSize: 25,
// }

// Object.assign(svgCaptcha.options, options);

const makeCapcha = () => {
  var captcha = svgCaptcha.create({
    size: 6,
    ignoreChars: '0o1i',
    noise: 3,
    width: 100,
    height: 30,
    fontSize: 25,
  });
  return captcha;
}

module.exports = makeCapcha;

• 回傳 svg

  伺服器：

  router.get('/captcha', function (req, res) {
      const captcha = makeCapcha();
      // req.session.captcha = captcha.text;
  
      res.type('svg');
      res.status(200).send(captcha.data);
  });

  客戶端：

  handleButtonClick = () => {
      let BaseUrl = '/security-code/captcha?str=';
      // randomStr(16) 用於獲取16位的隨機字串
      // 在每次點選的時候 url 都改變，以防止瀏覽器進行快取
      this.setState({
          captcha: BaseUrl + randomStr(16)
      });
  }

  HTML:

   // jsx 語法
  <img src={captcha} src='驗證碼'/> 
  // 也可用作背景
  <Button style={{backgroundImage: `url(${captcha})`}} onClick={this.handleButtonClick} loading={vcLoding}></Button>

除了在伺服器生成驗證碼上有區別外，與 node-gd-bmp 用法相同。對比兩者，svg-captcha 更簡潔，更優美，但樣式偏少；node-gd-bmp 的定製化程度更高。

驗證

驗證碼實現的基本原理是客戶端將使用者填寫的驗證碼資料與伺服器上儲存的資料進行比對。

在伺服器上儲存驗證碼資料有多種方式，常用的有 session、redis

• session

  在 session 儲存驗證碼資料是一種常見的做法，我們在生成驗證的時候會獲得一個字串，我們將此字串儲存在當前的 session 中，當用戶提交驗證碼到伺服器時，將 session 中儲存的字串與使用者提交的字串進行比對。

  儲存驗證碼：

  router.get('/captcha', function (req, res) {
      const captcha = makeCapcha();
      // 儲存驗證碼字串
      req.session.captcha = captcha.text;
  
      res.type('svg');
      res.status(200).send(captcha.data);
  });

  驗證驗證碼：

  router.post('/sign_up', function (req, res) {
      if (req.body.captcha === res.session.captcha) {
          console.log('驗證成功');
      }
  });

• redis