微信小程序-验证码

布满荆棘的人生 2022-05-15 07:58 288阅读 0赞

## 1.服务器 ##

package com.ruoyi.project.system.user.controller;
    
    import java.awt.image.BufferedImage;
    import java.io.ByteArrayOutputStream;
    import java.io.IOException;
    import java.util.Base64;
    
    import javax.annotation.Resource;
    import javax.imageio.ImageIO;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.servlet.ModelAndView;
    
    import com.google.code.kaptcha.Constants;
    import com.google.code.kaptcha.Producer;
    import com.ruoyi.common.utils.StringUtils;
    import com.ruoyi.framework.web.controller.BaseController;
    
    /** * 图片验证码（支持算术形式） * * @author ruoyi */
    @Controller
    @RequestMapping("/captcha")
    public class CaptchaController extends BaseController {
    
        @Resource(name = "captchaProducer")
        private Producer captchaProducer;
    
        @Resource(name = "captchaProducerMath")
        private Producer captchaProducerMath;
    
        /** * 验证码生成 */
        @GetMapping(value = "/captchaImage")
        public ModelAndView getKaptchaImage(HttpServletRequest request, HttpServletResponse response) {
            ServletOutputStream out = null;
            try {
                HttpSession session = request.getSession();
                response.setDateHeader("Expires", 0);
                response.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
                response.addHeader("Cache-Control", "post-check=0, pre-check=0");
                response.setHeader("Pragma", "no-cache");
                response.setContentType("image/jpeg");
    
                String type = request.getParameter("type");
                String capStr = null;
                String code = null;
                BufferedImage bi = null;
                if ("math".equals(type)) {
                    String capText = captchaProducerMath.createText();
                    capStr = capText.substring(0, capText.lastIndexOf("@"));
                    code = capText.substring(capText.lastIndexOf("@") + 1);
                    bi = captchaProducerMath.createImage(capStr);
                } else if ("char".equals(type)) {
                    capStr = code = captchaProducer.createText();
                    bi = captchaProducer.createImage(capStr);
                }
                session.setAttribute(Constants.KAPTCHA_SESSION_KEY, code);
                out = response.getOutputStream();
                //1.直接返回图片二进制
                ImageIO.write(bi, "jpg", out);
                //2.返回图片二进制经过base64加密后的字符串
                 ByteArrayOutputStream baos = new ByteArrayOutputStream();//io流
                 ImageIO.write(bi, "jpg", baos);//写入流中
                 byte[] bytes = baos.toByteArray();//转换成字节
                 String png_base64 =
                 Base64.getEncoder().encodeToString(bytes).trim();//转换成base64串
                 png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");//删除 \r\n
                 out.write(png_base64.getBytes());
    
                out.flush();
    
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if (out != null) {
                        out.close();
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
            return null;
        }
    }

## 2.客户端 ##

第一种方法：直接src，调用url反馈图片

wxml文件

第二种方法：通过data:image/jpeg;base64, 加密后的图片  
这种方法就是可以减少对服务器的请求，当需要得到服务器在获取验证码时返回的信息是用；比如：  
用wx.request请求得到验证码时服务器反馈的header信息

wxml文件

js文件

Page({
        data:{
        imageUrl:path+'/captchaImage',
        imageBase64Data:''
        },
    
        onload: function(){ 
            this.getKaptchaImage()
        }
        //点击时，刷新
        getKaptchaImage:function(e){ 
            const that = this
            wx.request({
                url:imageUrl,
                success:function(res){ 
                    that.setData({
                        imageBase64Data = res.data
                    })
                }
    })