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組件無限可能
- 輕鬆教你搞定組件的拖拽, 縮放, 多控制點伸縮和拖拽數據上報
- 基於自然流佈局的可視化拖拽搭建平台設計方案