快捷導(dǎo)航

SpringBoot實(shí)現(xiàn)短信驗(yàn)證碼登錄功能(案例)

更新時間：2024年08月02日 11:53:01 作者：zlin55

這篇文章主要介紹了SpringBoot實(shí)現(xiàn)短信驗(yàn)證碼登錄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

一、要找一個提供短信接口的第三方平臺，這里我使用的是榛子云
二、在注冊后，就可以使用了
三、首先是在pom.xml中添加依賴

<!-- fastjosn -->
<dependency>
	<groupId>com.alibaba</groupId>
	<artifactId>fastjson</artifactId>
	<version>1.2.4</version>
</dependency>
<dependency>
    <groupId>com.zhenzikj</groupId>
    <artifactId>zhenzisms</artifactId>
    <version>1.0.2</version>
</dependency>

1.驗(yàn)證碼發(fā)送的controller

package com.foreknow.controller;
import com.alibaba.fastjson.JSONObject;
import com.foreknow.model.Member;
import com.foreknow.service.MemberService;
import com.zhenzi.sms.ZhenziSmsClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpSession;
import java.util.Random;
@Controller
public class CodeController {
	//短信平臺相關(guān)參數(shù)
	//這個不用改
	private String apiUrl = "https://sms_developer.zhenzikj.com";
	//榛子云系統(tǒng)上獲取
	private String appId = "100862";
	private String appSecret = "62358d10-bc0e-4152-a52c-578a8debc9b9";
	@ResponseBody
	@GetMapping("/fitness/code")
	public boolean getCode(@RequestParam("memPhone") String memPhone, HttpSession httpSession){
       try {
	        JSONObject json = null;
	        //隨機(jī)生成驗(yàn)證碼
	        String code = String.valueOf(new Random().nextInt(999999));
	        //將驗(yàn)證碼通過榛子云接口發(fā)送至手機(jī)
	        ZhenziSmsClient client = new ZhenziSmsClient(apiUrl, appId, appSecret);
	        String result = client.send(memPhone, "您的驗(yàn)證碼為:" + code + "，該碼有效期為5分鐘，該碼只能使用一次!");
	        json = JSONObject.parseObject(result);
	        if (json.getIntValue("code")!=0){//發(fā)送短信失敗
	            return  false;
	        }
	        //將驗(yàn)證碼存到session中,同時存入創(chuàng)建時間
	        //以json存放，這里使用的是阿里的fastjson
	        json = new JSONObject();
	        json.put("memPhone",memPhone);
	        json.put("code",code);
	        json.put("createTime",System.currentTimeMillis());
	        // 將認(rèn)證碼存入SESSION
	        httpSession.setAttribute("code",json);
	        return true;
        } catch (Exception e) {
            e.printStackTrace();
             return false;
        }    
	}
}

其中的局部變量是在榛子云的個人中心獲?。?/p>

登錄時從session中獲取剛剛發(fā)送到手機(jī)的驗(yàn)證碼對象：

JSONObject userCode = (JSONObject)session.getAttribute("code");
//驗(yàn)證碼
userCode .get("code");
//手機(jī)號
userCode.get("memPhone");

前端限制60秒只能獲取一次驗(yàn)證碼的效果實(shí)現(xiàn)：

<div id="model2">
    <div class="layui-form-item input-item">
        <label for="userName">手機(jī)號</label>
        <input type="text" placeholder="請輸入手機(jī)號" autocomplete="off" id="memPhone" name="memPhone" class="layui-input">
    </div>
    <div class="layui-form-item input-item">
        <label for="userName">驗(yàn)證碼</label>
        <input type="text" placeholder="請輸入驗(yàn)證碼" autocomplete="off" id="code" name="code" maxlength="6" class="layui-input" style="width: 50%;display: inline">
        <input type="button" class="layui-btn layui-btn-primary" value="獲取驗(yàn)證碼" id="sendBtn" style="width:41%;margin-left: 18px;border-color:#1e9fff !important;" onclick="sendCode(this)"></input>
    </div>
</div>
 function sendCode(){
       var memPhone = $("#memPhone").val();
       console.log(memPhone.length);
       if(memPhone == '' || memPhone.length != 11){
           layer.msg("請輸入正確的手機(jī)號！");
           return;
       }else{
           $.ajax({
               type: 'GET',
               url: '[[${basePath}]]/fitness/code',
               data: {
                   memPhone : memPhone
               },
               dataType: 'json',
               success: function(data) {
                  if(data){
                      timer();
                  }else{
                      layer.msg("獲取驗(yàn)證碼失敗");
                  }
               },
               error: function(data) {
                   layer.msg('連接超時！');
               },
           });
       }
   }
   var wait = 60;
   //倒計時
   function timer() {
       if(wait == 0){
           $("#sendBtn").val("獲取驗(yàn)證碼");
           $("#sendBtn").removeAttr("disabled");
           $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
           wait = 60;
       }else{
           $("#sendBtn").attr("disabled","true");
           $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
           $("#sendBtn").val(wait + "秒后重發(fā)");
           wait--;
           setTimeout(function() {timer()}, 1000);
       }
   }

到此這篇關(guān)于SpringBoot實(shí)現(xiàn)短信驗(yàn)證碼登錄的文章就介紹到這了,更多相關(guān)SpringBoot短信驗(yàn)證碼登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: