分享一款免费的验证码插件【内附github地址】

github demo地址

https://github.com/dingxiangtech/captcha-demo

captcha-demo

1、验证码工作流程

分享一款免费的验证码插件【内附github地址】_第1张图片

2、demo运行

captchaUIdemo

文件夹说明 :模拟了web端登录流程接入验证码的场景,对应图中的验证码初始化和验证码验证两个阶段

使用流程 :

  1. 下载该文件夹到电脑中,下载完成后,文件夹的内容如下图所示:

分享一款免费的验证码插件【内附github地址】_第2张图片

  1. 打开js文件夹中的config.js文件,修改其中的appId配置,appId配置可以在顶象控制台应用管理或应用配置模块获取

分享一款免费的验证码插件【内附github地址】_第3张图片

  1. 修改完毕后点击保存。

captchaJavaDemo

文件夹说明 :模拟了后台业务流程接入验证码的场景,主要是模拟登录场景下的验证码token验证,对应业务请求携带验证码安全凭据和验证码安全凭据核验两个步骤

使用流程 :

  1. 下载该文件夹到电脑中,下载完成后,文件夹的内容如下图所示:

    分享一款免费的验证码插件【内附github地址】_第4张图片

  2. 将项目导入至IDEA中,等待IDEA把项目加载完毕,编辑CaptchaService类,修改其中appId和appSecret的值

    分享一款免费的验证码插件【内附github地址】_第5张图片

  3. 修改后点击保存,在IDEA中运行这个springboot项目。运行成功如下图所示:

    分享一款免费的验证码插件【内附github地址】_第6张图片

打开index.html

  1. 在浏览器中打开 captchaUIdemo 文件夹中的index.html文件,如下图所示:

    分享一款免费的验证码插件【内附github地址】_第7张图片

  2. 输入用户名和密码后,点击登录,会弹出验证码进行验证

    分享一款免费的验证码插件【内附github地址】_第8张图片

  3. 验证通过后,会提示登录成功

    分享一款免费的验证码插件【内附github地址】_第9张图片

注意:其中两个项目中的appid都需要做修改,appid和appsecret可以通过顶象控制台的产品管理进行获取。

3、更多集成说明

其他各个语言和各个端的详细配置和接入流程可以参考顶象官网验证码用户手册:https://www.dingxiang-inc.com/docs/detail/captcha

4、使用问题

集成或使用中遇到问题,可以查询或提交issues

欢迎fork或者star~

你可能感兴趣的:(安全验证码前端html5)