微信小程序—那些安全验证,滑块验证、输入验证码、拼图验证

前言

很多场景下都应用到验证这种交互方式,既然是交互,就有体验这种衡量维度,但验证本质上却是降低用户体验的,为啥还要,很明显就是需要安全,那么在使用验证的时候,就需要考虑到安全和体验两个维度,做到最好的平衡。做为程序员,我不知道最好的平衡点在哪,只需要知道这些都是怎么弄出来的,做程序真幸福,复制粘贴,能跑就行。
本文提供三种验证码的实现思路及组件代码——滑块验证、无规则验证码、拼图验证,实现不好,仅限参考。

思路

滑块验证

用微信官方组件movable-area、movable-view实现,方便快捷。

无规则验证码

用canvas实现,先画随机字母,再画随机线条,再画随机点,如果有其他更好想法,还可以再画随机其他。

拼图验证

用canvas与微信官方组件movable-area、movable-view实现,加载图片,裁剪特殊形状图片后加载到image上,用movable-view的移动来控制image移动

效果

在这里插入图片描述

体验

体验路径:自定义系列>安全验证
在这里插入图片描述

组件代码免积分下载

滑块验证免积分下载
无规则验证码免积分下载
拼图验证免积分下载

程序员不易,鼓励一下

在这里插入图片描述

  • 6
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 15
    评论
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

玩烂小程序

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值