JS点击图片后显示验证码 如何实现?

JavaScript017

JS点击图片后显示验证码 如何实现?,第1张

最简单的方法你把图一的显示验证码也弄成一个图片,比如叫code.png,上面你的代码就能换成

<img src="code.png" onclick="this.src ={$maccms.path_tpl}picture/captcha.png"

据腾讯客服介绍,腾讯天御验证码服务与腾讯防水墙是同一款产品,不同的是两者的接入方式和管理后台不一样。且面向的用户群体也不同,防水墙主要面向于中小企业,且处于免费推广期,而天御则面向较大型企业。

1)客户端从服务端获取验证码 JS 文件

2)客户端嵌入验证码JS页面(iframe形式)

3)用户完成验证码验证

4)客户端获得验证 ticket,并提交服务端进行二次验证

5)服务端通过天御服务器接口进行ticket验证

服务端主要有两个接口:

1) 后台获取验证码js地址

2) 后台验证票据API

腾讯云的API请求由两类请求参数:公共请求参数和接口请求参数。公共请求参数的首字母均为大写,接口请求参数首字母为小写。对于公共请求参数的生成可以参考 官方文档 ,难点在于公共参数中 Signature 字段生成,这里有一份较为详细的 签名方法文档 。

虽然尝试过动手工生成请求参数,但文档中的描述与实际接口的要求不相符,始终没有成功。最终,通过这个库 —— 腾讯云 API 2.0 SDK for node.js ,完成API参数的生成。

其中,返回值的 code 字段。0表示成功,其他值表示失败。

主要流程如下:

1)从后端获取 JS SDK 地址

2)动态加载 JS 文件

3)初始化验证码服务,注册回调事件,并绑定到DOM节点中

从接入文档和接入方式看,防水墙的接入防水比较简单且文档很详细、准确。天御的文档则含糊不清,文档中字段与实际接口字段有出入,联系专业客服人员也不回答。接入起来有一定成本。

本来打算将天御作为主要验证码服务,奈何文档太烂,又没有Node的SDK,管理后台又不好用,最后放弃了。(疯狂甩锅 (╯°□°)╯︵┻━┻)

有意思的是,腾讯天御的公共参数设定方式与阿里云的公共参数设定方式大同小异。很好奇,是谁借鉴谁的。