给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提交过来参数的时候，我们只需要作出校验就完成了图形验证码的校验了，很简单吧？