微信小程序中PHP开发的滑动验证码实现方式

微信小程序中PHP开发的滑动验证码实现方式

滑动验证码是一种常见的验证方法，用来判断用户是否为人类，而非机器人。下面介绍一种微信小程序中使用PHP开发的滑动验证码实现方式。

第一段：

//生成滑动验证码图片
function create_captcha(){
    //生成验证码字符串
    $code = generate_code();
    //保存验证码到session
    $_SESSION['verify_code'] = $code;
    //生成验证码背景图
    $bg_file = '/captcha/verify_bg.jpg';
    $bg_img = imagecreatefromjpeg($bg_file);
    $bg_size = getimagesize($bg_file);
    $bg_w = $bg_size[0];
    $bg_h = $bg_size[1];
    //生成验证码字符图
    $font_file = '/captcha/verify_font.ttf';
    $font_size = 25;
    $font_angle = rand(-10, 10);
    $font_x = rand(0, 5);
    $font_y = 28;
    $font_color = imagecolorallocate($bg_img, 255, 255, 255);
    imagettftext($bg_img, $font_size, $font_angle, $font_x, $font_y, $font_color, $font_file, $code);
    //生成滑块图
    $block_file = '/captcha/verify_block.png';
    $block_img = imagecreatefrompng($block_file);
    $block_size = getimagesize($block_file);
    $block_w = $block_size[0];
    $block_h = $block_size[1];
    //创建新图片，将验证码背景图、验证码字符图、滑块图合并到一张图片中
    $captcha_w = $bg_w + $block_w;
    $captcha_h = $bg_h;
    $captcha_img = imagecreatetruecolor($captcha_w, $captcha_h);
    imagecopy($captcha_img, $bg_img, 0, 0, 0, 0, $bg_w, $bg_h);
    imagecopy($captcha_img, $block_img, $bg_w-10, 0, 0, 0, $block_w, $block_h);
    //输出图片
    header('Content-type: image/jpeg');
    imagejpeg($captcha_img);
}

第一段的代码主要是用PHP GD库生成包含验证码字符和滑块图的验证码图片。首先通过generate_code函数生成一个随机字符串，并保存到session中。然后分别生成背景图$bg_img、字符图$font_color和滑块图$block_img。最后将三个图像合并，得到完整的验证码图片。

第二段：

//前端请求验证码图片
wx.request({
      url: 'http://example.com/create_captcha.php', //后端生成验证码图片的url
      success: function(res) {
        that.setData({
          verifyImageUrl: "data:image/png;base64,"+wx.arrayBufferToBase64(res.data),
          verifyCodeText: ""
        })
      },
      fail: function (res) {
        wx.showToast({
          title: '请求失败',
          icon: 'none',
          duration: 2000
        })
      }
    });

第二段的代码是前端发起请求获取验证码图片。在微信小程序中可以使用wx.request函数发起HTTP请求，并接收后端返回的验证码图片。使用wx.arrayBufferToBase64方法将接收到的数据转换成base64格式，然后将其赋值给页面上的verifyImageUrl属性，以显示验证码图片。

第三段：

//监听滑动解锁操作
verifyTouchMove: function (e) {
    var that = this;
    var offsetX = e.touches[0].pageX - e.currentTarget.offsetLeft - 40;
    if(offsetX<=0){
      offsetX = 0;
    }
    if(offsetX>=280){
      offsetX = 280;
    }
    that.setData({
      verifyCodeOffset: offsetX
    })
  },
  verifyTouchEnd: function (e) {
    var that = this;
    if(that.data.verifyCodeOffset >= 280){
      that.setData({
        verifyCodeText: that.data.verifyCodeInput
      })
      //前端将滑块横坐标位置传递给后端验证
      wx.request({
        url: 'http://example.com/verify_captcha.php',
        method: 'POST',
        data: {
          'offset': that.data.verifyCodeOffset
        },
        success: function (res) {
          if (res.data == 'success') {
            wx.showToast({
              title: '验证成功',
              icon: 'success',
              duration: 2000
            })
          } else {
            that.setData({
              verifyCodeOffset: 0
            })
            wx.showToast({
              title: '验证失败',
              icon: 'none',
              duration: 2000
            })
          }
        },
        fail: function (res) {
          wx.showToast({
            title: '请求失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    }else{
      that.setData({
        verifyCodeOffset: 0
      })
    }
  }

第三段的代码主要是前端处理用户滑动解锁操作，并将滑块横坐标位置传递给后端验证。使用verifyTouchMove和verifyTouchEnd两个函数来监听用户的触摸事件，拿到滑动的横坐标位置，通过改变verifyCodeOffset属性，实现滑块的滑动。若滑块的横坐标位置达到了阈值280px，则将横坐标位置传递给后端verify_captcha.php，通过POST请求将接收到的滑块横坐标位置传递给后端进行验证。后端通过判断滑块横坐标位置是否在合法范围内（即验证码字符和滑块图的重叠区域），从而判断用户是否通过验证。

第四段：

综上所述，通过PHP GD库生成带有滑块的验证码图片，并使用微信小程序前端发送HTTP请求来接收并显示验证码图片，用户通过滑动滑块来完成验证。如果滑块位置在合法范围内，前端将滑块横坐标位置传递给后端验证，从而验证用户是否为人类。这种验证码实现方式具有难度较大、安全性较高的特点，可以有效抵御机器人攻击。