為了保證使用者在遊戲陪玩app原始碼中的資訊保安，在登入系統時，一般都需要進行驗證，其中通過簡訊驗證碼形式進行驗證是目前比較常見的，那麼在遊戲陪玩app原始碼開發時，應該如何實現簡訊驗證碼登入呢？

遊戲陪玩app原始碼前臺程式碼

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, ser-scalable=no">
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
        <title></title>
        <style type="text/css">
            html { background: #efefef; }
            p { position: relative;height: 1rem;width: 90%; margin: 0 auto;border-bottom: 1px solid lightgray; }
            p input { outline: none;text-indent: 0.4rem;font-size: 0.3rem;height: 100%;width: 100%;background: rgba(0,0,0,0); }
            p span { display: inline-block;font-size: 0.3rem;color: gray;position: absolute;top: 0.35rem;right: 0.3rem; }
            div { width: 80%;height: 1rem;line-height: 1rem;text-align: center;background: #D81E06;color: #fff;font-size: 0.3rem;margin: 0.5rem auto 0;border-radius: 0.1rem; }
            i { width: 100%;text-align: center;display: inline-block;color: gray;margin-top: 0.4rem; }
            i wet { color: blue; }
        </style>
    </head>
    <body>
        <form id="form1">
        <p style="padding-top: 2rem;">
            <input type="number" value=""  id="phone" name="phone" placeholder="請輸入手機號" />
        </p>
        <p>
            <input type="number" id="code"  name="code" placeholder="請輸入驗證碼" />
            <span id="sendSms">獲取驗證碼</span>
        </p>
        <div id="login">登入</div>
        <i>點選登入，即表示已閱讀並同意<wet>《車友援服務協議》</wet></i>
        </form>
     
    </body>
    
    <script>
         $(function() {
            $("#sendSms").click(function() {
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8080/api/customer/sengCodeNum',
                    data: {
                        "phoneNum":$("#phone").val()
                    },
                    dataType: 'json',
                    success: function(res) {
                        if (res.code == 0) {
                            alert("驗證碼已傳送到手機")
                            //這裡寫作業2
                        }else{
                            alert("傳送失敗")
                        }
                    },
                })

當完成獲取驗證碼操作時，驗證碼會傳送到遊戲陪玩app原始碼的redis庫中。
在這裡插入圖片描述

})
         
            $("#login").click(function() {
                $.ajax({
                    type: 'post',
                    url: 'http://localhost:8080/api/customer/customerLogin',
                    data: {
                        "phoneNum":$("#phone").val(),
                        "codeNum":$("#code").val()
                    },
                    dataType: 'json',
                    success: function(res) {
                        if (res.code == 0) {
                            alert("登入成功")
                        }else{
                            alert("驗證碼不對")
                        }
                    },
                })
            })
        });
    </script></html>

這是遊戲陪玩app原始碼後臺的傳送驗證碼和登入

@RestController
@CrossOrigin(origins = "*")//注意： *是來自於所有的域名請求@RequestMapping("/api/customer")public class CustomerController{@Autowired(required = false)private CustomerService customerService;@Autowired
private JedisPool jedisPool;
        //傳送驗證碼
    @RequestMapping("/sengCodeNum")
    public Map sendCodeNum(String phoneNum) {
        Map map = new HashMap();
        //1.在傳送驗證碼之前，隨機撞見一個6位數的驗證碼
        int randomNum = new Random().nextInt(999999);//0-999999
        if (randomNum < 100000) {
            randomNum = randomNum + 100000;
        }
        //1.1在傳送驗證碼之前 需要向redis中查詢該手機 有沒有驗證碼存在，如果存在，就直接從redis中讀取，而不從阿里雲傳送，可以節省成本
        //查詢pcode這個key在不在
        Boolean b = jedisPool.getResource().exists("phoneNum");
        if (b) {
            map.put("code", 0);
            map.put("msg", "驗證啊已存在，情趣簡訊中查詢");
            return map;
        } else {
            //2.接受到前端傳過來的手機號：phoneNum  對其呼叫 阿里雲的傳送簡訊的工具類，去傳送驗證碼
            ALSMSUtil.sendMsg(phoneNum, randomNum);
            //3.再送之後，將手機號當做redis key，驗證碼當做redis value 存入到redis資料庫中
            String setex = jedisPool.getResource().setex(phoneNum, 120, String.valueOf(randomNum));
            System.out.println("setex = " + setex);
            jedisPool.getResource().persist(phoneNum);//注意：這裡設定成-1 線上上環境測試要刪除
            //4.將驗證碼傳送給前端
            if ("OK".equals(setex)) {
                map.put("code", 0);
                map.put("msg", "傳送成功");
                //map.put("data",randomNum);//線上不能把驗證碼傳送前端，容易被人利用
                return map;
            } else {
                map.put("code", 500);
                map.put("msg", "傳送失敗");
                return map;
            }
        }
    }
    //校驗手機號和驗證碼
    @RequestMapping("/customerLogin") //  /api/customer/customerLogin
    public Map customerLogin(String phoneNum,String codeNum){
        Map map = new HashMap();
        //1.根據前端傳來的手機號和驗證碼來和redis中的資料做對比
        String redisCodeNum = jedisPool.getResource().get(phoneNum);//redis中的驗證碼
        if(codeNum.equals(redisCodeNum)){
            map.put("code",0);
            map.put("msg","傳送成功");
            return map;
        }else{
            map.put("code",500);
            map.put("msg","傳送失敗");
            return map;
        }
    }}

以上便是“如何在遊戲陪玩app原始碼開發中，實現傳送簡訊驗證碼登入”的全部內容，遊戲陪玩app原始碼的開發並不是一蹴而就的過程，需要開發者不斷的進行嘗試和優化，希望以上內容能給大家帶來幫助。
本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：https://blog.csdn.net/aaqia/article/details/120506754

如何在遊戲陪玩app原始碼中實現簡訊驗證碼登入？

相關文章