Java web實作郵箱驗證碼功能

第一步、開啟發件郵箱權限（以QQ郵箱為例）
第二步、生成驗證碼
第三步、發送郵件
第四步、web前端
第五步、servlet程式

先放一張程式的預覽圖

Java web發送郵箱驗證碼，并驗證正确性第一步、開啟發件郵箱權限（以QQ郵箱為例）第二步、生成驗證碼第三步、發送郵件第四步、web前端第五步、servlet程式

工程下載下傳連結

連結：https://pan.baidu.com/s/1Lrm8d6mBemKIWKd0ll0E9g

提取碼：vrwh

第一步、開啟發件郵箱權限（以QQ郵箱為例）

設定->賬戶->開啟POP3/SMTP服務

開啟後會擷取一個授權碼，記住這個授權碼，這個相當于是一個密碼。

第二步、生成驗證碼

import java.util.Random;

public class VCodeUtill {
	/*
	 * 生成n位随機驗證碼，包括數字和大小寫字母
	 * @param 驗證碼長度
	 * @return n位驗證碼
	 */
	public static String verifyCode(int n) {
		StringBuilder strB = new StringBuilder();
		Random rand = new Random();
		for(int i = 0; i < n; i++) {
			int r1 = rand.nextInt(3);
			int r2 = 0;
			switch (r1) {  // r2為ascii碼值
			case 0: // 數字
				r2 = rand.nextInt(10) + 48;  // 數字：48-57的随機數
				break;
			case 1:
				r2 = rand.nextInt(26) + 65;  // 大寫字母 
				break;
			case 2:
				r2 = rand.nextInt(26) + 97;  // 小寫字母 
				break;
			default:
				break;
			}
			strB.append((char)r2);
		}
		return strB.toString();
	}
}

第三步、發送郵件

這一步需要java.mail.jar下載下傳連結

import java.util.Date;
import java.util.Properties;

import javax.mail.MessagingException;
import javax.mail.Session;
import javax.mail.Transport;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;

public class EmailUtil {
	private static String fromEmail = "[email protected]";  // 發件人賬号
	private static String fromEmailPw = "bgyqinrqpbdebdif";  // 發件人密碼
	private static String myEmailSMTPHost = "smtp.qq.com";  // 發件郵箱伺服器
	private static Properties props;  // 用于參數配置
	private static Session session;  // 用于建立會話對象
	private String vCode;
	public static EmailUtil instance = new EmailUtil();
	
	/*
	 * 擷取驗證碼
	 * @return 驗證碼字元串
	 */
	public String getVCode() {
		return vCode;
	}
	
	/*
	 * 構造函數，配置屬性
	 */
	private EmailUtil() {
		props = new Properties();
		props.setProperty("mail.transport.protocol", "smtp");  // 使用的協定（JavaMail規範要求）
        props.setProperty("mail.smtp.host", myEmailSMTPHost);  // 發件人的郵箱的 SMTP 伺服器位址
        props.setProperty("mail.smtp.auth", "true");  // 需要請求認證
        session = Session.getInstance(props);
        // session.setDebug(true);  // 設定為debug模式, 可以檢視詳細的發送 log 
	}
	
	/*
	 * 建構郵件内容
	 * @param 收件人
	 * @return 發送郵件内容
	 */
	public MimeMessage createMailContent(String toEmail) throws Exception, MessagingException {
		MimeMessage message = new MimeMessage(session);
		// 發件人
		message.setFrom(new InternetAddress(fromEmail, "驗證碼發送系統", "UTF-8"));
		// 收件人
		message.setRecipient(MimeMessage.RecipientType.TO, new InternetAddress(toEmail));
		// 郵件主題
		message.setSubject("驗證碼", "UTF-8");
		// 郵件正文 
		vCode = VCodeUtill.verifyCode(6);
		message.setContent("您好，您的驗證碼是："+vCode+"。", "text/html;charset=UTF-8");
		// 設定發件時間
		message.setSentDate(new Date());
		// 儲存設定
		message.saveChanges();
		return message;
	}
	/*
	 * 發送郵件
	 * @param 收件人
	 */
	public void sendEmail(String toEmail) throws Exception {
		Transport transport = session.getTransport();
		transport.connect(fromEmail, fromEmailPw);
		MimeMessage message = createMailContent(toEmail);  // 郵件内容
		transport.sendMessage(message, message.getAllRecipients());
		System.out.println("驗證碼發送成功！");
		// 關閉連接配接
		transport.close();
	}
}

第四步、web前端

準備：jquery-1.11.3.js下載下傳連結

簡單的前端界面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Java web郵箱驗證碼</title>
  </head>
  
  <body>
	<form id="form0" name="form0" AUTOCOMPLETE="OFF">
		<table>              
            <tr height="35px">
                <td >收件郵箱：</td>
                <td>
                    <input type="text" name="email" id="email" placeholder="輸入郵箱" />
                </td>
                <td>
                	<button id="btnGetVcode" style="cursor:pointer">擷取驗證碼</button>
                </td>
            </tr>
            <tr height="35px">
                <td >驗證碼：</td>
                <td>
                    <input type="text" name="vcode" id="vcode" placeholder="輸入驗證碼"/>
                </td>
                <td id="message"></td>
            </tr>
        </table>
        <a target="_self">
		<button type="button" id="btnVerify" style="cursor:pointer">驗證</button></a>
	</form>
	
	<!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="js/jsEmail.js"></script>
  </body>
</html>

對應的javascript程式：

var time0 = 60;
var time = time0;  
var t;  // 用于驗證按鈕的60s計時

$(document).ready(function() {

	// 擷取驗證碼按鈕
	$("#btnGetVcode").click(function() {
		var btnGet = document.getElementById("btnGetVcode");
		btnGet.disabled = true;  // 為了防止多次點選
		$.ajax({
			url: 'EmailServlet?method=getVCode',
			type: 'post',
			data: {email: $("input[name='email']").val()},
			dataType: 'text',
			success: function(msg) {
				if(msg == -1){
					window.alert("請輸入正确的郵箱！");
					btnGet.disabled = false;
				}
				else{
					useChangeBTN();  // 控制下一次重新擷取驗證碼
				}
			},
			error:function(msg){
			}
		});
	});
	
	// 驗證按鈕
	$("#btnVerify").click(function() {
		var message = document.getElementById("message");  // 顯示提示資訊
		$.ajax({
			url: 'EmailServlet?method=verify',
			type: 'post',
			data: {vcode: $("input[name='vcode']").val()},
			dataType: 'text',
			success: function(msg) {
				if(msg == 1){
					message.innerHTML = "驗證碼正确！";
					$("#message").css("color","green");
				}
				else{
					message.innerHTML = "驗證碼錯誤！";
					$("#message").css("color","red");
				}
			},
			error:function(msg){
			}
		});
	});
});

//修改按鈕，控制驗證碼重新擷取
function changeBTN(){
	if(time > 0){
		$("#btnGetVcode").text("("+time+"s)"+"重新擷取");
		time = time - 1;
	}
	else{
		var btnGet = document.getElementById("btnGetVcode");
		btnGet.disabled = false;
		$("#btnGetVcode").text("擷取驗證碼");
		clearInterval(t);
		time = time0;
	}
}
function useChangeBTN(){
	$("#btnGetVcode").text("("+time+"s)"+"重新擷取");
	time = time - 1;
	t = setInterval("changeBTN()", 1000);  // 1s調用一次
}

第五步、servlet程式

import java.io.IOException;
import java.io.PrintWriter;
import java.util.regex.Pattern;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import util.EmailUtil;

@SuppressWarnings("serial")
@WebServlet(urlPatterns={"/EmailServlet"})
public class EmailServlet extends HttpServlet {
	private String email;  // 擷取的收件人郵箱
	private String vCode;  // 背景産生的驗證碼
	private String vCodeReceive;  // 接收到前端輸入的驗證碼
	private String method;  // 要接收的方法
	private PrintWriter out;  // 輸出流
	private EmailUtil emailUtil = EmailUtil.instance;
	public EmailServlet() {
		// TODO Auto-generated constructor stub
		System.out.println("初始化");
		
	}
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doPost(req, resp);
	}

	/*
	 * 在此實作servlet
	 */
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		// TODO Auto-generated method stub
		resp.setContentType("text/html");
		//語言編碼
		req.setCharacterEncoding("utf-8");
		resp.setCharacterEncoding("utf-8");
		
		out = resp.getWriter();
		// 擷取來自前端的參數
		email = req.getParameter("email");
		vCodeReceive = req.getParameter("vcode");
		method = req.getParameter("method");

		switch (method) {
		case "getVCode":
			mGetVCode();
			break;
		case "verify":
			mVerify();
			break;
		default:
			break;
		}
		
		out.flush();
		out.close();
	}

	/*
	 * 産生驗證碼，并發送郵件
	 */
	private void mGetVCode() {
		// TODO Auto-generated method stub
		if(!isEmail(email)) {  // 郵箱不正确
			out.print(-1);
			return;
		}
		try {
			emailUtil.sendEmail(email);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		vCode = emailUtil.getVCode();
		System.out.println("驗證碼為：" + vCode);
		out.print(1);
	}
	
	/*
	 * 郵箱正确性檢測
	 * @param 郵箱字元串
	 * @return true/false
	 */
	private boolean isEmail(String email) {
		if(email.length() == 0 || email == null) {
			return false;
		}
		// 正規表達式驗證郵箱
		Pattern pattern = Pattern.compile("^[a-zA-Z0-9_-][email protected][a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
		return pattern.matcher(email).matches();
	}
	
	/*
	 * 驗證碼驗證
	 */
	private void mVerify() {
		// TODO Auto-generated method stub
		if(vCode.equals(vCodeReceive)) {
			out.print(1);
		}
		else {
			out.print(-1);
		}
	}
	@Override
	public void destroy() {
		// TODO Auto-generated method stub
		super.destroy();
	}

	@Override
	public void init() throws ServletException {
		// TODO Auto-generated method stub
		super.init();
	}
}

看一波效果

Java web發送郵箱驗證碼，并驗證正确性第一步、開啟發件郵箱權限（以QQ郵箱為例）第二步、生成驗證碼第三步、發送郵件第四步、web前端第五步、servlet程式

Java web實作郵箱驗證碼功能

第一步、開啟發件郵箱權限（以QQ郵箱為例）

第二步、生成驗證碼

第三步、發送郵件

第四步、web前端

第五步、servlet程式

繼續閱讀

CAS增加驗證碼驗證功能

LoadRunner測試執行結果龐大的解決方案

LR中檢查點函數簡析

Vue+SpringMVC簡單互動實踐入門前言Vue前端編寫背景基于SpringMVC搭建過程

web前端布局練手項目

HTML5Canvas 酷炫效果

趕工心得（一）

微信開通狀态檢測工具（免驗證碼版）運作原理

web OS —— goowy.com

緻意—程式員

十大酷炫屌的圖像懸停特效

前後端分離之跨域問題

何為全棧工程師？你是否應該成為一名全棧工程師？

【Tomcat】Tomcat參數調優:連接配接數和并發數

配置網頁内容通路

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段