Apifox 图片验证码

Apifox 中接口返回的图片验证码怎么显示？

Apifox

2024-02-20

Apifox 中不能够直接识别图片验证码的具体内容，所以如果需要将验证码作用于其它接口，需要手动发起请求将验证码获取，并手动填写到其它接口（如登录接口）中。又或者，你可以在接口中直接写死一个值，并让后端根据 ip 开放白名单，一般在测试阶段可以这么做。

下面来介绍一下在 Apifox 中显示图片验证码的几种情况。

二进制流格式

针对二进制流格式的验证码，Apifox 会尝试将其解析为图片并显示出来，不需要作其它特殊处理。这通常是因为 Apifox 的响应控制台跟浏览器一样，能够识别内容类型，并将其正确解析。

二进制数据：

自动解析后的图片验证码：

Svg 格式

后端有时候也会返回 JSON 格式的内容，并将验证码以 Svg 格式携带在 JSON 中返回，例如：

{
  "code": 0,
  "message": "ok",
  "data": {
    "img":'<svg width="104" height="50" xmlns="http://www.w3.org/2000/svg">
      <rect width="100%" height="100%" fill="#e3fafc" />
      <linearGradient id="bg" x1="0" x2="0" y1="0" y2="1">
        <stop offset="5%" stop-color="#02AAB0" />
      ……………………………………
      ……………………………………
    </svg>'
  }
}

这个时候就需要在【后置操作】中编写脚本，将内容提取出来，并对 Svg 格式的图片进行可视化渲染，其步骤如下：

第一步，根据返回的 JSON 响应获取图片数据（图片路径），并通过 btoa() 方法将其转化为 Base64 编码：

// 获取SVG图片数据
let svgContent = pm.response.json().data.img;

// 将SVG内容转换为Base64编码
let imgBase64 = `data:image/svg+xml;charset=utf-8;base64,${btoa(svgContent)}`;

第二步，添加 HTML 模板，该模板用于渲染图片。模板中使用 {{}} 包裹变量：

// html 模板
let template = `
    <img src="{{imgBase64}}" />
`;

第三步，应用pm.visualizer.set() 函数，将模板以及数据传入：

// 设置 visualizer 数据。传模板、解析对象。
pm.visualizer.set(template, { imgBase64 });

其结果如下，在控制台点击 Visualize 即可查看：

Base64 格式

后端有时候也会以 Base64 格式返回图片验证码，通常会将 Base64 携带在 JSON 中返回，例如：

{
  "code": 0,
  "message": "ok",
  "data": {
    "img":'iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAIAAABM5OhcAAABrklEQVR4nO3dwW3CQBRAQYhSAY1CKdAoNeSAZBE7QSThAWFnTmaFjaV9+vaN9f64X8GtvT36BnhNwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLCIiEsEsIiISwSwiIhLBLvj76BZ7Hd7Kbjw3H/5crlc6fvTCdeWHl5Q0ys7WZ32trTwXkxk8NxP9v15cqFK5+vrD6nuVwZwYgTa7bHP5ois7OumW3jTKlzQ0ysk/Pt/90Uuf6s5cNxtvLyBgpruanRg2nZ0PRU9SgcQjE/pqqWBzf/rWe2HuE/oWd7PDtefvzO7AqrKybQX97n/rUhwuL+BnrH4p6ERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRFQlgkhEVCWCSERUJYJIRF4gNUBXa6R3p1qwAAAABJRU5ErkJggg=='
  }
}

要在 Apifox 中可视化，也是跟 Svg 的可视化一样，通过【后置操作】来编写脚本来进行渲染。参考代码如下：

// 获取图片数据
let svgContent = pm.response.json().data.img;

// 将图片转换为Base64编码
let imgBase64 = `data:image/png;base64,${svgContent}`;

// html 模板
let template = `
    <img src="{{imgBase64}}" />
`;

// 设置 visualizer 数据。传模板、解析对象。
pm.visualizer.set(template, { imgBase64 });

关于可视化渲染这一块，你可以参考这篇文章：【Apifox 的可视化响应功能，让你的接口数据一目了然】

总结

Apifox 通过后置操作脚本实现验证码的可视化渲染。针对不同格式的验证码，如 SVG 或 Base64，脚本将提取数据并转换为可渲染的图片格式，然后通过 HTML 模板和pm.visualizer.set()函数实现在控制台中的显示，从而方便用户直观查看验证码。

知识扩展：

二进制流格式

Svg 格式

Base64 格式

总结

订阅