利用雲開發提供的短信驗證碼登入擴充能力,配合雲開發的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端很友善的實作了自定義登入并新增資料,大家快去試試吧!