JavaWeb中使用验证码登录的功能实现

在日常生活使用App或者浏览网页什么的，经常需要我们去进行登录验证身份，可选择的登录方式有很多，在此讲解一下使用手机验证码登录的大致逻辑和部分实现。

思路：

首先，我们必须使用到登录相关的界面（在此使用layui做一个简单的登录界面）

齐次，获取验证码(本文内的电话全使用一个随机的号码测试)

之后，我们需要进行相应的逻辑功能实现（有的在前端界面就可以实现，有点需要使用到后端程序）

最后，当验证码正确时，允许登录，并通过手机号码从数据库查询用户信息用于用户的其他界面的操作。

1.简单的前端界面

页面视图：

代码：

	
		
		
		
		
		
	
	

		

			

				
手机号登录
				

					

						

							
							
						
					
					
请输入手机号
					

						

							
							验证码
						
					
				
				

					

						登录
					
				
			
		

		
		
		

	

因为只是一个短信验证的功能，于是只做一个简单的登录模板。

在做出登录模板之后，我们需要对模板内容进行一些简单的处理，例如对手机号码进行一个简单的判断（可以使用正则表达式）

以下代码只在js部分进行增加内容样式，页面html部分未进行修改

视图：

代码：

现在我们就可以开始获取输入框中的电话号码进行短信验证了。

视图：

 

代码：

使用ajax将前端的电话号码传递到后端，后端获取内容。

UserServlet内容

package com.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.service.UserService;
import com.util.JsonTool;
import com.util.ResultModel;

@WebServlet("/UserServlet/*")
//此处继承的是自己封装的封装类，使得可以在一个servlet中实现多种“行为”
public class UserServlet extends BaseServlet {
	private static final long serialVersionUID = 1L;
	UserService userService=new UserService();
	
	
	//  UserServlet/sendMsg.do
	protected void sendMsg(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置编码格式
		request.setCharacterEncoding("utf-8");
		//获取数据
		String userPhone=request.getParameter("userPhone");
		//检查数据
		System.out.println("检查：userPhone="+userPhone);
		//layui中渲染模板的特定格式，虽然此处没用到，不是必须，但是暂时还是使用这个封装类
		ResultModel resultModel=userService.sendMsgToPhone(userPhone);
		//将结果返回给ajax的回调函数
		//JsonTool也是封装工具类（用途是将数据转化为json格式，并且将数据传递到前端）
		JsonTool.sendJsonStr(response, JsonTool.objectToJson(resultModel));
	}


}

Service内容

package com.service;

import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.NameValuePair;
import org.apache.commons.httpclient.methods.PostMethod;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;

import com.util.ResultModel;

public class UserService {

	// 因为判断手机号是否是已经注册过的用户
	// 在前端ajax表单验证的时候判断
	// 此方法不需要连接数据库
	public ResultModel sendMsgToPhone(String userPhone) {
		try {
			ResultModel resultModel=new ResultModel();
			// 请求地址
			String reqPath = "https://106.ihuyi.com/webservice/sms.php?method=Submit";
			// 去连接这个支持发送短信平台网站
			HttpClient client = new HttpClient();
			PostMethod method = new PostMethod(reqPath);

			client.getParams().setContentCharset("GBK");
			method.setRequestHeader("ContentType", "application/x-www-form-urlencoded;charset=GBK");

			int mobile_code = (int) ((Math.random() * 9 + 1) * 100000);

			String content = new String("您的验证码是：" + mobile_code + "。请不要把验证码泄露给其他人。");
			System.out.println(content);

			NameValuePair[] data = { // 提交短信
					new NameValuePair("account", "******"), // 查看用户名 登录用户中心->验证码通知短信>产品总览->API接口信息->APIID
					new NameValuePair("password", "**********"), // 查看密码 登录用户中心->验证码通知短信>产品总览->API接口信息->APIKEY
					// new NameValuePair("password", util.StringUtil.MD5Encode("密码")),
					new NameValuePair("mobile", userPhone), new NameValuePair("content", content), };
			method.setRequestBody(data);
			client.executeMethod(method);

			String SubmitResult = method.getResponseBodyAsString();

			// System.out.println(SubmitResult);

			Document doc = DocumentHelper.parseText(SubmitResult);
			Element root = doc.getRootElement();

			String code = root.elementText("code");
			String msg = root.elementText("msg");
			String smsid = root.elementText("smsid");

			System.out.println(code);
			System.out.println(msg);
			System.out.println(smsid);

			if ("2".equals(code)) {
				System.out.println("短信提交成功");
				resultModel.setCode(2);
				System.out.println("短信发送成功，请查看手机");
				resultModel.setData(mobile_code);//接受到的验证码
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

}

Service层中使用到了第三方(互亿无线)的内容(当然要添加相应的依赖)，只需会复制粘贴以及使用即可。需要注意的地方是上面打星号的内容，那个地方是需要修改的。

视图：

代码：

然后我们为按钮定义一个函数（当未输入正确的验证码时，登录键禁用，当单击验证码按钮后，验证码键禁用）

然后为发送验证码的按钮设置倒计时功能，避免资源被持续占用

代码：

至此，验证码功能可以实现。