前言

一般为了防止机器登录Web网站,我们都会要求输入验证码来进行登录操作。这次就遇到一个已经投入使用的网站需要一个微信小程序,接口都是通用的也不存在什么大的问题,可是验证码这里就有点麻烦了。

解决

我们知道,微信小程序在发起请求的时候是不会保存登录态(Cookie)的,所以需要我们自己手动来保存获取到的Cookie。

获取验证码并显示也不例外,我们可以将验证码的接口url直接写入验证码图片的src属性里,就像src='/pub/jcaptcha.servlet',但是上边提到过小程序不会主动携带cookie发送请求的,所以这样操作无法将验证码和登录请求绑定在一起,只能另寻他法。

灵机一动就想到:可以单独发起请求带上cookie获取到图片,然后把响应写入到验证码图片框里,这样就可以达到我们的目的了。

可是将相应内容输出一看,却是这个样子的。
图片说明

好吧传过来的并不是Base64字符的图像,那么在小程序里也就无法处理了。

在谷歌了一番之后呢,找到一个很巧妙的办法:
小程序有一个wx.downloadFile()的方法,这是下载一个文件用的,我们可以用它带着Cookie把验证码图片下载到本地的临时目录然后将本地路径做为验证码图片的src,就能解决验证码这个头疼的问题了!

let url =  app.globalData.site + '/pub/jcaptcha.servlet';
wx.downloadFile({
  header: {
    'cookie': app.globalData.cookies
  },
  url,
  success: (res) => {
    that.setData({
      needCaptcha: true,
      captchaImg: res.tempFilePath
    });
  }
})

操作成功。