文章目錄

• • • • • 一、手機號+驗證碼
        • 二、前端
        • • 2.1. 點擊登陸流程
          • 2.2. 點擊登錄源碼
        • 三、后端登錄
        • • 3.1. 登錄流程圖
          • 3.2. 流程簡述
          • 3.3. 手機號驗證碼登錄流程

一、手機號+驗證碼

二、前端

2.1. 點擊登陸流程

• 1.先校驗手機號是否合法？不合法，則提示“請輸入正確的手機號”
• 2.再校驗是否勾選隱私協議，未勾選，則提示“請先同意《隱私及服務協議》”
• 3.校驗通過后，根據選擇的登錄類型進行判斷，最后，則調用后端手機號驗證碼登錄接口
• 4.后端返回結果
  • 4.1.成功，則保存用戶信息+token信息
  • 4.2.失敗：則提示后端返回的提示語

2.2. 點擊登錄源碼

loginOrRegist() {var me = this;var mobile = me.mobile;// 提交前，手機號校驗var reg = /^1[0-9]{10,10}$/;if (!mobile || !reg.test(mobile)) {uni.showToast({title: '請輸入正確的手機號',icon: 'none'})return}if (!this.agree) {uni.showToast({title: '請先同意《隱私及服務協議》',icon: 'none'});return;}var serverUrl = app.globalData.serverUrl;// 手機號密碼~登錄/注冊if (!this.logintype) {var password = me.password;if (app.isStrEmpty(password)) {uni.showToast({title: "密碼不能為空",icon: "none"});return;}// uni.showLoading()// 調用后端登錄注冊uni.request({method: "POST",url: serverUrl + "/user/mobileAndPasswordRegistLogin",data: {"mobile": mobile,"password": password},success(result) {var status = result.data.status;// uni.hideLoading();if (status == 200) {var userInfo = result.data.data;console.log("密碼->userInfo", userInfo)app.setUserInfoSession(userInfo);app.setUserSessionToken(userInfo.userToken);// 登錄成功，關閉當前頁// me.close();uni.reLaunch({url: "../me/me"})} else if (status != 200) {uni.showToast({title: result.data.msg,icon: "none",duration: 3000});}}});}// 手機號驗證碼~登錄/注冊if (this.logintype) {var verifyCode = me.verifyCode;console.log("verifyCode", verifyCode)if (app.isStrEmpty(verifyCode)) {uni.showToast({title: "請填寫驗證碼",icon: "none"});return;}// 調用后端登錄注冊uni.request({method: "POST",url: serverUrl + "/user/login",data: {"mobile": mobile,"smsCode": verifyCode},success(result) {var status = result.data.status;// uni.hideLoading();if (status == 200) {var userInfo = result.data.data;console.log("驗證碼->userInfo", userInfo)app.setUserInfoSession(userInfo);app.setUserSessionToken(userInfo.userToken);// 登錄成功，關閉當前頁// me.close();uni.reLaunch({url: "../me/me"})} else if (status != 200) {uni.showToast({title: result.data.msg,icon: "none",duration: 3000});}}});}}

三、后端登錄

3.1. 登錄流程圖

會話攔截限制一臺手機登錄（流程圖）

3.2. 流程簡述

• 1.前端傳遞userId和token
• 2.后端接收userId和token
• 3.校驗userId和token是否為空
• 4.校驗任一為空，則提示“請登錄后再繼續操作！”
• 5.不為空，通過UserId從redis中獲取token
• 6.redis中的token與傳參token校驗是否一致
• 7.不一致，第一臺登錄的會“會話失效，請重新登錄！”
• 8.一致繼續操作

備注：由于登錄不攔截，因此當第二臺手機登錄時，token會將第一臺手機的登錄token進行覆蓋

3.3. 手機號驗證碼登錄流程

• 1.從redis中獲得驗證碼進行校驗是否匹配
• 2.查詢數據庫，判斷用戶是否存在
  • 2.1 如果用戶為空，表示沒有注冊過，則為null，需要注冊信息入庫
  • 2.2 如果用戶不為空，表示已經注冊過，繼續
• 3.如果不為空，可以繼續下方業務，可以保存用戶會話信息
• 4.用戶登錄注冊成功以后，刪除redis中的短信驗證碼
• 5.返回用戶信息，包含token令牌

@PostMapping("login")public GraceJSONResult login(@Valid @RequestBody RegistLoginBO registLoginBO,HttpServletRequest request) throws Exception {String mobile = registLoginBO.getMobile();String code = registLoginBO.getSmsCode();// 1. 從redis中獲得驗證碼進行校驗是否匹配String redisCode = redis.get(MOBILE_SMSCODE + ":" + mobile);if (StringUtils.isBlank(redisCode) || !redisCode.equalsIgnoreCase(code)) {return GraceJSONResult.errorCustom(ResponseStatusEnum.SMS_CODE_ERROR);}// 2. 查詢數據庫，判斷用戶是否存在Users user = userService.queryMobileIsExist(mobile);if (user == null) {// 2.1 如果用戶為空，表示沒有注冊過，則為null，需要注冊信息入庫user = userService.createUser(mobile);}// 3. 如果不為空，可以繼續下方業務，可以保存用戶會話信息String uToken = UUID.randomUUID().toString();redis.set(REDIS_USER_TOKEN + ":" + user.getId(), uToken);// 4. 用戶登錄注冊成功以后，刪除redis中的短信驗證碼redis.del(MOBILE_SMSCODE + ":" + mobile);// 5. 返回用戶信息，包含token令牌UsersVO usersVO = new UsersVO();BeanUtils.copyProperties(user, usersVO);usersVO.setUserToken(uToken);return GraceJSONResult.ok(usersVO);}

總結

以上是生活随笔為你收集整理的抖音实战~手机号验证码一键注册登录流程（限制手机终端登录）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。