如何给自己的网站项目加上人机验证

文章导航

×

1. 1. 网站效果图
2. 2. 人机验证网站注册
3. 3. 个人博客部署效果

今天在偶然逛网站的时候看到这个网站的注册 点击此处进行人机识别验证 的东东让我眼前一亮，作为一个web前端开发工程师，不自觉的按下了F12 看看这个东西是何方神圣，掰开代码一番研究，是通过一个class名为l-captcha 绑定了一个data-site-key 属性嵌入了一个iframe网页指向了该元素本身并且插入了一个脚本<script src="//captcha.luosimao.com/static/dist/api.js"></script> 大概原理就是这么的。如果你还没看的很明白可以看看官方的验证demo自己实现的人机验证

您可以通过以下方式快速在自己的页面上创建人机验证

复制以下HTML结构,放置在页面上您需要增加人机验证的位置,data-site-key的值在网站后台人机验证管理处添加并获取:

复制以下JS代码,放置在结束标签之前:

网站效果图

人机验证网站注册

必须有备案的域名才能给网站加上人机验证 Site key为你自己网站的验证code

上图的Site key填入需要加入验证的地方，如下打马赛克地方

统计验证的可视化

使用的展示效果

个人博客部署效果

ps:由于该站是采用hexo,没有动态语言支持不能部署真实的项目，只作为学习演示，等我有空了在用php写个自己的网站。学无止境，继续努力吧….2017年继续努力

---

版权声明： 本文章采用 知识共享署名 2.5 中国大陆许可协议 进行许可，欢迎转载，但转载请注明来自李立冬博客，并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文链接：http://www.lilidong.cn/2017/01/19/如何给自己的网站项目加上人机验证/