天天看點

如何用雲開發高效快捷地實作短信驗證碼登入?

利用雲開發提供的短信驗證碼登入擴充能力,配合雲開發的SDK在web端很友善的實作了自定義登入并新增資料

短信驗證碼登入支援在用戶端使用短信驗證碼進行登入,封裝了短信驗證碼的生成、發送、校驗和定時清理邏輯,幫助開發者進行鑒權。登入成功後,使用者身份将轉化為正式使用者。

本次實戰我們将使用web雲開發實作短信驗證碼登入并新增資料。

雲開發環境

騰訊雲短信服務

短信驗證碼登入擴充能力

靜态網站托管

如果已有雲環境,可直接跳過這一步

打開雲開發控制台建立雲環境:

如何用雲開發高效快捷地實作短信驗證碼登入?

打開雲開發 CloudBase 控制台,打開左側菜單裡的資料庫,點選添加集合,新增一個<code>test</code>集合用于新增資料測試。

如何用雲開發高效快捷地實作短信驗證碼登入?

開通短信服務

登入騰訊雲短信控制台,這裡的賬号不限于小程式的賬号,其他賬号也可以;也不限于是個人賬号還是企業賬号,不過賬号需要進行實名認證,個人認證使用者隻能發送短信驗證碼、短信通知等,不能用于營銷短信;企業認證使用者可以發送短信驗證碼、短信通知、營銷短信等。如果賬号已經認證,直接申請短信服務就可以開通了。

建立簽名和正文模闆

國内短信由簽名+正文組成,簽名符号為【】,發送短信内容時必須帶簽名。是以要發送短信,需要申請短信簽名和正文模闆,兩者都通過稽核後,就可以開始發送短信了。

建立簽名

打開左側菜單裡的國内短信-簽名管理,點選建立簽名,建立完簽名後,這個<code>簽名内容</code>之後會用到。

簽名用途:選擇【自用(簽名為本賬号實名認證的公司、網站、産品名等)】。

簽名類型:選擇【公衆号】。

簽名内容:輸入公司名或小程式名或公衆号名或産品名稱

證明類型:選擇公衆号設定頁面截圖,然後上傳小程式設定頁面截圖,可以參考案例;

如何用雲開發高效快捷地實作短信驗證碼登入?

建立正文模闆

打開左側菜單裡的國内短信-正文模闆管理,點選建立正文模闆,建立完模闆後,會有一個模闆<code>ID</code>,這個之後會用到,也要記住你模闆的變量位置。

模闆名稱,建議帶有明确目的的名稱,比如“注冊通知”、“購買成功回報”等;

短信類型:選擇【普通短信】

短信内容:比如“您正在申請手機注冊,驗證碼為:{1},{2}分鐘内有效!”,這裡的<code>{1}</code>和<code>{2}</code>是你要在代碼裡傳入的變量,變量的編碼必須是從{1}開始,傳入變量時也要按照順序傳入

如何用雲開發高效快捷地實作短信驗證碼登入?

打開雲開發 CloudBase 控制台,打開左側菜單裡的擴充能力,點選短信驗證碼登入子產品進行安裝。

如何用雲開發高效快捷地實作短信驗證碼登入?

該擴充會建立以下雲資源:

雲函數:

tcb-sms-auth

生成校驗碼并發送到指定手機号,以實作短信驗證碼登入

雲資料庫:

存儲驗證碼相關資訊。

根據提示完成配置和安裝。

雲開發為開發者提供靜态網頁托管的能力,靜态資源(HTML、CSS、JavaScript、字型等)的分發由對象存儲 COS 和擁有多個邊緣網點的 CDN 提供支援。您可在騰訊雲控制台進行靜态網站的部署,提供給您的使用者通路。

打開雲開發 CloudBase 控制台,打開左側菜單裡的靜态網站托管,點選開啟使用,然後等待幾分鐘便可初始化完成。

如何用雲開發高效快捷地實作短信驗證碼登入?

在 web 網站使用該擴充,請先在 雲開發控制台 将網站域名添加為目前環境的安全域名。

打開雲開發 CloudBase 控制台,複制靜态網站托管-基礎配置裡的預設域名,然後打開左側菜單裡的環境-安全配置,将預設域名添加為WEB安全域名。

如何用雲開發高效快捷地實作短信驗證碼登入?

安裝擴充 SDK 到項目

方法一:通過包管理器引入

方法二:通過CDN引入

調用擴充 SDK

調用參數

名稱

類型

是否必須

說明

action

String

操作類型,支援 Send 和 Login

phone

電話号碼

app

Tcb

tcb執行個體

smsCode

短信驗證碼,action 為 Login 時需要傳入

customDomain

HTTP觸發的自定義域名

傳回内容

目前兩種 action 都沒有傳回值。(本例采用 <code>auth.hasLoginState()</code> 來判斷登入 )

寫了一個簡單的demo來實作登入并新增資料功能,代碼如下:

完成demo編寫後,将代碼上傳至靜态網站托管,完成部署。

控制台上傳

打開雲開發 CloudBase 控制台,打開左側菜單裡的靜态網站托管,将剛剛編寫的檔案<code>sms.html</code>上傳。

如何用雲開發高效快捷地實作短信驗證碼登入?

CLI 工具上傳

CloudBase CLI 是一個開源的指令行界面互動工具,用于幫助使用者快速、友善的部署項目,管理雲開發資源。具體安裝步驟和使用方法可以通路雲開發 CLI 工具文檔進行檢視。

發送短信

如何用雲開發高效快捷地實作短信驗證碼登入?

登入驗證

如何用雲開發高效快捷地實作短信驗證碼登入?

新增資料

如何用雲開發高效快捷地實作短信驗證碼登入?

通過上述步驟,利用雲開發提供的短信驗證碼登入擴充能力,配合雲開發的SDK在web端很友善的實作了自定義登入并新增資料,大家快去試試吧!

繼續閱讀