雲開發擴展能力之短信驗證碼登錄
短信驗證碼登錄支持在客戶端使用短信驗證碼進行登錄，封裝了短信驗證碼的生成、發送、校驗和定時清理邏輯，幫助開發者進行鑒權。登錄成功后，用戶身份將轉化為正式用戶。
本次實戰我們將使用web雲開發實現短信驗證碼登錄並新增數據。
資源准備
- 雲開發環境
- 騰訊雲短信服務
- 短信驗證碼登錄擴展能力
- 靜態網站托管
一、雲開發環境開通
如果已有雲環境，可直接跳過這一步
打開雲開發控制台新建雲環境：
打開雲開發 CloudBase 控制台，打開左側菜單里的數據庫，點擊添加集合，新增一個test集合用於新增數據測試。
二、騰訊雲短信服務
- 開通短信服務
登錄騰訊雲短信控制台，這里的賬號不限於小程序的賬號，其他賬號也可以；也不限於是個人賬號還是企業賬號，不過賬號需要進行實名認證，個人認證用戶只能發送短信驗證碼、短信通知等，不能用於營銷短信；企業認證用戶可以發送短信驗證碼、短信通知、營銷短信等。如果賬號已經認證，直接申請短信服務就可以開通了。
- 創建簽名和正文模板
國內短信由簽名+正文組成，簽名符號為【】，發送短信內容時必須帶簽名。所以要發送短信，需要申請短信簽名和正文模板，兩者都通過審核后，就可以開始發送短信了。
創建簽名
打開左側菜單里的國內短信-簽名管理，點擊創建簽名，創建完簽名后，這個簽名內容之后會用到。
- 簽名用途：選擇【自用（簽名為本賬號實名認證的公司、網站、產品名等）】。
- 簽名類型：選擇【公眾號】。
- 簽名內容：輸入公司名或小程序名或公眾號名或產品名稱
- 證明類型：選擇公眾號設置頁面截圖，然后上傳小程序設置頁面截圖，可以參考案例；
創建正文模板
打開左側菜單里的國內短信-正文模板管理，點擊創建正文模板，創建完模板后，會有一個模板ID，這個之后會用到，也要記住你模板的變量位置。
- 模板名稱，建議帶有明確目的的名稱，比如“注冊通知”、“購買成功反饋”等；
- 短信類型：選擇【普通短信】
- 短信內容：比如“您正在申請手機注冊，驗證碼為：{1}，{2}分鍾內有效！”，這里的
{1}和{2}是你要在代碼里傳入的變量，變量的編碼必須是從{1}開始，傳入變量時也要按照順序傳入
三、短信驗證碼登錄擴展能力
打開雲開發 CloudBase 控制台，打開左側菜單里的擴展能力，點擊短信驗證碼登錄模塊進行安裝。
該擴展會創建以下雲資源：
雲函數：
- tcb-sms-auth
生成校驗碼並發送到指定手機號，以實現短信驗證碼登錄
雲數據庫：
- tcb-sms-auth
存儲驗證碼相關信息。
根據提示完成配置和安裝。
四、開通靜態網站托管
雲開發為開發者提供靜態網頁托管的能力，靜態資源（HTML、CSS、JavaScript、字體等）的分發由對象存儲 COS 和擁有多個邊緣網點的 CDN 提供支持。您可在騰訊雲控制台進行靜態網站的部署，提供給您的用戶訪問。
打開雲開發 CloudBase 控制台，打開左側菜單里的靜態網站托管，點擊開啟使用，然后等待幾分鍾便可初始化完成。
使用擴展
在 web 網站使用該擴展，請先在 雲開發控制台 將網站域名添加為當前環境的安全域名。
打開雲開發 CloudBase 控制台，復制靜態網站托管-基礎配置里的默認域名，然后打開左側菜單里的環境-安全配置，將默認域名添加為WEB安全域名。
一、使用方法
- 安裝擴展 SDK 到項目
- 方法一：通過包管理器引入
npm install --save @cloudbase/extension-sms
- 方法二：通過CDN引入
<script src="//unpkg.com/@cloudbase/extension-sms/built/index.umd.js"></script>
- 調用擴展 SDK
調用參數
| 名稱 | 類型 | 是否必須 | 說明 |
|---|---|---|---|
| action | String | 是 | 操作類型，支持 Send 和 Login |
| phone | String | 是 | 電話號碼 |
| app | Tcb | 是 | tcb實例 |
| smsCode | String | 否 | 短信驗證碼，action 為 Login 時需要傳入 |
| customDomain | String | 否 | HTTP觸發的自定義域名 |
返回內容
目前兩種 action 都沒有返回值。(本例采用 auth.hasLoginState() 來判斷登錄 )
二、編寫代碼
寫了一個簡單的demo來實現登錄並新增數據功能，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>騰訊雲雲開發短信驗證碼登錄</title>
<!-- Bootstrap core CSS-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.modal_content {
padding: 30px;
display: flex;
justify-content: center;
flex-direction: column;
}
.modal_content>div {
margin-bottom: 20px;
}
.modal_content>h5:first-child {
margin: 30px 0px;
}
#dialog label {
color: #666;
}
#phone1 {
display: block;
width: 100%;
height: 70px;
background: none;
padding-top: 30px;
border: 0;
outline: none;
text-align: center;
margin-top: -30px;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0;
}
.code1 {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
height: 70px;
background: none;
padding-top: 30px;
margin-top: -30px;
font-size: 16px;
border-bottom: 1px solid rgba(0, 0, 0, .2);
border-radius: 0;
}
#code1 {
width: calc(100% - 90px);
height: 55px;
background: none;
padding-top: 20px;
border: 0;
outline: none;
text-align: center;
margin-top: -20px;
font-size: 16px;
}
#btnSendCode1 {
width: 90px;
height: 30px;
padding: 0 5px;
margin: 0;
font-size: 14px;
text-align: center;
background: transparent;
border-radius: 30px;
color: #a07941;
border-color: #a07941;
}
::-webkit-input-placeholder {
/* WebKit browsers */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
font-size: 14px;
color: rgba(0, 0, 0, .4);
}
.next {
text-align: center;
margin: 20px 0;
}
.next button {
width: 100%;
height: 45px;
padding: 0;
margin: 0;
background: #007BFF;
color: #fff;
border: 0;
outline: none;
border-radius: 3px;
}
.content2{
display:none;
}
</style>
</head>
<body>
<div class="modal_content content1">
<h5>用戶登錄</h5>
<div>
<label for="phone1">手機號：</label><br />
<input id="phone1" type="text" autocomplete="off" placeholder="請輸入手機號" />
</div>
<div>
<label for="code1">驗證碼：</label>
<div class="code1">
<input id="code1" type="text" autocomplete="off" placeholder="短信驗證碼" />
<input id="btnSendCode1" type="button" class="btn btn-default" value="獲取驗證碼" onClick="sendMessage1()" />
</div>
</div>
<div class="next">
<button onClick="binding()">確定</button>
</div>
</div>
<div class="modal_content content2">
<h5>新增數據</h5>
<div>
<label for="text1">文本：</label><br />
<input id="text1" type="text" placeholder="請輸入新增的數據" />
</div>
<div class="next">
<button onClick="add()">確定</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//imgcache.qq.com/qcloud/tcbjs/1.7.1/tcb.js"></script>
<script src="//unpkg.com/@cloudbase/extension-sms/built/index.umd.js"></script>
<script>
const app = tcb.init({
env: 'env-jftmiosg'
});
const auth = app.auth();
var db = app.database();
tcb.registerExtension(window.extSms);
islogin();
var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;//手機號正則
var count = 60; //間隔函數，1秒執行
var InterValObj1; //timer變量，控制時間
var curCount1;//當前剩余秒數
function islogin(){
if (auth.hasLoginState()) {
// 此時已經登錄
$(".content1").hide();
$(".content2").show();
return true;
}
return false;
}
/*第一*/
async function sendMessage1() {
curCount1 = count;
var phone = $.trim($('#phone1').val());
if (!phoneReg.test(phone)) {
alert(" 請輸入有效的手機號碼");
return false;
}
//設置button效果，開始計時
$("#btnSendCode1").attr("disabled", "true");
$("#btnSendCode1").val(+ curCount1 + "秒再獲取");
InterValObj1 = window.setInterval(SetRemainTime1, 1000); //啟動計時器，1秒執行一次
//向后台發送處理數據
try {
await tcb.invokeExtension(extSms.name, {
action: 'Send',
app,
phone
});
} catch (err) {
console.log(JSON.stringify(err, null, 4));
}
}
function SetRemainTime1() {
if (curCount1 == 0) {
window.clearInterval(InterValObj1);//停止計時器
$("#btnSendCode1").removeAttr("disabled");//啟用按鈕
$("#btnSendCode1").val("重新發送");
}
else {
curCount1--;
$("#btnSendCode1").val(+ curCount1 + "秒再獲取");
}
}
/*提交*/
async function binding() {
var phone = $.trim($('#phone1').val());
var smsCode = $.trim($('#code1').val());
try {
await tcb.invokeExtension(extSms.name, {
action: 'Login',
app,
phone,
smsCode,
});
} catch (err) {
console.log(JSON.stringify(err, null, 4));
} finally {
//無論try catch結果如何還是繼續執行
if(islogin()){
alert("登錄成功，目前是正式用戶");
}else{
alert("登錄失敗，請檢查驗證碼");
}
}
}
async function add() {
try {
var text = $.trim($('#text1').val());
await db.collection("test").add({
text:text
}).then(res => {
alert("數據新增成功");
console.log(res);
})
.catch(e => {
alert("數據新增失敗");
console.log(e);
});
} catch (err) {
console.log(JSON.stringify(err, null, 4));
}
}
</script>
</body>
</html>
三、上傳部署
完成demo編寫后，將代碼上傳至靜態網站托管，完成部署。
- 控制台上傳
打開雲開發 CloudBase 控制台，打開左側菜單里的靜態網站托管，將剛剛編寫的文件sms.html上傳。
- CLI 工具上傳
CloudBase CLI 是一個開源的命令行界面交互工具，用於幫助用戶快速、方便的部署項目，管理雲開發資源。具體安裝步驟和使用方法可以訪問雲開發 CLI 工具文檔進行查看。
效果展示
- 發送短信
- 登錄驗證
- 新增數據
總結
通過上述步驟，利用雲開發提供的短信驗證碼登錄擴展能力，配合雲開發的SDK在web端很方便的實現了自定義登錄並新增數據，大家快去試試吧！