[发明专利]基于Canvas实现刮刮卡效果验证码的方法

说明书

本发明公开了基于Canvas实现刮刮卡效果验证码的方法，通过CanvasAPI渲染刮刮卡效果的刮涂层，通过JavaScript技术对Canvas元素进行事件注入、监听及处理，实现验证码“按需加载，后置请求与渲染”，达到帮助客户端禁用脚本程序抓取验证码的效果，提升客户端通过此验证机制区分真实用户和脚本程序的正确率和提高用户使用验证码功能时的趣味性。

技术领域

本发明涉及网络信息安全技术领域，尤其涉及基于Canvas实现刮刮卡效果验证码的方法。

背景技术

目前客户端采用验证码机制主要是用于帮助客户端区分真实用户和脚本程序，但在传统验证码的验证机制下，由于传统验证码的验证机制是验证码随页面加载时一并加载，然后由用户填写验证码并进行验证，而此时脚本程序也能轻松抓取已加载渲染完成的验证码并进行自动填写、验证，所以传统验证码的验证机制使得客户端在使用验证码区分真实用户和脚本程序时的正确率很低，达不到甄别脚本程序的效果。

发明内容

本发明的目的就在于为了解决上述问题而提供基于Canvas实现刮刮卡效果验证码的方法，本发明的验证码验证机制不同于传统验证码的验证机制，不随页面加载完成预先向服务端请求验证码进行渲染，而是采用“按需加载，后置请求与渲染”的方式，当用户通过鼠标触发Canvas元素上的鼠标监听事件时才向服务端请求验证码，返回后再进行渲染，这一验证机制能让自动填写验证码的脚本程序失效。本发明采用Canvas实现验证码的“延迟请求，后置加载与渲染”，解决客户端在区分真实用户和脚本程序时正确率低的问题。

本发明通过以下技术方案来实现上述目的：

基于Canvas实现刮刮卡效果验证码的方法，包括以下步骤：

步骤1，页面加载完成时，使用Canvas渲染验证码模块的上图层(即刮刮卡图层)，并为Canvas元素添加系列事件监听函数。

具体地，在全局监听DOMContentLoaded事件，当该事件被触发，即表明DOM树渲染完成此时使用JavaScript调用CanvasAPI绘制验证码模块的刮刮卡图层，并在生成的Canvas元素上添加系列的事件监听函数，主要包括鼠标按钮事件、鼠标拖拽事件、Canvas元素的像素点个数与ALPHA值计算函数。

所述步骤1中的页面加载完成是指当前页面的DOM树渲染完成，可触发DOMContentLoaded事件时；所述步骤1中的刮刮卡涂层效果是通过CanvasAPI与JavaScript渲染的一图层效果；刮刮卡效果是在图层范围内，可以通过按下鼠标左键来刮去涂层的，松开鼠标左键停止刮去涂层，长按鼠标左键时可以一直刮去涂层。

步骤2，当用户在验证码模块区域内按下鼠标左键时，通过AJAX技术向服务端发送验证码请求，并返回验证码。

具体地，通过步骤1中添加的鼠标事件监听函数，监听到当用户在验证码区域内按下鼠标左键触发MouseEvent事件时，客户端向服务端发起AJAX请求，请求验证码，并将请求的验证码返回给客户端。

所述步骤2中客服端向服务端发送AJAX请求是在用户按下鼠标左键触发MouseEvent的button属性且值为0时触发。

步骤3，客户端接收到返回的验证码时，开始渲染验证码模块的下图层(即验证码图层)。

具体地，客服端接收到返回的验证码后，使用JavaScript技术生成验证码图层，其中包括验证码数据的读取、验证码显示的渲染及验证码输入框的渲染，渲染的样式依然使用JavaScript编写样式表内容，在生成的验证码元素上添加输入事件监听函数并获取步骤2中返回的验证码字符串的长度值。

所述步骤3中的验证码图层的渲染生成是发生在客服端成功拿到所述步骤2中的验证码之后，而非预先渲染完成。