版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領
文檔簡介
【移動應用開發(fā)技術(shù)】?微信小程序中如何獲取短信驗證碼登錄的
這篇文章給大家分享的是有關(guān)微信小程序中如何獲取短信驗證碼登錄的的內(nèi)容。在下覺得挺實用的,因此分享給大家做個參考,一起跟隨在下過來看看吧。微信小程序中如何獲取短信驗證碼登錄的?我是java開發(fā)者,后端使用了springMvc短信驗證碼實現(xiàn)流程1、構(gòu)造手機驗證碼,生成一個6位的隨機數(shù)字串;2、使用接口向短信平臺發(fā)送手機號和驗證碼,然后短信平臺再把驗證碼發(fā)送到制定手機號上3、將手機號驗證碼、操作時間存入Session中,作為后面驗證使用;4、接收用戶填寫的驗證碼、手機號及其他注冊數(shù)據(jù);5、對比提交的驗證碼與Session中的驗證碼是否一致,同時判斷提交動作是否在有效期內(nèi);6、驗證碼正確且在有效期內(nèi),請求通過,處理相應的業(yè)務。小程序代碼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">發(fā)送</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)每次發(fā)起http請求時在header中構(gòu)造:"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.發(fā)送短信驗證碼/**
*
發(fā)送短信驗證碼
*
@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);
//發(fā)送短信
ZhenziSmsClient
client
=
new
ZhenziSmsClient("你的appId",
"你的appSecret");
String
result
=
client.send(phoneNum,
"您的驗證碼為:"
+
verifyCode
+
",該碼有效期為5分鐘,該碼只能使用一次!【短信簽名】");
json
=
JSONObject.parseObject(result);
if(json.getIntValue("code")
!=
0)//發(fā)送短信失敗
return
"fail";
//將驗證碼存到session中,同時存入創(chuàng)建時間
//以json存放,這里使用的是阿里的fastjson
HttpSession
session
=
request.getSession();
json
=
new
JSONObject();
json.put("verifyCode",
verifyCode);
json.put("createTime",
System.currentTimeMillis());
//
將認證碼存入SESSION
request.getSession().setAttrib
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年降臺銑床合作協(xié)議書
- 私人公司用人合同模板
- 住建部建房合同模板
- 乍浦市維修合同模板
- 書設計排版合同模板
- 挖魚塘包干合同模板
- 潔具訂購合同模板
- 畫框裝裱合同模板
- 淳安保潔勞動合同模板
- 皮包訂貨合同模板
- 2023年廣州市教育系統(tǒng)招聘優(yōu)才計劃筆試真題
- 黑龍江省大慶市2025屆高三年級第一次教學質(zhì)量檢測語文試題(解析版)
- 2024分布式光伏電站技術(shù)方案
- 人教版(2024)數(shù)學七年級上冊3.1列代數(shù)式表示數(shù)量關(guān)系第1課時《代數(shù)式》教學課件
- 部編小語五上《圓明園的毀滅》學習任務群教學設計
- 2024至2030年陜西省煤炭工業(yè)前景預測及投資研究報告
- 《我們班四歲了》(第一課時)教學設計四年級上冊道德與法治第1課統(tǒng)編版
- 2024中國通信服務股份限公司招聘易考易錯模擬試題(共200題)試卷后附參考答案
- 2023年海南高考卷生物試題(答案)
- 2024年新人教版七年級上冊歷史 第14課 絲綢之路的開通與經(jīng)營西域 教學課件
- 2025年天津市高考語文復習 正確運用修辭方法 課件
評論
0/150
提交評論