web项目实现短信验证的方式

controller

package com.zuxia.servlet;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

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 org.apache.commons.lang.RandomStringUtils;

import com.aliyun.dysmsapi20170525.Client;
import com.aliyun.dysmsapi20170525.models.SendSmsRequest;
import com.aliyun.dysmsapi20170525.models.SendSmsResponse;
import com.aliyun.teaopenapi.models.Config;
import com.google.gson.Gson;

@WebServlet("/SendSmsSevlet")
public class SendSmsSevlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.addHeader("Access-Control-Allow-Origin", "*");
		
		//获取电话号码
		String testPhone=request.getParameter("tel");
		//生成6位数的验证码
		String num = RandomStringUtils.randomNumeric(6);
		
//		String testUsername = "xxxxx"; //在短信宝注册的用户名
//        String testPassword = "xxxx"; //在短信宝注册的密码
//        String testContent = "【1859】您的验证码是"+num+",60秒以内有效。若非本人操作请忽略此消息。"; // 注意测试时，也请带上公司简称或网站签名，发送正规内容短信。千万不要发送无意义的内容：例如 测一下、您好。否则可能会收不到
// 
//        String httpUrl = "http://api.smsbao.com/sms";
// 
//        StringBuffer httpArg = new StringBuffer();
//        httpArg.append("u=").append(testUsername).append("&");
//        httpArg.append("p=").append(md5(testPassword)).append("&");
//        httpArg.append("m=").append(testPhone).append("&");
//        httpArg.append("c=").append(encodeUrlString(testContent, "UTF-8"));
// 
//        String result = request(httpUrl, httpArg.toString());
//		response.getWriter().print("{\"code\":\""+result+"\"}");
		
		
		
		Config config = new Config()
                // 您的AccessKey ID
                .setAccessKeyId("LTAI4FvrUo94tU2jqXdKrW6Mef")
                // 您的AccessKey Secret
                .setAccessKeySecret("YcblTwh98q3mPyfBfwFVA5kzpYNKieef");
        // 访问的域名
        config.endpoint = "dysmsapi.aliyuncs.com";
        try {
        	Client client = new Client(config);
        	
        	SendSmsRequest sendSmsRequest = new SendSmsRequest()
        			.setPhoneNumbers(testPhone)
        			.setSignName("电商测试")
        			.setTemplateCode("SMS_36410082")
        			.setTemplateParam("{\"code\":\""+num+"\"}");
        	// 复制代码运行请自行打印 API 的返回值
        	SendSmsResponse ssr = client.sendSms(sendSmsRequest);
        	
        	if("OK".equals(ssr.getBody().getCode())){
        		response.getWriter().print("{\"code\":\"1\"}");
        	}else{
        		response.getWriter().print("{\"code\":\"0\"}");
        	}
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
	
	
	
	public static String request(String httpUrl, String httpArg) {
        BufferedReader reader = null;
        String result = null;
        StringBuffer sbf = new StringBuffer();
        httpUrl = httpUrl + "?" + httpArg;
 
        try {
            URL url = new URL(httpUrl);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            InputStream is = connection.getInputStream();
            reader = new BufferedReader(new InputStreamReader(is, "UTF-8"));
            String strRead = reader.readLine();
            if (strRead != null) {
                sbf.append(strRead);
                while ((strRead = reader.readLine()) != null) {
                    sbf.append("\n");
                    sbf.append(strRead);
                }
            }
            reader.close();
            result = sbf.toString();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
 
    public static String md5(String plainText) {
        StringBuffer buf = null;
        try {
            MessageDigest md = MessageDigest.getInstance("MD5");
            md.update(plainText.getBytes());
            byte b[] = md.digest();
            int i;
            buf = new StringBuffer("");
            for (int offset = 0; offset < b.length; offset++) {
                i = b[offset];
                if (i < 0)
                    i += 256;
                if (i < 16)
                    buf.append("0");
                buf.append(Integer.toHexString(i));
            }
        } catch (NoSuchAlgorithmException e) {
            e.printStackTrace();
        }
        return buf.toString();
    }
 
    public static String encodeUrlString(String str, String charset) {
        String strret = null;
        if (str == null)
            return str;
        try {
            strret = java.net.URLEncoder.encode(str, charset);
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }
        return strret;
    }

}

前端页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/layui.css" />
		<style type="text/css">
			.talbewidth{width: 420px; margin: 180px auto; height:220px; background-color: white;}
		</style>
	</head>
	<body style="background-color: lightskyblue;">
		<div class="layui-tab layui-tab-brief talbewidth" lay-filter="docDemoTabBrief">
		  <ul class="layui-tab-title">
		    <li class="layui-this">用户登录</li>
		    <li>快捷登录</li>
		  </ul>
		  <div class="layui-tab-content" style="height: 100px;">
		    <div class="layui-tab-item layui-show">
		    	<form class="layui-form" action="" lay-filter="example">
				  <div class="layui-form-item">
				    <label class="layui-form-label">登录名称</label>
				    <div class="layui-input-block">
				      <input type="text" name="loginName" lay-verify="loginName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				    <label class="layui-form-label">登录密码</label>
				    <div class="layui-input-block">
				      <input type="password" name="loginPwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item" style="text-align: center;">
				      <button type="submit" class="layui-btn" lay-submit="" lay-filter="login1">登录</button>
				  </div>
				</form>
		    </div>
		    <div class="layui-tab-item">
		    	<form class="layui-form" action="" lay-filter="example">
				  <div class="layui-form-item">
				    <label class="layui-form-label">手机号码</label>
				    <div class="layui-input-block">
				      <input type="text" name="tel" lay-verify="tel" autocomplete="off" placeholder="请输入电话号码" class="layui-input">
				    </div>
				  </div>
				  <div class="layui-form-item">
				  	<div class="layui-col-md8">
					    <label class="layui-form-label">验证码</label>
					    <div class="layui-input-block">
					      <input type="text" name="code" placeholder="请输入验证码" autocomplete="off" class="layui-input">
					    </div>
				    </div>
				    <div class="layui-col-md4">
				    	<span class="layui-btn layui-btn-primary">&nbsp;&nbsp;&nbsp;&nbsp;获取验证码&nbsp;&nbsp;&nbsp;&nbsp;</span>
				    </div>
				  </div>
				  <div class="layui-form-item" style="text-align: center;">
				      <button type="submit" class="layui-btn" lay-submit="" lay-filter="login2">登录</button>
				  </div>
				</form>
		    </div>
		  </div>
		</div> 
		<script type="text/javascript" src="layui.js" ></script>
		<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
		<script type="text/javascript">
			layui.use(['layer','form'],function(){
				var layer=layui.layer,form=layui.form;
				//监听表单提交
				form.on('submit(login1)', function(data){
					//ajax请求
					$.post("http://localhost:8080/Web03/UserSevlet?op=login1",data.field,function(ret){
						if(ret=="yes"){
							window.location.href="user.html";
						}else{
							layer.msg("登录失败");
						}
					},"text");
				    return false;
				});
			});
		</script>
	</body>
</html>