一、短信验证码

前端：

1. 用户填写手机号，点击按钮发送请求
2. 用户短信得到验证码后，用户填写表单
3. 提交 form 表单，进行验证

后台：

1. 随机生成几位验证码
2. 并将生成时间、手机号、验证码存储起来，可以存到session、redis、数据库等
3. 调用短信接口提供的sdk短信发送接口，将验证码发送到指定的手机号上

参考链接

二、图形验证码

前端：

1. 用户填写手机号，在 input 框失去焦点时，发送获取验证码请求
2. 得到后台的 base64 编码，并显示出来

<img src={`data:;base64,${verifyCodeUrl}`} onClick={handleGetVerifyCode} />

3. 提交 form 表单，进行验证

但是它不安全，脚本可以高准确率、快速地识别出答案

类似的还有算数验证码

三、滑动拼图验证码

根据用户滑动滑块的响应时间，拖拽速度，时间，位置，轨迹，重试次数等验证，相对来说更安全。

1. 有三张图，带缺口的背景图、拼图、完整的背景图
2. 操作：

用户的操作：按住滑块，拖动图片至阴影位置，完成验证。

开发人员：

1）对比完整图和背景图的区别，得到阴影位置

2）计算需要滑动的距离:遍历完整图的每一个像素点，利用 getRGB 对比完整图和缺口图哪里有差异，在有差异的时候，返回横坐标，即需要滑动的距离

3）拖动滑块，看效果

参考链接