如何用雲開發高效快捷地實現簡訊驗證碼登入？
阿新 • • 發佈：2020-09-08
雲開發擴充套件能力之簡訊驗證碼登入
簡訊驗證碼登入支援在客戶端使用簡訊驗證碼進行登入，封裝了簡訊驗證碼的生成、傳送、校驗和定時清理邏輯，幫助開發者進行鑑權。登入成功後，使用者身份將轉化為正式使用者。
本次實戰我們將使用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端很方便的實現了自定義登入並新增資料，大家快去試試吧！