TP Cptcha 验证码配置以及验证

最新推荐文章于 2022-05-01 18:57:59 发布

置顶山野藏爱深

最新推荐文章于 2022-05-01 18:57:59 发布

阅读量623

点赞数

分类专栏： TinkPHP

本文链接：https://blog.csdn.net/qq_40722355/article/details/100061472

版权

TinkPHP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如果我们下载了TP5.1完成版，我们的文件中会携带Cptcha验证码。
在这里插入图片描述
我们直接在我们的项目中use一下即可使用

use think\captcha\Captcha;

如果我们下载的是核心版本，我们可通过composer进行安装

composer require topthink/think-captcha 1.* -vvv

配置文件

'captcha'  => [        
	// 验证码字符集合3.        
    'codeSet'  => '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY',         
    // 验证码字体大小(px)5.   
    'fontSize' => 28,         
    // 是否画混淆曲线7.      
    'useCurve' => false,          
    // 验证码图片高度9.      
    'imageH'   => 50,        
    // 验证码图片宽度11.       
    'imageW'   => 200,         
    // 验证码位数13.       
    'length'   => 4,         
    // 验证成功后是否重置        15.      
    'reset'    => true
 ],

一般默认我们无需配置，直接在项目中使用以下代码：

/**
 * 验证码
 */
public function verify()
{
	$config = [
		// 验证码字体大小
        'fontSize'    =>    100,
        // 验证码位数
        'length'      =>    4,
        // 关闭验证码杂点
		'useNoise'    =>    false,
	];
	$captcha = new Captcha($config);
	return $captcha->entry();
}

在我们html页面中使用：

<img id="sms_codeimage" src="{:url('/index/user/verify')}" onclick="this.src=this.src+'?'" alt="刷新" />

在控制器中写入，代码如下

// 检测输入的验证码是否正确，$code为用户输入的验证码字符串，
public function check_verify(){
	$randCode = trim(input('post.randCode'));
	if( !captcha_check($randCode)){
		$result = array('status'=>-1,'msg'=>'验证失败!');
	}else{
		$result = array('status'=>0,'msg'=>'验证成功!');
	}
    return $result;
}

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link href="https://cdn.bootcdn.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
    <link rel="stylesheet" href="__PUBLIC__/css/style.css">
    <link rel="stylesheet" href="__PUBLIC__/css/iconfont.css">

    <link rel="stylesheet" href="__PUBLIC__/css/register.css">
</head>

<body>
    <!-- header -->
    <div class="header-wrap">
        <div class="nh-container">
            <div class="headerLayout">
                <!-- logo -->
                <div class="logo-con">
                    <img class="tmall-logo-img" data-original="__PUBLIC__/image/logo.png" style="display: block;" src="http://www.btcommerce.com/static/image/logo.png">
                </div>
            </div>
        </div>
    </div>
    <!-- header end -->
    <!-- main -->
    <div class="main-wrap">
        <div class="nh-container">
            <div class="mainLayout">
                <div class="form-L">
                    <h4>登录</h4>
                    <form id="login-form" action="" method="POST">
                        <div class="form-group">
                            <input type="hidden" name="referurl" id="referurl" value="http://www.btcommerce.com">
                            <p style="border-color: rgb(187, 187, 187); border-width: 1px;">
                                <b class="iconfont yonghu"></b>
                                <input type="text" id="username" name="username" placeholder="请输入您的用户名称">
                            </p>
                        </div>
                        <div class="form-group">
                            <p style="border-color: rgb(187, 187, 187); border-width: 1px;">
                                <b class="iconfont mima"></b>
                                <input type="password" id="password" name="password" placeholder="请输入密码">
                            </p>
                        </div>
                        <div class="form-group">
                            <p class=" yz" style="border-color: rgb(187, 187, 187); border-width: 1px;">
                                <b class="iconfont yanzhengma"></b>
                                <input type="text" id="randCode" name="randCode" placeholder="请输入验证码">
                            </p>
                            <label class="f-size12 c-999 f-fl f-pl10 yanz" style="height: 50px;
                            width: 151px;">
                                    <img id="sms_codeimage" src="{:url('/index/user/verify')}" onclick="this.src=this.src+'?'" alt="刷新" />
                                </label>
                        </div>
                        <!-- <div class="form-group">
                            <a href="index.php?act=login&amp;op=forget_password" class="forget_psw">忘记密码?</a>
                            <input type="checkbox" name="radio" class="check">
                            <i>两天内自动登录</i>
                        </div> -->
                        <div class="form-group">
                            <button id="login-btn" class="login-btn">登录</button>
                        </div>
                        <div class="form-group">
                            <h5>还没有账户？<a href="register/?act=login&amp;op=register">立即注册</a></h5>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- main end -->
    <!-- footer -->
    <div class="footer-wrap">
        <div class="nh-container">
            <div class="footerLayout">
                <div class="footerwrapper">
                    <p>
                        <a href="">首页</a> |
                        <a href="">招聘英才</a> |
                        <a href="">合作及洽谈</a> |
                        <a href="">联系我们</a> |
                        <a href="">关于诺慧</a>
                    </p>
                    Copyright © 2005-2018 版权所有. 客服电话：xxx-xxx-xxxx<br> 1801。
                    <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow"> 粤ICP备XXXXXXX号-1</a> </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
    <script src="http://www.btcommerce.com/static/js/layer/layer.js"></script>
    <script>
        $("#login-btn").click(function() {
            //检测用户名
            if ($("#username").val() == '' || $("#username").val() == null) {
                layer.msg('账号不能为空!');
                return false;
            }
            //检测密码
            if ($("#password").val() == '' || $("#password").val() == null) {
                layer.msg('密码不能为空!');
                return false;
            }

            //ajax异步提交到后台验证
            $.ajax({
                type: 'post',
                url: "{:url('index/user/check_verify')}",
                data: {
                    randCode: $('#randCode').val()
                },
                dataType: 'json',
                success: function(data) {
                    if (data.status == 0) {
                        $.ajax({
                            type: 'post',
                            url: "{:url('index/user/dologin')}",
                            data: {
                                username: $.trim($('#username').val()),
                                password: $.trim($('#password').val()),
                                referurl: $.trim($('#referurl').val())
                            },
                            dataType: 'json',
                            success: function(res) {
                                if (res.status == 1) {
                                    window.location.href = res.url; //跳转到原路径
                                } else {
                                    showErrorMsg(res.msg); //显示错误信息
                                }
                            },
                            error: function(XMLHttpRequest, textStatus, errorThrown) {
                                showErrorMsg('网络失败，请刷新页面后重试');
                            }
                        })
                    } else {
                        //刷新验证码
                        $(".reloadverify").click();
                        layer.msg(data.msg, {
                            time: 2000
                        });
                    }
                }
            })
            return false;
        })
    </script>

</body>

</html>

山野藏爱深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TP Cptcha 验证码配置以及验证

如果我们下载了TP5.1完成版，我们的文件中会携带Cptcha验证码。我们直接在我们的项目中use一下即可使用use think\captcha\Captcha;如果我们下载的是核心版本，我们可通过composer进行安装composer require topthink/think-captcha 1.* -vvv配置文件'captcha' => [ ...
复制链接

扫一扫