获取短信验证码

最新推荐文章于 2022-02-15 15:00:53 发布

surpass0728

最新推荐文章于 2022-02-15 15:00:53 发布

阅读量8.3k

点赞数

CC 4.0 BY-SA版权

文章标签：验证码

本文链接：https://blog.youkuaiyun.com/surpass0728/article/details/78882514

用户登录时通常使用手机号配合短信验证码。前端点击获取验证码按钮启动60秒倒计时，后台生成6位随机验证码存入session，通过第三方接口发送。匹配时从session取出验证码与用户输入对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般在用户登陆时，都会选择手机号登录，这就难免要获取手机验证码，
在前端页面设置获取验证码button 点击后实现倒计时60s，并发送验证码

设计结构：后台随机6位验证码
将验证码存入session中
调用第三方接口实现发送验证码
在后台取出session并和输入的验证码进行匹配

需要的jar包有：commons-codec-1.4.jar
commons-httpclient–3.1.jar
commons-loging-1.1.jar

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="com.yzm.SMSUtil" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
button {
    background: #F0F0F0 repeat-x;
    padding-top: 3px; 
    border-top : 1px solid #708090;
    border-right: 1px solid #708090;
    border-bottom: 1px solid #708090;
    border-left: 1px solid #708090;
    width: auto;
    line-height: 12pt; 
    font-size : 10pt;
    cursor: hand;
    font-size: 10pt;
    border-top: 1px solid #708090;
}
</style>

<script type="text/javascript">
    var countdown=60;
    var userphone=document.getElementById("userphone");
    function settime(obj) {
        if (countdown == 0) {
            obj.removeAttribute("disabled");    
            obj.value="免费获取验证码";
            countdown = 60;
            return;
        } else {
            obj.setAttribute("disabled", true);
            obj.value="重新发送(" + countdown + ")";
            countdown--;
            setTimeout(function() {
                settime(obj) }
                ,1000)
        }
}
</script>

</head>
<body>
    <form action="yzmServlet" method="post">
    账户电话：<input type="text" name="userphone" id="userphone"><br>
    <input type="button" name="btnSendCode" id="btnSendCode" value="免费获取验证码" onclick="settime(this)"><br>
    <%
        String vcode="";
        for(int i=0;i<6;i++){
            vcode=vcode+(int)(Math.random()*9);
        }
        SMSUtil sms=new SMSUtil();
        sms.sendSMS(vcode);
        session.setAttribute("vcode", vcode);
        System.out.println(vcode);

    %>          
    密码：<input type="password" name="password" id="password"><br>
    输入验证码<input type="text" name="yzm" id="yzm">

    <input type="submit" value="登录">
    </form>

</body>
</html>

调用第三方接口发送信息

package com.yzm;

import org.apache.commons.httpclient.Header;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.NameValuePair;
import org.apache.commons.httpclient.methods.PostMethod;

public class SMSUtil {

    public void sendSMS(String vcode) {

        try {
            HttpClient client = new HttpClient();
            PostMethod post = new PostMethod("http://gbk.sms.webchinese.cn");
            post.addRequestHeader("Content-Type",
                    "application/x-www-form-urlencoded;charset=gbk");
            // uid：在中国网建网站上注册的用户id
            // key:中国网建为注册用户提供的短信秘要
            // smsMob：发送短信的手机号
            // smsText:短信内容
            NameValuePair[] data = { new NameValuePair("Uid", "用户名"),
                    new NameValuePair("Key", "秘钥"),
                    new NameValuePair("smsMob", "1882959****"),
                    new NameValuePair("smsText", "您的验证码为"+vcode) };
            post.setRequestBody(data);
            client.executeMethod(post);
            Header[] headers = post.getResponseHeaders();
            int statusCode = post.getStatusCode();
            System.out.println("statusCode:" + statusCode);
            for (Header h : headers) {
                System.out.println(h.toString());
            }
            String result = new String(post.getResponseBodyAsString().getBytes(
                    "gbk"));
            System.out.println(result);
            post.releaseConnection();
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

}

这里写图片描述