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

最近在做小程序驗證碼登陸時,用到了短信發送驗證碼的需求,自己也研究了下,用雲開發結合雲函數來實現驗證碼短信發送還是很方便的。

老規矩,先看效果圖


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

是不是感覺實現起來特別簡單,怎麼說呢,我們代碼調用其實就這麼幾行,就可以實現短信的發送,但是騰訊雲短信模板的審覈比較繁瑣,還有我們先去申請短信模板,短信模板審覈通過後纔可以使用。
我們就先來說代碼實現,然後再帶大家簡單的學習下短信模板的申請。

一,安裝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如下

    到這裏我們的短信驗證碼的發送就完整的實現了,是不是很簡單。

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

首先是去騰訊雲自己開通短信功能,然後需要自己去申請模板,填寫簽名。

我這裏把所需要的參數,都給大家標準出來了。大家只需要自己去官網設置對應的模板和簽名,然後審覈通過後,把對應的參數放到我們的雲函數裏即可。

短信驗證的原理講解

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

大家可以對照這看下,這個原理圖。對應的源碼我上面其實已經給大家貼出來了。
如果大家覺得不完整,我也已經把完整源碼放到網盤裏了,有需要的同學可以到我公號裏回覆“短信”獲取源碼。

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章