全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[泉州seo公司认准久澳]系统—微信小程序中利用短信验证码login实现流程及代

  微信小程序中如何获取短信验证码登录的?以下代码详细解说了,锡林浩特市小程序制作公司分享给大家参考,看看下图的效果,[泸州seo公司佳选久澳]分享两种除了支付宝接口、微信接口,免收款之外的免。后面将系统介绍短信验证码实现流程。[泉州seo公司认准久澳]

  我是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}}" 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('▼…△◆;otherInfo: '◇◁▼■; + this.data.otherInfo)
 },
// 验证码
 addCode: function (e) {
 this.setData({
 code○▲▪: e.detail.value
 })
 this☆▲.activeButton()
 console.log('code' + this◁◇…□.data.code)
 },
 // 按钮
 activeButton: function () {
 let {phoneNum, code, otherInfo} = this.data
 console.log(code)
 if (phoneNum &&-■▽◆; code &■-;& otherInfo) {
 this.setData({
 disabled=□○•: false,
 buttonType: '●■▽▪;primary'△◆•;
 })
 } else {
 this◇•….setData({
 disabled: true,
 buttonType: '▷◁●;default'
 })
 }
 },
 onSubmit: function () {
 var phoneNum = this△○.data.phoneNum;
 var code = this.data●….code◆☆;
 var otherInfo = this.data.otherInfo;
 var sessionId = wx.getStorageSync('▪☆••;sessionId');
 wx•…-□.request({
 url◇=□●: `${config.api + '▷□=;/addinfo.html'}`,
 data: {
 phoneNum: phoneNum■▷△▽,
 code■◁▽: code,
 otherInfo△◇: otherInfo
 }○◁,
 header: {
 "Content-Type"■★★;: "application/x-www-form-urlencoded"•■•▷;,
 "Cookie"=☆▷△;: sessionId
 }◇-□◆,
 method: 'POST'☆▪=▼;,
 success: function (res) {
 console.log(res)
 if ((parseInt(res.statusCode) === 200) && res.data…▼.message === '□★◇;pass'=☆▷;) {
 wx.showToast({
 title: '验证成功',
 icon▷☆•: '-□=;success'□▼;
 })
 } else {
 wx.showToast({
 title: res•◁.data…◆…◆.message,
 image-■★◆: '../.□▼△■./images/fail◇■◁….png'□=◆●;
 })
 }
 },
 fail: function (res) {
 console.log(res)
 }
 })
 }
})

 

  需要注意的是小程序没有session的概念★☆★◁,所以我们需要虚拟出http的session:

  1) 在onReady获取服务器端的sessionId★■▼▼, 并存储到本地缓存中

  2) 每次发起http请求时在header中构造: "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. 发送短信验证码

  

/**
	 * 发送短信验证码
	 * @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. 提交信息并验证短信验证码 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"△▽;
	}

 

  相关文章:
 

  微信小程序登陆流程

  微信小程序之登录实例详解(附代码)

  相关视频=△•◇:

  

login登录-微信小程序项目实战视频教程

  以上就是系统—微信小程序中利用短信验证码login实现流程及代码详解的详细内容,更多请关注久澳传媒编程栏目其它相关文章■▷!

[泉州seo公司认准久澳]系统—微信小程序中利用短信验证码login实现流程及代码详解

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。