藉助雲開發實現小程序短信驗證碼的發送

最近在作小程序驗證碼登錄時，用到了短信發送驗證碼的需求，本身也研究了下，用雲開發結合雲函數來實現驗證碼短信發送仍是很方便的。

老規矩，先看效果圖

這是我調用騰訊雲的短信平臺發送的登錄驗證碼。核心代碼其實只有下面這麼多

是否是感受實現起來特別簡單，怎麼說呢，咱們代碼調用其實就這麼幾行，就能夠實現短信的發送，可是騰訊雲短信模板的審覈比較繁瑣，還有咱們先去申請短信模板，短信模板審覈經過後纔可使用。
咱們就先來講代碼實現，而後再帶你們簡單的學習下短信模板的申請。

一，安裝node類庫

其實咱們這裏用到了雲開發的雲函數，咱們是在雲函數裏調用短信發送的。爲何要在雲函數裏調用呢，由於咱們作短信發送，須要用到騰訊雲的一個短信發送的類庫，而這個類庫是node庫，因此只能在雲函數裏調用了。

在安裝這個類庫以前，咱們須要先建立一個雲函數，關於雲函數的建立，我其實已經講過不少遍了，不知道的同窗，去翻看下個人歷史文章，或者看下我錄製的雲開發入門視頻《5小時零基礎入門小程序雲開發》
我後面也會把這節內容錄製出視頻出來。

建立完雲函數後，右鍵點擊在終端中打開，打開終端後，在終端中輸入如下命令來安裝qcloudsms_js類庫

npm install qcloudsms_js

這裏須要注意，咱們安裝類庫前須要先下載node並配置npm環境變量，這裏我也有寫文章的
《nodeJs的安裝與npm全局環境變量的配置》

二，編寫雲函數

上面類庫安裝好之後，咱們就能夠來編寫雲函數了。
其實代碼編寫起來很簡單，就下面這些，對應的註解我也都已經寫出來了。

這裏要發送的手機號，和隨機驗證碼須要動態傳進來的。

三，調用雲函數

調用雲函數這裏也很簡單，咱們須要傳入手機號和驗證碼

手機號這裏，我作了一個輸入框，能夠動態的輸入。驗證碼的話，我寫了一個方法來隨機生成數字和字母的組合驗證碼。

我等下會把完整的代碼貼出來給你們。

這樣咱們輸入完手機號之後，點擊發送短信按鈕，就能夠成功的發送短信給到對應的手機號了。

• 能夠看到咱們生成的隨機驗證碼以下
  
  咱們手機接受到的短信驗證碼以下
  
  這樣咱們作登錄或者作校驗時，用戶手機短信收到的驗證碼，和咱們隨機生成的驗證碼同樣，即表明用戶驗證成功。
  完整的index.js代碼給你們貼出來

  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({
  //獲取隨機驗證碼，n表明幾位
  generateMixed(n) {
  var res = "";
  for (var i = 0; i < n; i++) {
    var id = Math.ceil(Math.random() * 35);
    res += chars[id];
  }
  return res;
  },
  //調用雲函數發送短信
  sendSMS() {
  if (phone.length != 11) {
    wx.showToast({
      icon: 'none',
      title: '輸入11位手機號',
    })
    return
  }
  let code = this.generateMixed(4)
  console.log('本地生成的驗證碼', code)
  wx.cloud.callFunction({
    name: "sendSms",
    data: {
      phone: phone,
      code: code //生成4位的驗證碼
    }
  }).then(res => {
    console.log('發送成功', res)
  }).catch(res => {
    console.log('發送失敗', res)
  })
  },
  //獲取要發送的手機號
  getPhone(event) {
  console.log(event.detail.value)
  phone = event.detail.value
  },
  })

  index.wxml以下
  
  到這裏咱們的短信驗證碼的發送就完整的實現了，是否是很簡單。

短信發送參數的設置與獲取

首先是去騰訊雲本身開通短信功能，而後須要本身去申請模板，填寫簽名。

我這裏把所須要的參數，都給你們標準出來了。你們只須要本身去官網設置對應的模板和簽名，而後審覈經過後，把對應的參數放到咱們的雲函數裏便可。

短信驗證的原理講解

在網上找了一張短信驗證的原理圖，以下

你們能夠對照這看下，這個原理圖。對應的源碼我上面其實已經給你們貼出來了。
若是你們以爲不完整，我也已經把完整源碼放到網盤裏了，有須要的同窗能夠到我公號裏回覆「短信」獲取源碼。

後面我還會分享更多小程序相關的知識點出來，請持續關注。