模拟手机短信验证

前端

html

<template style="position: relative;">
<!-- 短信验证 -->
                <p>输入短信验证码</p>
                <el-form-item label="" prop="SMScode">
                    <el-input v-model="ruleForm.SMScode" type="text" autocomplete="off"
                        style="width: 300px;  margin-bottom: 10px;" placeholder="输入短信验证码" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetForm1"
                        style="width: 80px; margin-top: -55px; margin-left: 305px;">点击发送</el-button>
                </el-form-item>
                <el-button v-if="!isSend" style="margin-top: -75px; margin-left: 510px;">{{ sendmsg }}</el-button>
</template>

JS

let isSend = ref();

let sendmsg = ref();

let verificationNumber = ref();
// 点击发送验证
function resetForm1() {

    axios.get('/acquisition/verification?phone=' + resetForm.phone)
        .then((resp) => {
            console.log(resp);

            verificationNumber.value = resp.data;

            isSend.value = false;

            let timer = 60;

            sendmsg.value = timer + "s";

            setInterval(() => {
                --timer;
                sendmsg.value = timer + "s";
                if (timer == 0) {
                    isSend.value = true;
                    sendmsg.value = "重新发送";在这里插入代码片
                    clearInterval(setInterval());
                }
            }, 1000);

        }).catch((err) => {
            console.log(err);
        });

}

后端

依赖

    <!--短信认证-->
    <dependency>
      <groupId>com.cloopen</groupId>
      <artifactId>java-sms-sdk</artifactId>
      <version>1.0.1</version>
    </dependency>

/**
     * 短信验证
     *
     * @param phone
     * @return
     */
    //发送验证码到的指定手机号
    //private String phone = "18434065530";
    //生产环境请求地址：app.cloopen.com 无需修改
    String serverIp = "app.cloopen.com";
    //请求端口
    String serverPort = "8883";
    //主账号,登陆云通讯网站后,可在控制台首页看到开发者主账号ACCOUNT SID和主账号令牌AUTH TOKEN
    String accountSId = "2c94811c8b1e335b018b3729fe4a03b4"; //TODO:此处修改
    String accountToken = "bf40d7aa0937405f82d353e4ef6bce18"; //TODO:此处修改
    //请使用管理控制台中已创建应用的APPID
    String appId = "2c94811c8b1e335b018b3729ffd503bb"; //TODO:此处修改

    @GetMapping("verification")
    public String sendMessage(String phone) {

        System.out.println(phone);
        //4位验证码
        Random random = new Random();
        StringBuffer code = new StringBuffer();

        for (int i = 0; i < 4; i++) {
            int num = random.nextInt(10);
            //第一位不能为0
            while (num == 0 && i == 0) {
                num = random.nextInt(10);
            }
            System.out.println("num = " + num);
            code.append(num);
        }

        String codeStr = code.toString();
        //此处仅仅生成四位验证码
        System.out.println("codeStr = " + codeStr);

        CCPRestSmsSDK sdk = new CCPRestSmsSDK();
        sdk.init(serverIp, serverPort);
        sdk.setAccount(accountSId, accountToken);
        sdk.setAppId(appId);
        sdk.setBodyType(BodyType.Type_JSON);

        //短信模板id 默认测试环境的id是 1
        String templateId = "1";
        //占位符传参，参数1：4位验证码，参数2：验证码逻辑有效期时长
        String[] datas = {codeStr, "5"};
        String subAppend = "1234"; //可选 扩展码，四位数字 0~9999
        String reqId = "fadfafas"; //可选 第三方自定义消息id，最大支持32位英文数字，同账号下同一自然天内不允许重复
        //HashMap<String, Object> result = sdk.sendTemplateSMS(to,templateId,datas);
        HashMap<String, Object> result = sdk.sendTemplateSMS(phone, templateId, datas);

        if ("000000".equals(result.get("statusCode"))) {
            //正常返回输出data包体信息（map）
            HashMap<String, Object> data = (HashMap<String, Object>) result.get("data");
            Set<String> keySet = data.keySet();
            for (String key : keySet) {
                Object object = data.get(key);
                System.out.println(key + " = " + object);
            }
        } else {
            //异常返回输出错误码和错误信息
            System.out.println("错误码=" + result.get("statusCode") + " 错误信息= " + result.get("statusMsg"));
        }


        SMSCode = codeStr;

        return codeStr;
    }