Spring boot 注册(邮箱验证码)功能更新

Spring boot 注册(邮箱验证码)功能更新

注册HTML页面展示

前端的输入框校验之类的就没有做了，主要做的是邮箱验证功能大致是这样做的，邮箱处进行异步提交到Controller然后给用户发送验证码到用户邮箱，用户获取验证码后填入注册页面验证码框。输入注册帐号、密码后点击注册（form表单提交）走正常增加用户到数据库流程。下面分步代码演示：

1、自定义生成验证码工具类（顺便把生成验证码图片一起写了）：

public class CreateVerifiCodeImage {

    private static int WIDTH = 90;
    private static int HEIGHT = 35;
    private static int FONT_SIZE = 20; //字符大小
    private static char[] verifiCode; //验证码
    private static BufferedImage verifiCodeImage; //验证码图片

    /**
     * @description: 获取验证码图片
     * @param: no
     * @date: 2019-06-09 5:46 PM
     * @return: java.awt.image.BufferedImage
     */
    public static BufferedImage getVerifiCodeImage() {
        verifiCodeImage = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_BGR);// create a image
        Graphics graphics = verifiCodeImage.getGraphics();

        verifiCode = generateCheckCode();
        drawBackground(graphics);
        drawRands(graphics, verifiCode);

        graphics.dispose();

        return verifiCodeImage;
    }

    /**
     * @description: 获取验证码
     * @param: no
     * @date: 2019-06-09 5:47 PM
     * @return: char[]
     */
    public static char[] getVerifiCode() {
        return verifiCode;
    }

    /**
     * @description: 随机生成验证码
     * @param: no
     * @date: 2019-06-09 5:47 PM
     * @return: char[]
     */
    private static char[] generateCheckCode() {
        String chars = "0123456789abcdefghijklmnopqrstuvwxyz" + "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        char[] rands = new char[4];
        for (int i = 0; i < 4; i++) {
            int rand = (int) (Math.random() * (10 + 26 * 2));
            rands[i] = chars.charAt(rand);
        }
        return rands;
    }

    /**
     * @description: 绘制验证码
     * @param: g
     * @param: rands
     * @date: 2019-06-09 5:47 PM
     * @return: void
     */
    private static void drawRands(Graphics g, char[] rands) {
        g.setFont(new Font("Console", Font.BOLD, FONT_SIZE));

        for (int i = 0; i < rands.length; i++) {

            g.setColor(getRandomColor());
            g.drawString("" + rands[i], i * FONT_SIZE + 10, 25);
        }
    }

    /**
     * @description: 绘制验证码图片背景
     * @param: g
     * @date: 2019-06-09 5:48 PM
     * @return: void
     */
    private static void drawBackground(Graphics g) {

        g.setColor(Color.white);
        g.fillRect(0, 0, WIDTH, HEIGHT);

        // 绘制验证码干扰点
        for (int i = 0; i < 200; i++) {
            int x = (int) (Math.random() * WIDTH);
            int y = (int) (Math.random() * HEIGHT);
            g.setColor(getRandomColor());
            g.drawOval(x, y, 1, 1);

        }
    }


    /**
     * @description: 获取随机颜色
     * @param: no
     * @date: 2019-06-09 5:48 PM
     * @return: java.awt.Color
     */
    private static Color getRandomColor() {
        Random ran = new Random();
        return new Color(ran.nextInt(220), ran.nextInt(220), ran.nextInt(220));
    }
}

2、引入坐标，配置email：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-mail</artifactId>
</dependency>

配置email:

spring.mail.username=1003451103@qq.com
spring.mail.password=lmnxgaonpcrtbfaf //qq邮箱获取授权码（不知道可以百度怎么获取）
spring.mail.host=smtp.qq.com //服务器主机

3、前端异步提交代码：

<tr>

    <td class="td_right">
        <input type="text" id="email" name="email" placeholder="请输入Email">
    </td>
    <td>
        <input id="getcode" style="width: 100px;height: 30px;border: 2px;background-color: yellow"
        type="button";  value="发送验证码"
        >
    </td>
</tr>
---------------------------------------------------------------------------------------------------
<script>
    $('#getcode').click(function(){

        //发送验证码
        var email = $("#email").val();
        if(email==""){
            alert("请输入邮箱");
        }
        //ajax实现后台邮箱的发送
        $.ajax({
            //url路径
            url: "/email/sentemail",
            //data请求数据
            data: {"email": email},
            //dataType json
            type: "get"
        });
        alert("验证码已发送，请及时查看你的邮箱"+email);


    });
</script>

4、发送邮箱Controller:

@Controller
@RequestMapping("/email")
public class EmailController {
    @Autowired
    JavaMailSenderImpl sender;


    @Autowired
    loginservice service;

    @RequestMapping("/sentemail")
    public void sendemail(String email, HttpServletRequest request){

       
        BufferedImage verifiCodeImage = CreateVerifiCodeImage.getVerifiCodeImage();
        //获取验证码
        String verifiCode = String.valueOf(CreateVerifiCodeImage.getVerifiCode());

        //验证码存入session
        request.getSession().setAttribute("verifiCode",verifiCode);
        SimpleMailMessage message = new SimpleMailMessage();
      //邮箱主题
        message.setSubject("验证码:");
        //邮箱内容
        message.setText("验证码是"+verifiCode);
      //发给谁（email是前端异步提交过来的数据）
        message.setTo(email);
        //谁发的
        message.setFrom("1003451103@qq.com");
        //发送邮件
        sender.send(message);


    }

5、用户在填好注册帐号、密码、邮箱发送的验证码后进行正常的数据库添加操作：

注册表单提交：

<form id="registerForm" action="/email/adduser" method="post" >

Controller：

@Controller
@RequestMapping("/email")
public class EmailController {
    @Autowired
    JavaMailSenderImpl sender;


    @Autowired
    loginservice service;
    @RequestMapping("/adduser")
    public  String adduser(User user,HttpServletRequest request){

         //在session中取出之前存的生成好的验证码
        String verifiCode = (String) request.getSession().getAttribute("verifiCode");
        //判断用户填写验证码是否与发送的相同（相同返回登录页面提示注册成功）
        if (verifiCode.equals(user.getYzm())) {
            service.adduser(user);
            request.setAttribute("message","注册成功");
            return "login";
        }
       else {

          //验证码验证失败提示验证码错误 返回注册页面
           request.setAttribute("message","验证码错误");

            return "register";
        }


    }
}

service、dao的操作就不写了，就是正常的crud操作。

已有帐号跳转到登录页面

 <div class="rg_form_right">
        <p>
            已有账号？
            <a href="/user/login">立即登录</a>
        </p>
    </div>
</div>

Controller:

@Controller
@RequestMapping("/user")
public class LoginController {


    @Autowired
    loginservice  service;

    @RequestMapping("/login")
    public String login(){

        return "login";
    }

后面持续更新自己的新功能！