第三方（秒嘀）短信驗證碼登陸 demo

java + servlet+ jsp實現發送手機短信驗證碼

【1】選擇平台，完成認證。

短信登陸平台很多，自己可以看個人愛好選擇。

我們使用的API平台是：秒嘀雲： https://sms.miaodiyun.com/login.html

注冊該平台，完成認證就可以獲取到參數：ACCOUNT SID ，  AUTH TOKEN ， API

 

【2】創建短信模板 (該模板必須創建，通過平台審核只會才可以使用，而且后續的參數 smsContent 要和模板中的一致 )

【3】發送短信接口

http://www.miaodiyun.com/doc/https_sms.html

編寫java手機短信發送代碼

【4】項目目錄結構  (idea 中創建的普通web工程)

【5】Config.java

public class Config {
    /**
     * url前半部分
     */
    public static final String BASE_URL = " https://openapi.miaodiyun.com/distr*******dSMS";

    /**
     * 開發者注冊后系統自動生成的賬號，可在官網登錄后查看
     */
    public static final String ACCOUNT_SID = "fcf340ac***********915927";

    /**
     * 開發者注冊后系統自動生成的TOKEN，可在官網登錄后查看
     */
    public static final String AUTH_TOKEN = "648384a1***********2c33e4f";

    /**
     * 響應數據類型, JSON或XML
     */
    public static final String RESP_DATA_TYPE = "JSON";
}

【6】http請求工具

package com.miaodi.comment;



import org.apache.commons.codec.digest.DigestUtils;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.net.URL;
import java.net.URLConnection;

/**
 * http請求工具
 */
public class HttpUtil {
    /**
     * 構造通用參數timestamp、sig和respDataType
     * 
     * @return
     */
    public static String createCommonParam(String sid,String token) {
        // 時間戳
        long timestamp = System.currentTimeMillis();
        // 簽名
        String sig = DigestUtils.md5Hex(sid + token + timestamp);
        return "&timestamp=" + timestamp + "&sig=" + sig + "&respDataType=" + Config.RESP_DATA_TYPE;
    }

    /**
     * post請求
     * 
     * @param url
     *            功能和操作
     * @param body
     *            要post的數據
     * @return
     * @throws IOException
     */
    public static String post(String url, String body) {
        System.out.println("body:" + System.lineSeparator() + body);

        String result = "";
        try {
            OutputStreamWriter out = null;
            BufferedReader in = null;
            URL realUrl = new URL(url);
            URLConnection conn = realUrl.openConnection();

            // 設置連接參數
            conn.setDoOutput(true);
            conn.setDoInput(true);
            conn.setConnectTimeout(5000);
            conn.setReadTimeout(20000);
            conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
            // 提交數據
            out = new OutputStreamWriter(conn.getOutputStream(), "UTF-8");
            out.write(body);
            out.flush();

            // 讀取返回數據
            in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
            String line = "";
            boolean firstLine = true; // 讀第一行不加換行符
            while ((line = in.readLine()) != null) {
                if (firstLine) {
                    firstLine = false;
                } else {
                    result += System.lineSeparator();
                }
                result += line;
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }

    /**
     * 回調測試工具方法
     * 
     * @param url
     * @return
     */
    public static String postHuiDiao(String url, String body) {
        String result = "";
        try {
            OutputStreamWriter out = null;
            BufferedReader in = null;
            URL realUrl = new URL(url);
            URLConnection conn = realUrl.openConnection();

            // 設置連接參數
            conn.setDoOutput(true);
            conn.setDoInput(true);
            conn.setConnectTimeout(5000);
            conn.setReadTimeout(20000);

            // 提交數據
            out = new OutputStreamWriter(conn.getOutputStream(), "UTF-8");
            out.write(body);
            out.flush();

            // 讀取返回數據
            in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
            String line = "";
            boolean firstLine = true; // 讀第一行不加換行符
            while ((line = in.readLine()) != null) {
                if (firstLine) {
                    firstLine = false;
                } else {
                    result += System.lineSeparator();
                }
                result += line;
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        return result;
    }
}

【7】獲取驗證碼類

package com.miaodi.getcode;

import com.alibaba.fastjson.JSONObject;
import com.miaodi.comment.Config;
import com.miaodi.comment.HttpUtil;

import java.net.URLEncoder;

/**
 * @author: 張瑛
 * @date: 2019/7/5-12:22
 */
public class GetMessageCode {

    private static String accountSid = Config.ACCOUNT_SID;
    private static String rod=smsCode();   //生成一個隨機驗證碼
    private static String smsContent = "【南京車紛享汽車服務有限公司】登錄驗證碼："+rod +"，如非本人操作，請忽略此短信";

    //創建驗證碼
    public static String smsCode(){
        String random=(int)((Math.random()*9+1)*100000)+"";
        return random;
    }

    //根據相應的手機號發送驗證碼
    public static String getCode(String phone){
        String tmpSmsContent = null;
        try{
            tmpSmsContent = URLEncoder.encode(smsContent, "UTF-8");
        }catch(Exception e){
            e.getMessage();
        }

        String url = Config.BASE_URL;
        String body = "accountSid=" + accountSid + "&to=" + phone + "&smsContent=" + tmpSmsContent
                + HttpUtil.createCommonParam(Config.ACCOUNT_SID,Config.AUTH_TOKEN);

        // 提交請求
        String result = HttpUtil.post(url, body);


        //字符串轉json對象
        JSONObject jsonObject = JSONObject.parseObject(result);
        String respCode = jsonObject.getString("respCode");

        System.out.println("驗證碼："+rod);
        System.out.println("結果碼："+respCode);

        //反饋-00000狀態碼標識請求成功，
        String defaultRespCode="0000";
        if(defaultRespCode.equals(respCode)){
            return rod;
        }else{
            return defaultRespCode;
        }
    }

}

【8】servlet類

package com.tencent.loginservlet;

import com.miaodi.getcode.GetMessageCode;

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 java.io.IOException;

/**
 * @author: 張瑛
 * @date: 2019/7/5-10:37
 */
@WebServlet(name = "LoginServlet",urlPatterns = "/sendSMS")
public class LoginServlet extends HttpServlet {

    /** serialVersionUID*/
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String  phone=request.getParameter("phone");
        //根據獲取到的手機號發送驗證碼
        String code = GetMessageCode.getCode(phone);
        System.out.println("返回code"+code);
        response.getWriter().print(code);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }

}

【9】login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>測試短信登陸</title>
</head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

<link rel="stylesheet" href="CSS/bootstrap/bootstrap.min.css" />
<script type="text/javascript" src="js/jQuery/jquery-3.4.1.js"></script>
<style type="text/css">
    #login {
        width: 450px;
        height: 100px;
        margin: 126px auto;
    }

    #btn {
        margin-left: 100px;
        margin-top: -25px;
        width: 120px;
        height: 25px;
        font-size: 11px;
    }

    body {
        background-color: #ecfcf9;
    }
</style>
</head>
<script type="text/javascript">
    var InterValObj; //timer變量，控制時間
    var count = 60; //間隔函數，1秒執行
    var curCount;//當前剩余秒數

    function sendMessage() {
        curCount = count;
        $("#btn").attr("disabled", "true");
        $("#btn").val(curCount + "秒后可重新發送");
        InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器，1秒執行一次請求后台發送驗證碼 TODO
    }
    //timer處理函數
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止計時器
            $("#btn").removeAttr("disabled");//啟用按鈕
            $("#btn").val("重新發送驗證碼");
        } else {
            curCount--;
            $("#btn").val(curCount + "秒后可重新發送");
        }
    }
</script>

<body>
<div class="container">
    <div id="login">
        <fieldset>
            <div id="legend" class="">
                <legend class="">用戶登錄</legend>
            </div>
            <form class="form-horizontal" role="form">

                <div class="form-group"> <label class="col-sm-2 control-label">手機號</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="請輸入您的手機號" required>
                    </div>
                </div>

                <div class="form-group"> <label class="col-sm-2 control-label">驗證碼</label>
                    <div class="col-sm-3">
                        <input type="code" class="form-control" id="code" name="code" placeholder="驗證碼" required>
                        <input class="btn btn-default" id="btn" name="btn" value="發送驗證碼" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-success" id="lo">手機號登錄</button>
                    </div>
                </div>

            </form>
        </fieldset>
    </div>
</div>
</body>

<script type="text/javascript">
    var sms = "";
    $("#btn").click(function() {
        var phone = $("#phone").val();
        if (phone != "") {
            sendMessage();
            $.ajax({
                url : "sendSMS",  //發送請求
                type : "post",
                data : {
                    "phone" : phone
                },
                success : function(result) {
                    sms = result;
                }
            });
        } else {
            alert("請輸入手機號");
            return false;
        }
    });
    $("#lo").click(function() {
        var code = $("#code").val();
        if (code == "") {
            alert("請輸入驗證碼");
        } else {
            if (sms == code) {
                window.location.href = "success.jsp";
            } else {
                alert("驗證碼錯誤");
            }
            ;
        }
        ;
    });
</script>

</html>

【10】備注：

lib是一些jar包，jar可以從秒嘀雲平台的demo中導入到自己的工程中，也可以自己從網上下載，主要用到的是commons-codec-1.9.jar  做加密用的，fastjson-1.2.49.jar 是作json轉化用的，其他的沒啥用。

頁面中引入的bootstrap 和jQuery 庫 自己可以從網上下載。succee.jsp 等可以自定義。

實在需要源碼的：發郵件到 [e-mail]  看見了就回，看不見就算了。

附上效果鏈接：http://106.12.207.20/SendSMS2_war/login.jsp