微信小程序中短信验证码登录全流程及代码

最新推荐文章于 2024-04-22 17:45:10 发布

chuanshenqm74397

最新推荐文章于 2024-04-22 17:45:10 发布

阅读量1.9k

点赞数 1

文章标签： php json 后端

原文链接：https://my.oschina.net/u/3919887/blog/1864039

版权

本文介绍了微信小程序中实现短信验证码登录的详细流程，包括后端使用SpringMvc发送验证码、存储Session以及验证用户输入的验证码。同时，文章指出小程序没有Session，需模拟HTTP Session，并给出了相关代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

才开始学习小程序，用到短信验证码登录，使用榛子云短信(smsow.zhenzikj.com)

效果:

我是java开发者，后端使用了springMvc

短信验证码实现流程

1、构造手机验证码，生成一个6位的随机数字串；
2、使用接口向短信平台发送手机号和验证码，然后短信平台再把验证码发送到制定手机号上
3、将手机号验证码、操作时间存入Session中，作为后面验证使用；
4、接收用户填写的验证码、手机号及其他注册数据；
5、对比提交的验证码与Session中的验证码是否一致，同时判断提交动作是否在有效期内；
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

最低0.47元/天解锁文章