前端

<template><div class="logo"><div class="l_main"><div class="w1000 clearfix"><div class="login"><p class="zhdl"><span style="color:#fe7a02;font-size:24px;">登录</span>{{ uiInfo_name }}</p><form><div id="err_area" class="login_err_panel"><span style="display:inline-block;vertical-align:middle;"><i class="icon24-login" style="margin-top:-0.2em;"></i></span><span id="err_tip"></span></div><div class="box" style="margin-top:20px;"><b class="userbg"></b><input id="userId" v-model="loginForm.username" v-support placeholder="用户名" :autofocus="true" clearable@blur="loginForm.username = inputChange($event)"/></div><div class="box pos" style="margin-bottom:40px;"><b class="passwordbg"></b><input id="password1" v-model="loginForm.password" type="password" clearable@blur="loginForm.password = inputChange($event)"/></div><a id="openLockBtn" href="javascript:;" class="btn_openLock" v-if="openLock" @click="dialogVisible = true">密码找回</a><!--            <a id="restPwdBtn" href="javascript:;" class="btn_restPwd">重置密码</a>--><a id="loginBtn" href="javascript:;" class="btn_login" @click="handleLogin">登录</a></form></div></div></div><div class="l_foot"><p style="margin-top:8px;">系统要求：建议使用最新的chrome、firefox、IE8.0以上版本；建议分辨率：1920*1080</p><p>{{ copyrightText }}</p></div>
<!--    <el-dialog-->
<!--      title="账号解锁"-->
<!--      :visible.sync="dialogVisible"-->
<!--      width="30%"-->
<!--    >-->
<!--      <div style="display: inline-block">-->
<!--        <input placeholder="请输入手机号" v-model="openLockForm.AccNbrNum"/>-->
<!--        <a id="sendInfo" href="http://195.4.100.112:10002/esb/admin/SmsPush/1.0?authcode=R1hfVUNDUCNAYXV0aEAjM2ZZZFFJa2Q">发送短信</a>-->
<!--      </div>-->
<!--          <el-input placeholder="请输入验证码" v-model="openLockForm.OrderContent"></el-input>-->
<!--          <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="handelOpenLock">解 锁</el-button>-->
<!--  </span>-->
<!--    </el-dialog>--><el-dialogtitle="账号解锁":visible.sync="dialogVisible"width="30%"><el-form :model="openLockForm" :rules="rules" ref="ruleForm" label-width="100px" :inline="true" status-icon><el-form-item label="手机号码" prop="AccNbr"><el-input v-model="openLockForm.AccNbr" clearable><template slot="append"><el-button type="success" @click="sendSMS" v-if="!isDisabled">{{content}}</el-button><el-button type="success" v-if="isDisabled">{{content}}</el-button></template></el-input></el-form-item><el-form-item label="验证码" prop="OrderContent"><el-input v-model="openLockForm.OrderContent" clearable></el-input></el-form-item>
<!--        <el-form-item label="新密码" prop="newPassword">-->
<!--          <el-input v-model="openLockForm.newPassword" type="password" show-password clearable></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="确认密码" prop="confirmPassword">-->
<!--          <el-input v-model="openLockForm.confirmPassword" type="password" show-password clearable></el-input>-->
<!--        </el-form-item>--><el-form-item><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="handelOpenLock('ruleForm')">解 锁</el-button></el-form-item></el-form></el-dialog></div>
</template>
<script>import {login,sendSms,validCode} from '../../../api/login'import $ from 'jquery'import md5 from 'js-md5'export default {name: 'Login',data() {var validatephone=(rules, AccNbr, callback)=>{var phoneReg=/^1[3-9]\d{9}$/if (!phoneReg.test(AccNbr)){callback(new Error('请输入正确的手机号！'))}callback();}var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.openLockForm.newPassword) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {uiInfo_name: window.SITE_CONFIG['uiInfo_name'],copyrightText: window.SITE_CONFIG['copyrightText'],loginForm: {username: '',password: ''},isDisabled: false, //控制按钮是否可以点击（false:可以点击，true:不可点击）content: '获取短信验证码', // 发送验证码按钮的初始显示文字timer: null,count: '',openLock: false,dialogVisible: false,openLockForm: {AccNbr:'',LanId: "1100",SceneId: "428",ContentParam: null,OrderContent:'',//验证码newPassword:'',confirmPassword:'',},rules:{AccNbr:[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: validatephone, trigger: 'blur' },],OrderContent: [{ required: true, message: '请输入验证码', trigger: 'blur' },],newPassword: [{ required: true, message: '请输入密码', trigger: 'blur' },],confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' },{validator: validatePass2, trigger: 'blur' },],}}},methods: {handelOpenLock(formName){this.$refs[formName].validate((valid)=>{if (valid) {//提交表单validCode({'valid_code': this.openLockForm.OrderContent,'user_id':this.loginForm.username},true).then(data =>{if (data.msgFlag) {this.dialogVisible=falsethis.$message.success(data.msgDesc,3)this.openLock = false$('#err_area').hide()$('#err_tip').html("")} else {this.$message.error(data.msgDesc)}})} else {return false;}})},sendSMS(){let vm = this// 控制倒计时及按钮是否可以点击const TIME_COUNT = 60vm.count = TIME_COUNTvm.timer = window.setInterval(() => {if (vm.count > 0 && vm.count <= TIME_COUNT){// 倒计时时不可点击vm.isDisabled = true// 计时秒数vm.count--// 更新按钮的文字内容vm.content = vm.count + 's后重新获取'} else {// 倒计时完，可点击vm.isDisabled = false// 更新按钮文字内容vm.content = '获取短信验证码'// 清空定时器!!!clearInterval(vm.timer)vm.timer = null}}, 1000)//发送短信sendSms({'phone': this.openLockForm.AccNbr,'user_id':this.loginForm.username}, true).then(data => {if (data.msgFlag) {debuggerthis.$message.success("验证码发送成功！")} else {this.$message.error(data.msgDesc)}}).catch(data => {this.$message.error("验证码发送失败！")})},handleLogin() {const _this = thisif (this.loginForm.username === '') {$('#err_area').show()$('#err_tip').html('您还没有输入用户名！')return}if (this.loginForm.password === '') {$('#err_area').show()$('#err_tip').html('您还没有输入密码！')return}const password = md5(this.loginForm.username + '' + this.loginForm.password)this.loading = truelogin({'userId': this.loginForm.username,'password': password}, true).then(data => {if (data.msgFlag) {_this.$cookie.set('token', data.token)localStorage.setItem('tokenValue', data.token)if (this.redirect && this.redirect.match(/iframe\/(\S*)\//) && this.redirect.match(/iframe\/(\S*)\//)[1]) {const url = encodeURIComponent(this.redirect.match(/iframe\/(\S*)\//)[1]) // 截取两个字符串之间的内容const name = this.redirect.substring(this.redirect.lastIndexOf('\/') + 1, this.redirect.length)this.redirect = '/iframe/' + url + '/' + name}this.$router.push({path: this.redirect || '/'})} else {$('#err_area').show()$('#err_tip').html(data.msgDesc)$('#password1').val('')if (data.msgDesc === '账户被锁定！') {this.openLock = truethis.$router.push({path: '/login'})}else{this.openLock =false}}}).catch(data => {// console.log(data)this.loading = false$('#err_area').show()$('#err_tip').html(data.msgDesc)$('#password1').val('')})}}}
</script>
<style src="../../../../src/res/css/login.css" scoped>
</style>
<style src="../../../../src/res/css/reset.css" scoped>
</style>
<style scoped>.logo {background: url("../../../../src/res/images/login_background.jpg");top: 0;left: 0;width: 100%;height: 100%;min-width: 1000px;z-index: -10;zoom: 1;background-color: #fff;background-repeat: no-repeat;background-size: cover;-webkit-background-size: cover;-o-background-size: cover;background-position: center 0;}.btn_restPwd {color: red;}.btn_openLock {color: red;}
</style>

后端

1.controller

package usi.sys.controller;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.NameValuePair;
import org.apache.commons.httpclient.methods.PostMethod;
import org.apache.commons.httpclient.methods.RequestEntity;
import org.apache.commons.httpclient.methods.StringRequestEntity;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import usi.sys.dto.SendSmsParamsDTO;
import usi.sys.dto.StaffInfo;
import usi.sys.entity.Staff;
import usi.sys.service.SendSms;
import com.alibaba.fastjson.JSONObject;
import org.dom4j.Document;
import org.dom4j.DocumentHelper;
import org.dom4j.Element;
import usi.sys.service.StaffService;import javax.annotation.Resource;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.nio.charset.Charset;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@CrossOrigin
@RequestMapping("/sendSms")
public class    SmsApiController {@Autowiredprivate SendSms sendSms;@Resourceprivate StaffService staffService;private static String Url = "自己的url";@RequestMapping(value = {"/send.action"},method = {RequestMethod.POST})public  Map<String, Object>  sendSms(@RequestBody Map<String, Object> map) {Map<String, Object> result = new HashMap<String, Object>();String phone= map.get("phone").toString();String user_id= map.get("user_id").toString();//检查phone 是否匹配List<Map<String, Object>> list=staffService.getMobileNumByUserId(user_id);if(list.size()==0){result.put("msg", null);result.put("code", 200);result.put("msgFlag", false);result.put("msgDesc", "花名册内未找出此登录工号信息，请联系管理员核对花名册信息");return result;}else {String phonechecked=list.get(0).get("FRE_FIELD2").toString();if(!phonechecked.equals(phone)){result.put("msg", null);result.put("code", 200);result.put("msgFlag", false);result.put("msgDesc", "您输入的手机号与花名册手机号码不匹配，请核对");return result;}}InputStream inputStream = null;try {int mobile_code = (int) ((Math.random() * 9 + 1) * 100000);String content = new String("您的验证码是：" + mobile_code + "。（6分钟有效）请不要把验证码泄露给其他人。");String params = "{\n" +"\"AccNbr\":\"" + phone + "\",    \n" +"\"LanId\":\"1100\",\n" +"\"SceneId\":\"428\",\n" +"\"OrderContent\":\"" + content + "\",\n" +"\"ContentParam\":null\n" +"\n" +"}";HttpClient httpClient = new HttpClient();PostMethod postMethod = new PostMethod(Url);postMethod.setRequestHeader("Content-Type", "application/json");RequestEntity requestEntity = new StringRequestEntity(params, "application/json", "UTF-8");postMethod.setRequestEntity(requestEntity);httpClient.executeMethod(postMethod);// 执行请求inputStream = postMethod.getResponseBodyAsStream();// 获取返回的流BufferedReader br = null;StringBuffer buffer = new StringBuffer();// 将返回的输入流转换成字符串br = new BufferedReader(new InputStreamReader(inputStream, Charset.forName("UTF-8")));String temp;while ((temp = br.readLine()) != null) {buffer.append(temp);}
//            log.info("接口返回内容为:" + buffer);System.out.println(buffer.toString());JSONObject object=JSONObject.parseObject(buffer.toString());if(  "0000".equals(object.get("RespCode"))){return  staffService.updateVaildCode(user_id,mobile_code+"");//存验证码 失效时间 到数据库}else {  result.put("msg", null);result.put("code", 200);result.put("msgFlag", false);result.put("msgDesc", "验证码发送失败！");}} catch (Exception e) {
//            log("请求异常" +e.getMessage());result.put("msg", null);result.put("code", 200);result.put("msgFlag", false);result.put("msgDesc", "验证码发送失败！");throw new RuntimeException(e.getMessage());} finally {if (inputStream != null) {try {inputStream.close();} catch (IOException e) {e.printStackTrace();}}}return result;}@RequestMapping(value = {"/validCode.action"},method = {RequestMethod.POST})public  Map<String, Object>  validCode(@RequestBody Map<String, Object> map) {Date date =new Date();Map<String, Object> result = new HashMap<String, Object>();String valid_code= map.get("valid_code").toString();String user_id= map.get("user_id").toString();StaffInfo staff =staffService.queryStaffByUserId(user_id);if(!valid_code.equals(staff.getValidCode())){//resetresult.put("msg", null);result.put("code", 200);result.put("msgFlag", false);result.put("msgDesc", "验证码错误");}else if(date.getTime()-staff.getValidCodeEndTime().getTime()>(1000*60*6)) {//result.put("msg", null);result.put("code", 200);result.put("msgFlag", false);result.put("msgDesc", "验证码已超时");}else{Staff staff1=new Staff();staff1.setUserId(staff.getUserId());staff1.setStaffId(staff.getStaffId());staffService.resetPwd(staff1);result.put("msg", null);result.put("code", 200);result.put("msgFlag", true);result.put("msgDesc", "密码重置成功");}return result;}//    @RequestMapping(
//            value = {"/getMobile.action"},
//            method = {RequestMethod.POST}
//    )
//    public  Map<String, Object> getMobile(@RequestBody Map<String, Object> map) {
//        staffService.queryStaffByUserId();
//        return null;
//    }}

2.service

/**查询花名册存放的手机号码*/public List<Map<String, Object>> getMobileNumByUserId(String userId){return staffDao.getMobileNumByUserId(userId);}

@Transactional(rollbackFor=Exception.class)public Map<String, Object> updateVaildCode(String user_id,  String vaildCode) {Map<String, Object> magMap = new HashMap<String, Object>();if(staffDao.updateVaildCode(user_id, vaildCode)==1) {magMap.put("msg", null);magMap.put("code", 200);magMap.put("msgFlag", true);magMap.put("msgDesc", "验证码发送成功！");} else {magMap.put("msg", null);magMap.put("code", 200);magMap.put("msgFlag", false);magMap.put("msgDesc", "系统异常，稍后重试！");}return magMap;}

public StaffInfo queryStaffByUserId(String userId){return staffDao.queryStaffByUserId(userId);}

/*** 重置密码* @param staff*/@Transactional(rollbackFor=Exception.class)public void resetPwd(Staff staff){//密码加盐加密String password = CommonUtil.getMd5(staff.getUserId()+ConstantUtil.DEFAULT_PASSWORD);staff.setPassword(password);staffDao.resetPwd(staff);}

3.dao

 /*** 通过用户id，获取其手机号码* @param userId* @return*/@Overridepublic List<Map<String, Object>> getMobileNumByUserId(String userId) {String sql = "SELECT t.FRE_FIELD2 FROM sys_base_info_one t WHERE t.JOB_NUMBER = ?";try {return this.getJdbcTemplate().queryForList(sql,  new Object[]{userId});} catch (Exception e) {e.printStackTrace();}return null;}

 @Overridepublic int updateVaildCode(String user_id, String vaildCode) {String sql = "update sys_staff set valid_code=?, valid_code_end_time= date_add(now(), interval 6 minute) where user_id=?";return this.getJdbcTemplate().update(sql, vaildCode, user_id);}

@Overridepublic StaffInfo queryStaffByUserId(String userId) {String sql = "select t1.staff_id,"+ "t1.valid_code_end_time,"+ "t1.valid_code,"+ "t1.user_id,"+ "t1.org_id,"+ "t1.operator_name,"+ "t1.password,"+ "t1.duration,"+ "t1.pwd_last_mod_time,"+ "t1.station_code,"+ "t1.is_employee,"+ "t1.is_onduty,"+ "t1.is_lock,"+ "t2.mobile_nbr,"+ "t3.org_name,"+ "t3.org_seq,"+ "(case "+ "when ( char_length(t3.org_seq) - char_length( replace(t3.org_seq, '.' , ''))) >1 then "+ "substr(t3.org_seq,instr(t3.org_seq, '.') + 1, "+ "locate('.',t3.org_seq," + (ConstantUtil.FIRST_LEVEL_ORG_LENGTH + 2) + ") - instr(t3.org_seq, '.') - 1) "+ "else "+ "substr(t3.org_seq, 0, instr(t3.org_seq, '.') - 1) "+ "end) area_org_id,"+ "substr(t3.org_seq, 0, instr(t3.org_seq, '.') - 1) root_org_id, "+ "(case when (unix_timestamp(now())-unix_timestamp(lst_err_pwd_time))<1800 and is_lock=1 then 1 else 0 end) real_lock "+ "from sys_staff t1, sys_staff_attr t2, sys_org t3 "+ "where t1.staff_id = t2.staff_id "+ "and t1.org_id = t3.org_id " + "and t1.user_id = ? "+ "and t1.status = 1 " + "and t1.is_onduty = 1";List<StaffInfo> staffs = this.getJdbcTemplate().query(sql, new RowMapper<StaffInfo>() {@Overridepublic StaffInfo mapRow(ResultSet rs, int rowNum) throws SQLException {StaffInfo staff = new StaffInfo();staff.setStaffId(rs.getLong("staff_id"));staff.setUserId(rs.getString("user_id"));staff.setOrgId(rs.getLong("org_id"));staff.setMobileNum(rs.getString("mobile_nbr"));staff.setOrgSeq(rs.getString("org_seq"));staff.setAreaOrgId(rs.getLong("area_org_id"));staff.setRootOrgId(rs.getLong("root_org_id"));staff.setOrgName(rs.getString("org_name"));staff.setOperatorName(rs.getString("operator_name"));staff.setPassword(rs.getString("password"));staff.setDuration(rs.getInt("duration"));if (rs.getTimestamp("pwd_last_mod_time") != null) {staff.setPwdlastModTime(new Date(rs.getTimestamp("pwd_last_mod_time").getTime()));} else {staff.setPwdlastModTime(null);}staff.setRealLock(rs.getInt("real_lock"));staff.setStationCode(rs.getString("station_code"));staff.setIsEmployee(rs.getInt("is_employee"));staff.setIsOnduty(rs.getInt("is_onduty"));staff.setIsLock(rs.getInt("is_lock"));staff.setValidCode(rs.getString("valid_code"));staff.setValidCodeEndTime(rs.getTimestamp("valid_code_end_time"));return staff;}}, userId);return staffs.size() == 0 ? null : staffs.get(0);}

@Overridepublic void resetPwd(final Staff staff) {String sql = "update sys_staff set password=?,is_lock=0,PWD_ERR_TIMES=0 where staff_id=? ";this.getJdbcTemplate().update(sql, new PreparedStatementSetter() {@Overridepublic void setValues(PreparedStatement ps) throws SQLException {ps.setString(1, staff.getPassword());ps.setLong(2, staff.getStaffId());}});}

关于调用短信接口实现手机验证码密码重置功能相关推荐

调用短信接口，发送验证码
//通过httpclient调用接口,传参给客户手机发过去 String jsonParams = "{\"secret\":\""+加密的参数+&q ...
python --- 短信接口开发手机验证码发送
现在网络环境下,基本上任何网站注册都会验证手机号,已达到防止机器人注册的目的.除此之外短信群发,查询回复,找回密码等相关功能也需要短信验证码功能.那么网站的验证码发送是如何实现的呢?现在我们学习一下( ...
调用短信接口发送验证码，并对验证码进行验证
最近遇到用户注册时,需要调用短信接口,发送验证码,做了个调用淘宝短信接口的例子首先需要对短信接口内容进行封装: public class SendMsg2Util {private static S ...
阿里云短信平台实现手机验证码登录
阿里云短信平台实现手机验证码登录首先创建一个工具类工具类AliyunMessageUtil代码如下所示: public class AliyunMessageUtil {private stati ...
java调用短信接口实现发送短信
java调用短信接口实现发送短信 1.下载接口文件 2.打开java文件夹 2.1获取jar包依赖 2.2获取代码模板 3.创建项目 3.1打开eclipse软件,创建一个动态的web项目 3.2导入 ...
java短信接口_java调用短信接口代码
原标题:java调用短信接口代码短信接口被广泛应用在网站.app应用以及软件系统中,如用户注册.密码找回.会员服务.系统消息通知等应用场景,那么如何调用短信接口呢?下面以java开发语言为例,为大家 ...
thinkphp+小程序手机短信验证码（防止恶意调用短信接口）
thinkphp+小程序手机短信验证码前言一.短信轰炸是什么? 二.小程序准备 1.wxml 2.wxss 3.js(使用小程序定时器限制) 三.后台接口(ThinkPHP) 前言一.短信轰炸是 ...
【瑞吉外卖】day08：短信发送、手机验证码登录
目录 4. 短信发送编辑 4.1 短信服务介绍 4.2 阿里云短信服务介绍 4.3 阿里云短信服务准备 4.4 代码开发 5. 手机验证码登录 5.1 需求分析 5.2 数据模型 5.3 前端页面分 ...
java实现调用短信接口发送短信
如何调用java接口,进行短信的发送呢?现在几乎每一个平台都需要进行验证码短信或者通知类短信的发送,下面提供java接口的DEMO供大家下载: Java短信接口JDK点击下载或者直接进入官网测试页面 ...

关于调用短信接口实现手机验证码密码重置功能

前端

后端

关于调用短信接口实现手机验证码密码重置功能相关推荐

最新文章

热门文章