基于Canvas实现刮刮卡效果验证码的方法专利检索-鼠标外围设备硬件计算机系统电脑零配件专利检索查询-专利查询网

基于Canvas实现刮刮卡效果验证码的方法

阅读：1036发布：2020-06-17

专利汇可以提供基于Canvas实现刮刮卡效果验证码的方法专利检索，专利查询，专利分析的服务。并且本发明公开了基于Canvas实现刮刮卡效果验证码的方法，通过CanvasAPI 渲染刮刮卡效果的刮涂层，通过JavaScript技术对Canvas元素进行事件注入、监听及处理，实现验证码“按需加载，后置请求与渲染”，达到帮助客户端禁用脚本程序抓取验证码的效果，提升客户端通过此验证机制区分真实用户和脚本程序的正确率和提高用户使用验证码功能时的趣味性。，下面是基于Canvas实现刮刮卡效果验证码的方法专利的具体信息内容。

权利要求

1.基于Canvas实现刮刮卡效果验证码的方法，其特征在于，包括以下步骤：
步骤1，页面加载完成时，使用Canvas渲染验证码模块的上图层，并为Canvas元素添加系列事件监听函数；
步骤2，当用户在验证码模块区域内按下鼠标左键时，通过AJAX技术向服务端发送验证码请求，并返回验证码；
步骤3，客户端接收到返回的验证码时，开始渲染验证码模块的下图层；
步骤4，对于简单的验证要求，判断上图层区域被刮开面积达到70％时，自动填写验证码；
步骤5，对于复杂的验证要求，不做被刮开区域面积占比监听，须手动填写验证码；
步骤6，验证码填写完毕后，自动提交至服务器验证。
2.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤1中，在全局监听DOMContentLoaded事件，当该事件被触发，即表明DOM树渲染完成，此时使用JavaScript调用CanvasAPI绘制验证码模块的刮刮卡图层，并在生成的Canvas元素上添加系列的事件监听函数，包括鼠标按钮事件、鼠标拖拽事件、Canvas元素的像素点个数与ALPHA值计算函数。
3.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤2中，通过步骤1中添加的鼠标事件监听函数，监听到当用户在验证码区域内按下鼠标左键触发MouseEvent事件时，客户端向服务端发起AJAX请求，请求验证码，并将请求的验证码返回给客户端；
所述步骤2中客服端向服务端发送AJAX请求是在用户按下鼠标左键触发MouseEvent的button属性且值为0时触发。
4.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤3中，客服端接收到返回的验证码后，使用JavaScript技术生成验证码图层，其中包括验证码数据的读取、验证码显示的渲染及验证码输入框的渲染，渲染的样式依然使用JavaScript编写样式表内容，在生成的验证码元素上添加输入事件监听函数并获取步骤2中返回的验证码字符串的长度值；
所述步骤3中的验证码图层的渲染生成是发生在客服端成功拿到所述步骤2中的验证码之后，而非预先渲染完成。
5.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤4中，通过步骤1中添加的路径记录函数实时的计算验证码区域被用户刮去面积在总面积中的占比，为了提升用户体验，在路径记录函数的实时计算过程，对用户的鼠标拖拽事件进行“节流”操作，当面积占比达到阈值时，获取返回的验证码并自动填入验证码框内；
所述步骤4中的刮去涂层面积占比是通过Canvas元素的getImageData.data方法获取并计算像素点个数与其像素点的alpha值来判断被刮开区域面积的占比是否在70％及以上来实现。
6.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤6中，通过添加的输入事件监听函数监听并判断验证码输入框的value字符串的长度，当输入串的长度值等于验证码串长度值时，自动提交至服务器验证；
所述步骤6中的自动提交验证码功能的触发是通过判断用户输入的验证码字符串长度是否与步骤2中返回的验证码字符串的长度相等，相等时便触发该功能。
7.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤1中的页面加载完成是指当前页面的DOM树渲染完成，可触发DOMContentLoaded事件时；
所述步骤1中的刮刮卡涂层效果是通过CanvasAPI与JavaScript渲染的一图层效果；刮刮卡效果是在图层范围内，可以通过按下鼠标左键来刮去涂层的，松开鼠标左键停止刮去涂层，长按鼠标左键时可以一直刮去涂层。

说明书全文

基于Canvas实现刮刮卡效果验证码的方法

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

[0015] 步骤4，对于简单的验证要求，判断上图层区域被刮开面积达到70％时，自动填写验证码。

[0016] 具体地，通过步骤1中添加的路径记录函数实时的计算验证码区域被用户刮去面积在总面积中的占比，为了提升用户体验，在路径记录函数的实时计算过程，对用户的鼠标拖拽事件进行“节流”操作，当面积占比达到阈值时，获取返回的验证码并自动填入验证码框内。

[0017] 所述步骤4中的刮去涂层面积占比是通过Canvas元素的getImageData.data方法获取并计算像素点个数与其像素点的alpha值来判断被刮开区域面积的占比是否在70％及以上来实现

[0018] 步骤5，对于复杂的验证要求，不做被刮开区域面积占比监听，须手动填写验证码。

[0019] 步骤6，验证码填写完毕后，自动提交至服务器验证。

[0020] 具体地，通过添加的输入事件监听函数监听并判断验证码输入框的value字符串的长度，当输入串的长度值等于验证码串长度值时，自动提交至服务器验证。

[0021] 所述步骤6中的自动提交验证码功能的触发是通过判断用户输入的验证码字符串长度是否与步骤2中返回的验证码字符串的长度相等，相等时便触发该功能。

[0022] 本发明的有益效果在于：

[0023] 本发明的基于Canvas实现刮刮卡效果验证码的方法，通过“按需加载，后置请求与渲染”的方式，不预先随页面加载完成一同加载验证码，而是通过当用户使用鼠标触发Canvas元素的监听事件时才向服务端请求验证码，返回后再进行渲染，能有效的让脚本程序不能抓取验证码，提升客户端通过该验证机制区分真实用户和脚本程序的正确率和提高真实用户使用验证码的趣味性。附图说明

[0024] 为了更清楚地说明本发明实施例中的技术方案，下面将对实施例或现有技术描述中所需要实用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本实施例的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0025] 图1为本发明流程图。

具体实施方式

[0026] 为使本发明的目的、技术方案和优点更加清楚，下面将对本发明的技术方案进行详细的描述。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所得到的所有其它实施方式，都属于本发明所保护的范围。

[0027] 在任一实施例中，如图1所示，本发明的基于Canvas实现刮刮卡效果验证码的方法，包括：

[0028] 当页面加载完成(特指当前页面的DOM树渲染完成，可触发DOMContentLoaded事件阶段)时，使用CanvasAPI与JavaScript在验证码区域渲染验证码的刮刮卡涂层并且在Canvas元素上添加系列的事件监听函数，主要包括鼠标按钮事件、鼠标拖拽事件、Canvas元素的像素点个数与ALPHA值计算函数；当用户在验证码的涂层范围内，按下鼠标左键触发MouseEvent的button属性且值为0时，触发验证码的请求事件，并通过AJAX技术向服务端发送AJAX请求，并返回请求的验证码；客户端接收到返回的验证码后，开始渲染验证码模块的验证码层；对于简单的验证请求，通过Canvas元素的getImageData.data方法获取并计算像素点个数与其像素点alpha值来判断被刮开区域面积的占比是否在70％及以上，当达到该阈值时，将返回的验证码赋值给验证码输入框的value，实现自动填写验证码功能；对于复杂的验证请求，不做被刮开区域面积占比的监听，只检测验证码的长度值，需手动填写验证码，再判断用户输入的验证码字符串长度是否与返回的验证码字符串长度相等，相等时便自动提交验证码到服务器进行验证。

[0029] 在一个具体实施例中，如图1所示，本发明的基于Canvas实现刮刮卡效果验证码的方法，包括以下步骤：

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

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

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

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

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

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

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

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

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

[0039] 步骤4，对于简单的验证要求，判断上图层区域被刮开面积达到70％时，自动填写验证码。

[0040] 具体地，通过步骤1中添加的路径记录函数实时的计算验证码区域被用户刮去面积在总面积中的占比，为了提升用户体验，在路径记录函数的实时计算过程，对用户的鼠标拖拽事件进行“节流”操作，当面积占比达到阈值时，获取返回的验证码并自动填入验证码框内。

[0041] 所述步骤4中的刮去涂层面积占比是通过Canvas元素的getImageData.data方法获取并计算像素点个数与其像素点的alpha值来判断被刮开区域面积的占比是否在70％及以上来实现

[0042] 步骤5，对于复杂的验证要求，不做被刮开区域面积占比监听，须手动填写验证码。

[0043] 步骤6，验证码填写完毕后，自动提交至服务器验证。

[0044] 具体地，通过添加的输入事件监听函数监听并判断验证码输入框的value字符串的长度，当输入串的长度值等于验证码串长度值时，自动提交至服务器验证。

[0045] 所述步骤6中的自动提交验证码功能的触发是通过判断用户输入的验证码字符串长度是否与步骤2中返回的验证码字符串的长度相等，相等时便触发该功能。

[0046] 以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所述权利要求的保护范围为准。另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合，为了避免不必要的重复，本发明对各种可能的组合方式不再另行说明。此外，本发明的各种不同的实施方式之间也可以进行任意组合，只要其不违背本发明的思想，其同样应当视为本发明所公开的内容。

标题	发布/更新时间	阅读量
智能家电装置控制方法	2020-05-08	444
一种云桌面广播方法、装置、系统、设备和介质	2020-05-08	213
一种cocos2dx嵌入cef实现透明网页的方法	2020-05-08	477
一种基于云端的模拟物理云台全景视频展示系统	2020-05-08	731
一种助产技术的仿真模拟系统	2020-05-08	497
一种基于USB网卡技术的独立Web服务测试设备	2020-05-08	584
一种可预判两指合并趋势的指环式鼠标及预判方法	2020-05-11	703
空中鼠标信息确定方法、装置、设备及存储介质	2020-05-11	712
可控鼠标的手提电脑	2020-05-08	792
一种计算机鼠标线的收纳装置	2020-05-08	662

基于Canvas实现刮刮卡效果验证码的方法

基于Canvas实现刮刮卡效果验证码的方法

技术领域

背景技术

发明内容

具体实施方式

该功能需要专业版企业版VIP权限，您可以：