根据工作上的要求，更改系统登录的验证码的形式，之前考虑滑动验证，最后决定采用点击字体验证的方式，采用的是代码小睿上传在码云的 clicaptcha 项目

环境

thinkphp 5

流程

1. 导入css js image font

下载源码后将css、js、image、font导入到thinkphp的public目录下对应的文件夹下。

js： clicaptcha.js、jquery-1.8.3.min.js。

css：captcha.css 、main.css

font: SourceHanSansCN-Normal.otf

image: 1.jpg、2.jpg、3.jpg、refresh.png

其中1.jpg、2.jpg、3.jpg是背景图

2.导入、修改clicaptcha.class.php

1. 将该文件存放在thinkPHP的extend目录中
2. 需要修改一下地方
   1. 注释第5行的session_start()，因为系统中已经开启了session.
   2. 修改第9行的图片路径 ，将“image/1.jpg”修改为“./public/image/1.jpg”，具体根据文件的相对路径来决定。
   3. 修改11行的字体路径，将“/public/fonts/SourceHanSansCN-Normal.otf” 改为“/public/fonts/SourceHanSansCN-Normal.otf”
   4. 将122的“msubstr”函数名改为"my_msubstr"，因为系统中之前已经存在这个函数了。这里会冲突，同时将139行的函数名，同步一下。

3.编写controller

clicaptcha.php 是整个项目的控制器这里你需要集成到系统的控制器中，这里我将整个clicaptcha.php 简化成一个方法，存放在admin 模块的Index控制器中。

public function clickver(){
        import('clicaptcha', EXTEND_PATH,'.class.php');
        $clicaptcha = new \clicaptcha();
        if($_POST['do'] == 'check'){
            echo $clicaptcha->check($_POST['info'], false) ? 1 : 0;
        }else{
            $clicaptcha->creat();
        }
    }

4.页面中调用。

1. 表单代码。

<form role="form" action="/admin/index/login.php" method="post" id="login_form">
    <input id="username" type="text" placeholder="用户名" name="username" class="user"
               onfocus="if(placeholder=='请输入用户名') {placeholder=''}"
               onblur="if (value=='') {placeholder='请输入用户名'}">
    <input id="password" type="password" placeholder="密码" name="password" class="pw"
               onfocus="if(placeholder=='请输入密码') {placeholder=''}"
               onblur="if (value=='') {placeholder='请输入密码'}">
    <button id="sub" class="lbutton" type="button">登录</button>
    <div class="warn" id="sx8"></div>
    <input type="hidden" id="clicaptcha-submit-info" name="clicaptcha-submit-info">
</form>

2. js代码。

$(function () {
    $('#sub').click(function () {
        $('#clicaptcha-submit-info').clicaptcha({
            src: '/admin/index/clickver',//根据自己的路径进行配置
            callback: function () {
                var con = $("#password").val();//加密密码
                var arr = con.split('d2FuZ2');
                if (arr.length > 1) {
                    // return true;
                } else {
                    var a = $.base64.encode($("#password").val()) + $.base64.encode("wangcwxinyang") + "ks";
                    $("#password").val(a);
                }
                $("#login_form").submit();
            }
        });
    });
});

需要注意的是这里面的id需要一一对应不然容易出现问题。同时对登陆做了验证的系统，需要将clickver添加到系统的验证规则之中，不然验证码无法加载。

结束语

非常感谢代码小睿提供的代码