阿里云实现短信验证码登录

1、基本的准备工作:

  • 大致的流程为:
    注册阿里账号、充值、完成短信签名和短信模板的申请(需要等一段时间审核通过)、创建access key
a)注册阿里账号、充值就不说了(注意的是自己玩的话认证的时候就选择个人用户
b)完成短信签名和短信模板的申请

短信签名:就相当于平时我们看到的短信前面公司的名称一样
短信模板:就是收到的短信的具体内容的样式

短信签名:
阿里云实现短信验证码登录_第1张图片短信模板选择:阿里云实现短信验证码登录_第2张图片

c)创建access key

阿里云实现短信验证码登录_第3张图片阿里云实现短信验证码登录_第4张图片

基本准备工作完成了,下面就开始写代码啦!

2、代码:

首先需要添加需要的SDK的jar包,我采用的是添加依赖的方式


        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-core</artifactId>
            <version>4.1.0</version>
        </dependency>

        <dependency>
            <groupId>com.aliyun</groupId>
            <artifactId>aliyun-java-sdk-dysmsapi</artifactId>
            <version>1.1.0</version>
        </dependency>

前台页面(由于本人这个页面代码有点多,就只贴了跟验证码有关的几个参数

		<div class="form-group has-success has-feedback">
            <input type="text" value="" class="form-control" id="fphoneNumber" name="phoneNumber" placeholder="请输入手机号" style="margin-top:10px;">
            <span class="glyphicon glyphicon-phone-alt form-control-feedback "></span>
        </div>
        <div>
            <input type="text" id="fverifyCode" value="" placeholder="请输入验证码" name="verifyCode" class="form-control form-login-verifyCode">
            <button type="button" class="form-login-verifyCode-button"  onclick="getVerifyCode()">获取</button>
            <br><br>
        </div>
        <a class="btn btn-lg btn-success btn-block" onclick="dologin()" > 登录</a>



前台js

	/**
     *点击获取验证码按钮后将手机号传到后台获取验证码
     */
    function getVerifyCode() {
        var phoneNumber = $("#fphoneNumber");
        if($.trim(phoneNumber.val())==""){
            alert("电话不能为空");
            fphoneNumber.val("");
            fphoneNumber.focus();
        }else{
            $.ajax({
                url: "${APP_PATH}/sendSms.do",
                async : true,
                type: "POST",
                dataType: "json",
                data: {"phoneNumber":phoneNumber.val()},
                success: function (data) {
                    if(data == 'fail'){
                        alert("发送验证码失败");
                        return ;
                    }else{
                        alert("验证码发送成功")
                    }
                }
            });
        }
       

    }


	/**
	*输入验证码后提交到后台是否输入合法
	*/
	function dologin() {    
       
        var fverifyCode = $("#fverifyCode");
        if($.trim(fverifyCode.val())==""){
            alert("验证码不能为空");
            fverifyCode.val("");
            fverifyCode.focus();
        }else{
            var data={            	              
                "verifyCode":fverifyCode.val()
            };
            $.ajax({
                type: "POST",
                url: "${APP_PATH}/doLogin.do",
                contentType: "application/json",
                dataType: "JSON",
                data: JSON.stringify(data),
                success: function (obj) {
                    console.log(obj);
                    if(obj.data=='登录成功'){
                        window.location.href="${APP_PATH}/main.htm";
                    }else{
                        alert(obj.data);
                        fverifyCode.val("");
                    }
                },
                error: function () {
                    layer.msg("登录失败!", {time:1000, icon:5, shift:6});
                }

            })

        }


    }

后台
打了****的地方是你需要自己填写的参数(具体值去上面配的阿里短信服务里面找)

	/**
	 * 发送短信验证码
	 * @param 手机号
	 */
	@PostMapping("/sendSms")
	@ResponseBody
	public Object sendSms(HttpServletRequest httpServletRequest, String phoneNumber) {
		try {
			//生成6位验证码
			String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);
			//设置超时时间(不必修改)
			System.setProperty("sun.net.client.defaultConnectTimeout", "10000");
			//(不必修改)
			System.setProperty("sun.net.client.defaultReadTimeout", "10000");
			//初始化ascClient,("***"分别填写自己的AccessKey ID和Secret)
			IClientProfile profile = DefaultProfile.getProfile("cn-hangzhou", "*****", "****");
			//(不必修改)
			DefaultProfile.addEndpoint("cn-hangzhou", "cn-hangzhou", "Dysmsapi", "dysmsapi.aliyuncs.com");
			//(不必修改)
			IAcsClient acsClient = new DefaultAcsClient(profile);
			//组装请求对象(不必修改)
			SendSmsRequest request = new SendSmsRequest();
			//****处填写接收方的手机号码
			request.setPhoneNumbers(phoneNumber);
			//****填写已申请的短信签名
			request.setSignName("****");
			//****填写获得的短信模版CODE
			request.setTemplateCode("*****");
			//笔者的短信模版中有${code}, 因此此处对应填写验证码
			request.setTemplateParam("{\"code\":\""+verifyCode+"\"}");
			//不必修改
			SendSmsResponse sendSmsResponse = acsClient.getAcsResponse(request);

			//将生成的验证码和创建时间放到session中,后面验证从session中取
			HttpSession session = httpServletRequest.getSession();
			session.setAttribute("verifyCode",verifyCode);
			session.setAttribute("verifyCodeCreateTime",System.currentTimeMillis());
//			return sendSmsResponse;
			return "success";

		} catch (Exception e) {
			e.printStackTrace();
			return "fail";
		}

	}


//JsonResult 是我自己定义的一个返回结果的包装类,可以直接用map等代替
//loginUserVo里面是有一些其它的验证信息,如果没有的话就直接去掉就好了,然后把下面的User resultUser = userService.login(loginUserVo.getUser());注释掉

/**
	 * 验证
	 * @param
	 * @param
	 * @return
	 */
	@RequestMapping(value = "/doLogin",method = RequestMethod.POST,consumes = "application/json")
	@ResponseBody
	public Object doLogin(@RequestBody LoginUserVo loginUserVo,HttpSession session){
		JsonResult jsonResult = new JsonResult();
		try {
			if(session.getAttribute("verifyCodeCreateTime") !=null && (System.currentTimeMillis()-Long.valueOf(String.valueOf(session.getAttribute("verifyCodeCreateTime"))) )> 1000 * 60  ){
				session.removeAttribute("verifyCode");
				session.removeAttribute("verifyCodeCreateTime");
				jsonResult.setData("验证码过期");
			}
			else if (session.getAttribute("verifyCode") != null &&
					loginUserVo.getVerifyCode().equals(session.getAttribute("verifyCode"))){
				User resultUser = userService.login(loginUserVo.getUser());
				session.setAttribute(Const.LOGIN_USER,resultUser);
				session.removeAttribute("verifyCode");
				session.removeAttribute("verifyCodeCreateTime");
				jsonResult.setData("登录成功");
			}else{
				jsonResult.setData("验证码错误");
			}

		}catch(Exception e){
			jsonResult.setData("登录失败");
			e.printStackTrace();
		}
		return jsonResult;
	}



初学者自己搞着玩的,如果有什么不对的欢迎指正哈。

参考文章:
https://blog.csdn.net/zuoliangzhu/article/details/81193269

https://blog.csdn.net/u011958281/article/details/78614792

你可能感兴趣的:(后端)