当前位置：网站首页>Integration and implementation of login click graphic verification code in personal blog system

Integration and implementation of login click graphic verification code in personal blog system

2022-07-28 19:42:00 【wyqgg123】

summary :

I have never realized the login verification code , Today, when I read the verification code online , I saw a PHP Of jQuery Chinese Click verification code plug-in , I will try to introduce the plug-in , I found the plug-in very easy to use , The following is the implementation process

1、 Download address

gitee:https://gitee.com/hooray/clicaptcha.git

2、 quote

    <link rel="stylesheet" href="/clicaptcha/css/captcha.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/js-cookie/2.2.1/js.cookie.min.js"></script>
    <script src="/clicaptcha/clicaptcha.js"></script>
	<!-- Graphic verification code -->
	<input type="hidden" id="clicaptcha-submit-info" name="clicaptcha-submit-info">
	
<script> $('#clicaptcha-submit-info').clicaptcha({
      src: '/clicaptcha/clicaptcha.php', success_tip: ' Verify success ！', error_tip: ' The correct area is not selected , Please try again ！', callback: function(){
      //... } }); </script>

3、 Integrate into the project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Login</title>

    <link rel="stylesheet" href="/css/layui/css/layui.css">
    <script src="/css/layui/layui.js"></script>

    <link rel="stylesheet" href="/clicaptcha/css/captcha.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

</head>
<body style="background-color:#5FB878">
    <div>
        <h1 style="color: #fafafa;text-align: center;line-height: 80px">wyq Blog system background login </h1>
    </div>
    <div style="width: 30%;height: 40%;position: absolute;left:35%;top:30%;background-color:#FAFAFA">
        <div style="width: 100%;height: 20%;background-color: #009688;">
                <h1 style="color: #fafafa;text-align: center;line-height: 80px"> Administrator login </h1>
        </div>
        <div style="padding: 40px;">
            <form class="layui-form" action="/admin/doLogin" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label"> user name </label>
                    <div class="layui-input-block">
                        <input type="text" id="username" name="username" placeholder=" Please enter a user name " class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"> password </label>
                    <div class="layui-input-block">
                        <input type="password" id="password" name="password" placeholder=" Please input a password " class="layui-input">
                    </div>
                </div>
				<!-- Image verification code hidden field -->
                <input type="hidden" id="clicaptcha-submit-info" name="clicaptcha-submit-info">

                <button id="submit" type="button" class="layui-btn" style="margin-left: 80px;margin-top: 20px"> Sign in </button>
                <a type="button" href="/login/regist" style="margin-left: 250px;margin-top: 20px" class="layui-btn"> register </a>
            </form>
            <a href="/login/forget" style="margin-top: 20px;"> Forget the password ？</a>
        </div>
    </div>
</body>
</html>

<script src="https://cdn.bootcss.com/js-cookie/2.2.1/js.cookie.min.js"></script>
<script src="/clicaptcha/clicaptcha.js"></script>
    <script> // When you click login  $("#submit").click(function () {
      // Verify the character you clicked  $('#clicaptcha-submit-info').clicaptcha({
      src: '/clicaptcha/clicaptcha.php', success_tip: ' Verify success ！', error_tip: ' The correct area is not selected , Please try again ！', // Successfully called the function  callback: function(res){
      var data = {
      'username': $('#username').val(), 'password': $('#password').val(), 'clicaptcha-submit-info':$('#clicaptcha-submit-info').val() }; $.ajax({
      'url': '/login/doLogin', 'type':'post', 'dataType':'json', 'data':data, 'success':function (msg) {
      if (msg.code == 200){
      layui.use('layer', function() {
      var layer = layui.layer; layer.msg(' Login successful '); }) setTimeout(function(){
      window.location.replace("/user/index") },800); }else if(msg.code == 400){
      layui.use('layer', function() {
      var layer = layui.layer; layer.msg(msg.msg); }) } } } ) } }); }) </script>