Java與JavaScript前后端怎么實現手機號驗證碼一鍵注冊登陸

這篇文章主要講解了“Java與JavaScript前后端怎么實現手機號驗證碼一鍵注冊登陸”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“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前后端怎么實現手機號驗證碼一鍵注冊登陸”的內容了，經過本文的學習后，相信大家對Java與JavaScript前后端怎么實現手機號驗證碼一鍵注冊登陸這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！