시스템 - WeChat 애플릿에서 SMS 인증 코드를 사용하여 로그인하는 프로세스 및 코드에 대한 자세한 설명

WeChat 미니 프로그램에 로그인하기 위해 SMS 인증 코드를 받는 방법은 무엇인가요? 다음 코드는 자세히 설명되어 있으며 참고용으로 모두에게 공유합니다. 아래 그림의 효과를 살펴보세요. SMS 인증 코드 구현 프로세스는 나중에 체계적으로 소개됩니다.

저는 Java 개발자이고 백엔드는 springMvc

SMS 인증 코드 구현 프로세스를 사용합니다

1. 휴대폰 인증 코드를 생성하고 6자리 난수 문자열을 생성합니다.
2. SMS 플랫폼으로 휴대폰 번호와 인증 코드를 보내면 SMS 플랫폼에서 지정된 휴대폰 번호로 인증 코드를 보냅니다.
3. 나중에 인증할 수 있도록 휴대폰 번호 인증 코드와 작업 시간을 저장합니다.
4. 사용자가 입력한 휴대폰 번호 및 기타 등록 데이터를 수신합니다.
5. 제출된 인증 코드가 세션의 인증 코드와 일치하는지 비교하여 제출 작업이 유효한지 확인합니다.
6. 인증번호가 정확하고 유효기간 내에 요청이 통과되어 해당 업무가 처리됩니다.

미니 프로그램 코드

info.wxml

<!--info.wxml-->
<view class="container">
 
<view class="section">
<text>手机号码</text>
<input placeholder="请输入手机号码" type="number" maxlength="11" bindinput="inputPhoneNum" auto-focus />
<text wx:if="{{send}}" class="sendMsg" bindtap="sendMsg">发送</text>
<text wx:if="{{alreadySend}}" class="sendMsg" bindtap="sendMsg">{{second+"s"}}</text>
</view>
 
<view class="section">
<text>短信验证</text>
<input placeholder="短信验证码" type="number" bindinput="addCode" />
</view>
 
<view class="section">
<text>其他信息</text>
<input placeholder="需要提交的信息" bindinput="addOtherInfo" />
</view>
 
<button type="{{buttonType}}" disabled="{{disabled}}" bindtap="onSubmit">保存</button>
 
</view>

info.js

// info.js
const config = require('../../config/config.default.js')
 
Page({
  data: {
    send: false,
    alreadySend: false,
    second: 60,
    disabled: true,
    buttonType: 'default',
    phoneNum: '',
    code: '',
    otherInfo: ''
  },
  onReady: function () {
    wx.request({
      url: `${config.api + '/getSessionId.html'}`,
      header: { 
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'POST',
      success: function (res) {
        wx.setStorageSync('sessionId', 'JSESSIONID=' + res.data)
 
      }
    })
  },
// 手机号部分
  inputPhoneNum: function (e) {
    let phoneNum = e.detail.value
    if (phoneNum.length === 11) {
      let checkedNum = this.checkPhoneNum(phoneNum)
      if (checkedNum) {
        this.setData({
          phoneNum: phoneNum
        })
        console.log('phoneNum' + this.data.phoneNum)
        this.showSendMsg()
        this.activeButton()
      }
    } else {
      this.setData({
        phoneNum: ''
      })
      this.hideSendMsg()
    }
  },
 
  checkPhoneNum: function (phoneNum) {
    let str = /^1\d{10}$/
    if (str.test(phoneNum)) {
      return true
    } else {
      wx.showToast({
        title: '手机号不正确',
        image: '../../images/fail.png'
      })
      return false
    }
  },
 
  showSendMsg: function () {
    if (!this.data.alreadySend) {
      this.setData({
        send: true
      })
    }
  },
 
  hideSendMsg: function () {
    this.setData({
      send: false,
      disabled: true,
      buttonType: 'default'
    })
  },
 
  sendMsg: function () {
    var phoneNum = this.data.phoneNum;
    var sessionId = wx.getStorageSync('sessionId');
    wx.request({
      url: `${config.api + '/sendSms.html'}`,
      data: {
        phoneNum: phoneNum
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        "Cookie": sessionId
      },
      method: 'POST',
      success: function (res) {
        console.log(res)
      }
    })
    this.setData({
      alreadySend: true,
      send: false
    })
    this.timer()
  },
 
  timer: function () {
    let promise = new Promise((resolve, reject) => {
      let setTimer = setInterval(
        () => {
          this.setData({
            second: this.data.second - 1
          })
          if (this.data.second <= 0) {
            this.setData({
              second: 60,
              alreadySend: false,
              send: true
            })
            resolve(setTimer)
          }
        }
        , 1000)
    })
    promise.then((setTimer) => {
      clearInterval(setTimer)
    })
  },
 
// 其他信息部分
  addOtherInfo: function (e) {
    this.setData({
      otherInfo: e.detail.value
    })
    this.activeButton()
    console.log(&#39;otherInfo: &#39; + this.data.otherInfo)
  },
 
// 验证码
  addCode: function (e) {
    this.setData({
      code: e.detail.value
    })
    this.activeButton()
    console.log(&#39;code&#39; + this.data.code)
  },
 
 // 按钮
  activeButton: function () {
    let {phoneNum, code, otherInfo} = this.data
    console.log(code)
    if (phoneNum && code && otherInfo) {
      this.setData({
        disabled: false,
        buttonType: &#39;primary&#39;
      })
    } else {
      this.setData({
        disabled: true,
        buttonType: &#39;default&#39;
      })
    }
  },
 
  onSubmit: function () {
    var phoneNum = this.data.phoneNum;
    var code = this.data.code;
    var otherInfo = this.data.otherInfo;
    var sessionId = wx.getStorageSync(&#39;sessionId&#39;);
    wx.request({
      url: `${config.api + &#39;/addinfo.html&#39;}`,
      data: {
        phoneNum: phoneNum,
        code: code,
        otherInfo: otherInfo
      },
      header: {
        "Content-Type": "application/x-www-form-urlencoded",
        "Cookie": sessionId
      },
      method: &#39;POST&#39;,
      success: function (res) {
        console.log(res)
 
        if ((parseInt(res.statusCode) === 200) && res.data.message === &#39;pass&#39;) {
          wx.showToast({
            title: &#39;验证成功&#39;,
            icon: &#39;success&#39;
          })
        } else {
          wx.showToast({
            title: res.data.message,
            image: &#39;../../images/fail.png&#39;
          })
        }
      },
      fail: function (res) {
        console.log(res)
      }
    })
  }
})

미니 프로그램에는 세션 개념이 없으므로 http 세션을 가상화해야 한다는 점에 유의하세요.

1) Get the onReady의 서버 측 세션 ID, 로컬 캐시에 저장됨

2) http 요청이 시작될 때마다 헤더에 구성: "Cookie": sessionId

서버 측 코드

1 가져오기 sessionId

/**
	 * 获得sessionId
	 */
	@RequestMapping("/getSessionId")
	@ResponseBody
	public Object getSessionId(HttpServletRequest request) {
		try {
			HttpSession session = request.getSession();
			return session.getId();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

2 . SMS 인증 코드 보내기

/**
	 * 发送短信验证码
	 * @param number接收手机号码
	 */
	@RequestMapping("/sendSms")
	@ResponseBody
	public Object sendSms(HttpServletRequest request, String phoneNum) {
		try {
			JSONObject json = null;
			//生成6位验证码
			String verifyCode = String.valueOf(new Random().nextInt(899999) + 100000);
			//发送短信
			ZhenziSmsClient client = new ZhenziSmsClient("你的appId", "你的appSecret");
			String result = client.send(phoneNum, "您的验证码为:" + verifyCode + "，该码有效期为5分钟，该码只能使用一次！【短信签名】");
			json = JSONObject.parseObject(result);
			if(json.getIntValue("code") != 0)//发送短信失败
				return "fail";
			//将验证码存到session中,同时存入创建时间
			//以json存放，这里使用的是阿里的fastjson
			HttpSession session = request.getSession();
			json = new JSONObject();
			json.put("verifyCode", verifyCode);
			json.put("createTime", System.currentTimeMillis());
			// 将认证码存入SESSION
			request.getSession().setAttribute("verifyCode", json);
			return "success";
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

3 . 정보 제출 및 SMS 인증 코드 확인 apache php mysql

/**
	 * 注册
	 */
	@RequestMapping("/addinfo")
	@ResponseBody
	public Object addinfo(
			HttpServletRequest request, 
			String phoneNum, 
			String code, 
			String otherInfo) {
		JSONObject json = (JSONObject)request.getSession().getAttribute("verifyCode");
		if(!json.getString("verifyCode").equals(code)){
			return "验证码错误";
		}
		if((System.currentTimeMillis() - json.getLong("createTime")) > 1000 * 60 * 5){
			return "验证码过期";
		}
		//将用户信息存入数据库
		//这里省略
		return "success";
	}

관련 기사:

WeChat 애플릿 로그인 프로세스

WeChat 애플릿의 자세한 로그인 예(코드 포함)

관련 영상:

로그인 - 위챗 미니 프로그램 프로젝트 실용 영상 튜토리얼

위 내용은 시스템 - WeChat 애플릿에서 SMS 인증 코드를 사용하여 로그인하는 프로세스 및 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!