最近在做小程序驗(yàn)證碼登陸時(shí)，用到了短信發(fā)送驗(yàn)證碼的需求，自己也研究了下，用云開(kāi)發(fā)結(jié)合云函數(shù)來(lái)實(shí)現(xiàn)驗(yàn)證碼短信發(fā)送還是很方便的。

老規(guī)矩，先看效果圖

這是我調(diào)用騰訊云的短信平臺(tái)發(fā)送的登陸驗(yàn)證碼。核心代碼其實(shí)只有下面這么多

是不是感覺(jué)實(shí)現(xiàn)起來(lái)特別簡(jiǎn)單，怎么說(shuō)呢，我們代碼調(diào)用其實(shí)就這么幾行，就可以實(shí)現(xiàn)短信的發(fā)送，但是騰訊云短信模板的審核比較繁瑣，還有我們先去申請(qǐng)短信模板，短信模板審核通過(guò)后才可以使用。
我們就先來(lái)說(shuō)代碼實(shí)現(xiàn)，然后再帶大家簡(jiǎn)單的學(xué)習(xí)下短信模板的申請(qǐng)。

一，安裝node類(lèi)庫(kù)

其實(shí)我們這里用到了云開(kāi)發(fā)的云函數(shù)，我們是在云函數(shù)里調(diào)用短信發(fā)送的。為什么要在云函數(shù)里調(diào)用呢，因?yàn)槲覀冏龆绦虐l(fā)送，需要用到騰訊云的一個(gè)短信發(fā)送的類(lèi)庫(kù)，而這個(gè)類(lèi)庫(kù)是node庫(kù)，所以只能在云函數(shù)里調(diào)用了。

在安裝這個(gè)類(lèi)庫(kù)之前，我們需要先創(chuàng)建一個(gè)云函數(shù)，關(guān)于云函數(shù)的創(chuàng)建，我其實(shí)已經(jīng)講過(guò)很多遍了，不知道的同學(xué)，去翻看下我的歷史文章，或者看下我錄制的云開(kāi)發(fā)入門(mén)視頻《5小時(shí)零基礎(chǔ)入門(mén)小程序云開(kāi)發(fā)》

我后面也會(huì)把這節(jié)內(nèi)容錄制出視頻出來(lái)。

創(chuàng)建完云函數(shù)后，右鍵點(diǎn)擊在終端中打開(kāi)，打開(kāi)終端后，在終端中輸入以下命令來(lái)安裝qcloudsms_js類(lèi)庫(kù)

npm install qcloudsms_js

這里需要注意，我們安裝類(lèi)庫(kù)前需要先下載node并配置npm環(huán)境變量，這里我也有寫(xiě)文章的
《nodeJs的安裝與npm全局環(huán)境變量的配置》

二，編寫(xiě)云函數(shù)

上面類(lèi)庫(kù)安裝好以后，我們就可以來(lái)編寫(xiě)云函數(shù)了。

其實(shí)代碼編寫(xiě)起來(lái)很簡(jiǎn)單，就下面這些，對(duì)應(yīng)的注解我也都已經(jīng)寫(xiě)出來(lái)了。

這里要發(fā)送的手機(jī)號(hào)，和隨機(jī)驗(yàn)證碼需要?jiǎng)討B(tài)傳進(jìn)來(lái)的。

三，調(diào)用云函數(shù)

調(diào)用云函數(shù)這里也很簡(jiǎn)單，我們需要傳入手機(jī)號(hào)和驗(yàn)證碼

手機(jī)號(hào)這里，我做了一個(gè)輸入框，可以動(dòng)態(tài)的輸入。驗(yàn)證碼的話，我寫(xiě)了一個(gè)方法來(lái)隨機(jī)生成數(shù)字和字母的組合驗(yàn)證碼。

我等下會(huì)把完整的代碼貼出來(lái)給大家。

這樣我們輸入完手機(jī)號(hào)以后，點(diǎn)擊發(fā)送短信按鈕，就可以成功的發(fā)送短信給到對(duì)應(yīng)的手機(jī)號(hào)了。

可以看到我們生成的隨機(jī)驗(yàn)證碼如下

我們手機(jī)接受到的短信驗(yàn)證碼如下

這樣我們做登陸或者做校驗(yàn)時(shí)，用戶(hù)手機(jī)短信收到的驗(yàn)證碼，和我們隨機(jī)生成的驗(yàn)證碼一樣，即代表用戶(hù)驗(yàn)證成功。

完整的index.js代碼給大家貼出來(lái)

var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
let phone = ''
Page({
//獲取隨機(jī)驗(yàn)證碼，n代表幾位
generateMixed(n) {
var res = "";
for (var i = 0; i < n; i++) {
 var id = Math.ceil(Math.random() * 35);
 res += chars[id];
}
return res;
},
//調(diào)用云函數(shù)發(fā)送短信
sendSMS() {
if (phone.length != 11) {
 wx.showToast({
 icon: 'none',
 title: '輸入11位手機(jī)號(hào)',
 })
 return
}
let code = this.generateMixed(4)
console.log('本地生成的驗(yàn)證碼', code)
wx.cloud.callFunction({
 name: "sendSms",
 data: {
 phone: phone,
 code: code //生成4位的驗(yàn)證碼
 }
}).then(res => {
 console.log('發(fā)送成功', res)
}).catch(res => {
 console.log('發(fā)送失敗', res)
})
},
//獲取要發(fā)送的手機(jī)號(hào)
getPhone(event) {
console.log(event.detail.value)
phone = event.detail.value
},
})

index.wxml如下

到這里我們的短信驗(yàn)證碼的發(fā)送就完整的實(shí)現(xiàn)了，是不是很簡(jiǎn)單。

短信發(fā)送參數(shù)的設(shè)置與獲取

首先是去騰訊云自己開(kāi)通短信功能，然后需要自己去申請(qǐng)模板，填寫(xiě)簽名。

我這里把所需要的參數(shù)，都給大家標(biāo)準(zhǔn)出來(lái)了。大家只需要自己去官網(wǎng)設(shè)置對(duì)應(yīng)的模板和簽名，然后審核通過(guò)后，把對(duì)應(yīng)的參數(shù)放到我們的云函數(shù)里即可。

短信驗(yàn)證的原理講解

在網(wǎng)上找了一張短信驗(yàn)證的原理圖，如下

大家可以對(duì)照這看下，這個(gè)原理圖。對(duì)應(yīng)的源碼我上面其實(shí)已經(jīng)給大家貼出來(lái)了。

如果大家覺(jué)得不完整，我也已經(jīng)把完整源碼放到網(wǎng)盤(pán)里了，有需要的同學(xué)可以到我公號(hào)里回復(fù)“短信”獲取源碼。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。