Java與JavaScript前後端怎麼實現手機號碼驗證碼一鍵註冊登陸

一、一鍵註冊登入流程

#二、前端

#2.1. 驗證碼取得流程

#1.點擊- >取得驗證碼呼叫後端取得驗證碼api介面

2.驗證碼59秒倒數

3.重複點選取得驗證碼,判斷驗證碼倒數計時是否大於0:

• 如果大於0，取得驗證碼按鈕不可觸碰

• #如果等於0，取得驗證碼呼叫後端取得驗證碼api介面

##2.2. 驗證碼取得程式碼

	var serverUrl = app.globalData.serverUrl;
				// 调用后端发送验证码
				uni.request({
					method: "POST",
					url: serverUrl + "/passport/getSMSCode?mobile=" + mobile,
					success(result) {
						var status = result.data.status;
						if (status != 200) {
							uni.showToast({
								title: result.data.msg,
								icon: "none"
							});
						}
						// 开始倒数60秒限制
						if(me.codeTimes == 0) {
							me.doTimer(59);
						}
					}
				});	
			},
			// 发送验证码的倒计时方法
			doTimer(times) {
				var me = this;
				// 倒计时定时器
				var sendCodeBtnFunction = function(){
					var left = times--;
					if (left <= 0) {
						me.codeTouched = false;
						me.codeBtnText = "发送验证码";
						clearInterval(smsTimer);
					} else {
						me.codeBtnText = left + "s";
					}
					me.codeTimes = left;
				};
				var smsTimer = setInterval(sendCodeBtnFunction, 1000);
			},

三、後端驗證碼

3.1. 前置處理

由於為了避免頻繁取得驗證碼會導致無效的操作，因此，對驗證碼取得邏輯需要進行前置攔截處理。

根據用戶ip進行限制，限制用戶在60秒之內只能獲得一次驗證碼

先進入->驗證碼前置攔截處理:

#1 .取得使用者的ip

• 2.驗證碼redis儲存key的前綴取得使用者的ip當做redis中的key，從redis取得已經儲存的請求請求ip

• 如果redis中存在未過期的用戶請求ip，則提示"短信發送太快啦~請稍後再試！"

如果redis中，不存在用戶請求ip ，則放行，繼續呼叫獲取驗證碼介面api

#3.2. 攔截器新增

3.3. 取得驗證碼

1.對輸入框填寫的資料進行校驗，不合法則提示，合法繼續。

2.取得使用者請求ip

3.根據使用者ip進行限制，限制使用者在60秒內只能獲得一次驗證碼

4.產生隨機6位元驗證碼

5.呼叫騰訊/阿里簡訊服務，發送驗證碼

6.把驗證碼放入redis中，用於後續的驗證

#7 .返回驗證碼

#########

以上是Java與JavaScript前後端怎麼實現手機號碼驗證碼一鍵註冊登陸的詳細內容。更多資訊請關注PHP中文網其他相關文章！