网站怎么做值班表网站seo入门基础教程
一、短信验证码
前端：
- 用户填写手机号，点击按钮发送请求
- 用户短信得到验证码后，用户填写表单
- 提交 form 表单，进行验证
后台：
- 随机生成几位验证码
- 并将生成时间、手机号、验证码存储起来，可以存到session、redis、数据库等
- 调用短信接口提供的sdk短信发送接口，将验证码发送到指定的手机号上
参考链接
二、图形验证码
前端：
- 用户填写手机号，在 input 框失去焦点时，发送获取验证码请求
- 得到后台的 base64 编码，并显示出来
<img src={`data:;base64,${verifyCodeUrl}`} onClick={handleGetVerifyCode} />
- 提交 form 表单，进行验证
但是它不安全，脚本可以高准确率、快速地识别出答案
类似的还有算数验证码
三、滑动拼图验证码
根据用户滑动滑块的响应时间，拖拽速度，时间，位置，轨迹，重试次数等验证，相对来说更安全。
- 有三张图，带缺口的背景图、拼图、完整的背景图
- 操作：
用户的操作：按住滑块，拖动图片至阴影位置，完成验证。
开发人员：
1）对比完整图和背景图的区别，得到阴影位置
2）计算需要滑动的距离:遍历完整图的每一个像素点，利用 getRGB 对比完整图和缺口图哪里有差异，在有差异的时候，返回横坐标，即需要滑动的距离
3）拖动滑块，看效果
参考链接