- _nosay
给apicloud加上图形验证码
2017-08-19 10:49:05
我的登陆界面大概已经好了,具体也就这个样子啦
界面丑是丑点了,但是不用在意这些细节啦。因为登陆其实是用到了手机短信验证登陆的,所以出于安全考虑,当然也是金钱考虑了。因为有一些脚本小子啊,最喜欢拿那些没作验证的短信验证码去当短信轰炸机。当然,可能有人跳出来问,你前面不是已经加密了吗?都是通过密文传输的话,他们就利用不了了吧。
是的,数据通过加密传输的话,脚本小子确实提高了太多的门槛,但是如果是竞争对手呢。笔者以前的一个客户,一夜之间被人刷了近十万条短信,挺惨的。而且相关部门也作出规定,相关的企业必须要加入验证码这个功能,来作为短信发送的验证机制。
所以呢?开搞吧!
首先,我们在laravel中安装比较流形的验证码相关package,具体链接为 https://github.com/mewebstudio/captcha,相关过程就跳过不谈了。
其中,laravel中有一点还重要,必须要在App\Http\Kernel中的$middleware加入
\Illuminate\Session\Middleware\StartSession::class,
这步操作,极其重要,主要是获取相关session的。
然后我们注册相关内容,以及控制器,在控制器中加入一行代码,
return captcha();
这样就拿到了验证码图片,我们把注册的链接直接交由apicloud使用即可,下面放出apicloud相关文件内容,login.html改为
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>Hello APP</title> <link rel="stylesheet" type="text/css" href="../css/aui.css" /> <style> .login-third { margin-top: 3rem; } </style> </head> <body> <section class="aui-content aui-margin-t-15"> <ul class="aui-list aui-form-list"> <li class="aui-list-item"> <div class="aui-list-item-inner"> <div class="aui-list-item-label aui-border-r color-orange"> 手机号 <small class="aui-margin-l-5 aui-text-warning">+86</small> </div> <div class="aui-list-item-input aui-padded-l-10"> <input type="number" value="13329014137" placeholder="输入手机号" id="mobile"> </div> </div> </li> <li class="aui-list-item"> <div class="aui-list-item-inner"> <div class="aui-list-item-input" style="width: auto;"> <input type="number" placeholder="输入短信验证码" id="code"> </div> <div class="aui-list-item-label aui-margin-r-15" style="width: 6rem;"> <div id="verify_code" class="aui-btn aui-btn-info" style="width: 6rem;">获取验证码</div> </div> </div> </li> <li class="aui-list-item"> <div class="aui-list-item-inner"> <div class="aui-list-item-input" style="width: auto;"> <input type="text" placeholder="输入图形验证码" id="captcha_code"> </div> <div class="aui-list-item-label aui-margin-r-15" style="width: 6rem;"> <img id="captcha" src="" /> </div> </div> </li> </ul> </section> <section class="aui-content-padded"> <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm" tapmode>登录</div> </section> <section class="aui-content-padded login-third"> <p class="aui-font-size-12 aui-text-center aui-margin-b-15">第三方账号登录</p> <div class="aui-grid" style="background: none;"> <div class="aui-row"> <div class="aui-col-xs-4"> <i class="aui-iconfont aui-icon-qq"></i> </div> <div class="aui-col-xs-4"> <i class="aui-iconfont aui-icon-wechat"></i> </div> <div class="aui-col-xs-4"> <i class="aui-iconfont aui-icon-weibo"></i> </div> </div> </div> </section> </body> <script type="text/javascript" src="../script/api.js"></script> <script type="text/javascript" src="../script/common/config.js"></script> <script type="text/javascript" src="../script/zepto.min.js"></script> <script type="text/javascript" src="../script/common/jsencrypt.min.js"></script> <script type="text/javascript" src="../script/login/login.js"></script> <script type="text/javascript" src="../script/common/rsa.js"></script> <script type="text/javascript" src="../script/login/refresh_captcha.js"></script> </html>
其中引入了refresh_captcha.js,具体内容为
$('#captcha').on('click',function(){ var captcha = $(this); var url = serverUrl+'/api/qiuhan/getCaptchaImg'; captcha.attr('src',url); }); $(function(){ $('#captcha').attr('src',serverUrl+'/api/qiuhan/getCaptchaImg'); })
好了,这样我们就给apicloud中加入了验证码,但是如何校验呢?我们在Capcha.php文件中加入相关代码,路径为vendor/mews/captcha/src/Captcha.php,也就是在其create方法中的$this->text = $this->generate();下面加入
session(['apicloud_captcha_code' => $this->text]);
这样我们就保存了相应的session,当apicloud提交过来参数的时候,我们只需要作出校验就完成了图形验证码的校验了,很简单吧?