nest.js + sms 實現簡訊驗證碼登入
theme: vue-pro
hi, 大家好, 我是徐小夕, 新的一年, 你又博學了嗎?
今天和大家分享一下使用 nodejs
實現簡訊驗證碼登入的方案, 通過對該方案的實現大家可以可以對 nodejs
及其相關生態有一個更深入的理解.
好啦, 話不多說, 我們開始實現.
實現方案
為了更高效的開發 nodejs
應用, 這裡我選擇 nest.js
作為服務端框架, 同時使用騰訊雲的簡訊服務:
具體實現流程如下:
詳細流程如下:
- 使用者訪問網站登入頁面, 輸入手機號觸發驗證碼
- node伺服器收到請求後, 拼接所需引數(具體在下文會詳細介紹), 請求第三方簡訊服務平臺
- 第三方簡訊服務平臺校驗, 通過後下發對應簡訊
- 使用者在網站輸入收到的驗證碼, 請求登入介面完成登入
相信大家對第一步沒有太大疑問, 接下來我詳細介紹幾個核心的實現過程.
1. 簡訊服務的配置流程
由於我使用的是騰訊雲的簡訊服務, 所以需要按照約定來完成以下配置:
- 建立簡訊簽名
傳送簡訊內容時必須帶簽名.
- 建立簡訊模版
簡訊模版可以讓我們建立自定義的簡訊內容, 還可以建立動態內容, 大家感興趣可以研究一下.
- 建立應用(一般使用預設即可)
2. nodejs伺服器向簡訊服務平臺發起簡訊呼叫
以上配置完成並稽核通過之後, 我們就可以使用 nodejs
愉快的傳送簡訊了. 這裡我們需要安裝騰訊雲的sdk:
```bash
nest專案中
npm install tencentcloud-sdk-nodejs --save ```
然後在 nest
服務端儲存上一步獲取的:
- 使用者手機號
- SmsSdkAppId(應用id)
- TemplateId(模版id)
- SignName(簽名內容)
- TemplateParamSet(需要傳送的驗證碼)
核心程式碼如下:
```js
/*
* 傳送手機驗證碼
* @param params 請求體
/
async registerCode(params: any): Promise
const code = `${rand(1000,9999)}`;
phoneCodeList[phone] = code;
const smsParams = {
"PhoneNumberSet": [
`+86${phone}`
],
"SmsSdkAppId": "xxxxx",
"TemplateId": "12*****",
"SignName": "dooring服務",
"TemplateParamSet": [code]
};
try {
const result = await client.SendSms(smsParams);
if(result?.SendStatusSet.Code === 'Ok') {
return {
code: 200,
msg: 'Success',
};
}else {
return {
code: 500,
msg: `Service error: ${result?.SendStatusSet.Message}`,
};
}
}catch(err) {
return {
code: 500,
msg: `Service error: ${err}`
};
}
} ```
以上是用 nest
寫的一個簡單的 service
邏輯, 主要功能是傳送使用者手機號和簽名引數到第三方簡訊平臺, 下發簡訊. TemplateParamSet
欄位為一個數組, 陣列長度取決於我們的簡訊模版中動態變數的配置, 如下:
如果我們配置的模版內容中有2個變數, 那麼TemplateParamSet
欄位 的陣列為2項.
3. nodejs實現簡訊驗證碼驗證
最後一步比較簡單. 我們只需要把使用者填寫的驗證碼和我們伺服器生成的驗證碼進行比對即可, 我們可以使用 redis
來快取驗證碼.
最終的實現效果如下:
當然大家可以用自己熟悉的任何 nodejs
框架來實現以上功能(如koa, egg).
更多推薦
- 推薦! 使用react-cropper-pro實現圖片裁切壓縮上傳
- Dooring無程式碼搭建平臺技術演進之路
- nest.js sms 實現簡訊驗證碼登入
- 2022 年10個最佳 Node.js CMS 平臺推薦
- 面試官: 如何讓localStorage支援過期時間設定?
- 前端進階: 如何用javascript儲存函式?
- 前端推薦!從零開發一套基於React的載入動畫庫
- lerna dumi eslint多包管理實踐
- 5分鐘教你快速掌握Github Action持續整合
- 從零開發一款輕量級滑動驗證碼外掛
- 推薦!一款支援pc端&移動端的滑動驗證元件
- javascript如何實現類似西瓜影片的影片佇列自動播放?
- 學會這幾招,輕鬆讓你的github脫穎而出
- 前端覆盤: iframe跨頁通訊和前端實現檔案下載
- 從零開發一款自動提取網頁html並一鍵轉換為md檔案的工具(vue原始碼版)
- 前端: 輕鬆教你使用純css實現水波動畫
- 看了10款文件編輯器之後, 我決定...
- 2021如何讓你的Table元件無限可能
- 輕鬆教你搞定元件的拖拽, 縮放, 多控制點伸縮和拖拽資料上報
- 基於自然流佈局的視覺化拖拽搭建平臺設計方案