速碼云短信接口嵌入網站：極簡實現教程
速碼云（SumCodeCloud）短信接口是常用的第三方短信服務，嵌入網站的核心是通過后端語言調用其 API 接口，實現「前端觸發請求→后端校驗并調用速碼云 API→返回結果」的流程。以下以 PHP（最通用的網站后端語言） 為例，提供極簡可運行的代碼示例，同時補充前端交互邏輯。
一、前置準備
注冊速碼云賬號：完成企業認證，獲取 API ID/API KEY（在速碼云控制臺「短信接口」模塊查看）；
配置短信模板：在速碼云后臺創建驗證碼模板（如：您的驗證碼是{code}，有效期5分鐘），記錄模板 ID；
服務器環境：確保網站服務器支持 PHP（5.6+），并開啟curl擴展（絕大多數虛擬主機 / 服務器默認支持）。
二、核心實現步驟（前端 + 后端）
1. 前端頁面（觸發驗證碼發送）
創建一個簡單的 HTML 頁面，包含手機號輸入框、發送按鈕、驗證碼輸入框，通過 AJAX 請求后端接口：
html
預覽
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>速碼云短信接口示例</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<div>
<label>手機號：</label>
<input type="tel" id="mobile" placeholder="請輸入11位手機號">
<button id="sendBtn">發送驗證碼</button>
</div>
<div style="margin-top: 10px;">
<label>驗證碼：</label>
<input type="text" id="code" placeholder="請輸入驗證碼">
<button id="verifyBtn">驗證</button>
</div>
<script>
// 發送驗證碼按鈕點擊事件
$('#sendBtn').click(function() {
const mobile = $('#mobile').val().trim();
// 簡單手機號校驗
if (!/^1[3-9]\d{9}$/.test(mobile)) {
alert('請輸入正確的手機號');
return;
}
// 禁用按鈕，防止重復點擊
$(this).attr('disabled', true).text('發送中...');
// AJAX請求后端接口
$.ajax({
url: 'send_sms.php', // 后端接口文件路徑
type: 'POST',
data: { mobile: mobile },
dataType: 'json',
success: function(res) {
if (res.code === 200) {
alert('驗證碼發送成功！');
// 60秒倒計時
let count = 60;
$('#sendBtn').text(count + '秒后重發');
const timer = setInterval(() => {
count--;
$('#sendBtn').text(count + '秒后重發');
if (count <= 0) {
clearInterval(timer);
$('#sendBtn').attr('disabled', false).text('發送驗證碼');
}
}, 1000);
} else {
alert('發送失?。? + res.msg);
$('#sendBtn').attr('disabled', false).text('發送驗證碼');
}
},
error: function() {
alert('網絡錯誤，請重試');
$('#sendBtn').attr('disabled', false).text('發送驗證碼');
}
});
});
// 驗證碼驗證按鈕（可選，僅演示）
$('#verifyBtn').click(function() {
const mobile = $('#mobile').val().trim();
const code = $('#code').val().trim();
$.ajax({
url: 'verify_sms.php',
type: 'POST',
data: { mobile: mobile, code: code },
dataType: 'json',
success: function(res) {
if (res.code === 200) {
alert('驗證成功！');
} else {
alert('驗證失?。? + res.msg);
}
}
});
});
</script>
</body>
</html>
2. 后端發送驗證碼接口（send_sms.php）
核心邏輯：接收前端手機號 → 調用速碼云短信 API → 存儲驗證碼（用于后續驗證）。
php
運行
<?php
// 1. 速碼云接口配置（替換為你的實際信息）
$apiId = "你的速碼云API ID"; // 控制臺獲取
$apiKey = "你的速碼云API KEY"; // 控制臺獲取
$templateId = "你的短信模板ID"; // 驗證碼模板ID
$signName = "你的短信簽名"; // 速碼云審核通過的簽名
// 2. 接收并校驗前端參數
$mobile = $_POST['mobile'] ?? '';
if (!preg_match('/^1[3-9]\d{9}$/', $mobile)) {
exit(json_encode(['code' => 400, 'msg' => '手機號格式錯誤']));
}
// 3. 生成6位驗證碼
$code = rand(100000, 999999);
// 4. 調用速碼云短信API（核心步驟）
$url = "https://api.sumcodecloud.com/sms/send"; // 速碼云官方接口地址（以實際為準）
$postData = [
'apiId' => $apiId,
'apiKey' => $apiKey,
'mobile' => $mobile,
'templateId' => $templateId,
'params' => json_encode(['code' => $code]), // 模板參數，需和模板匹配
'signName' => $signName
];
// 使用curl發送POST請求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postData));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 調試時關閉SSL驗證，生產環境開啟
$response = curl_exec($ch);
curl_close($ch);
// 5. 解析接口返回結果
$res = json_decode($response, true);
if (!$res) {
exit(json_encode(['code' => 500, 'msg' => '接口請求失敗']));
}
// 6. 速碼云返回成功則存儲驗證碼（這里用session，生產環境建議用Redis/數據庫）
session_start();
if ($res['code'] === 0) { // 速碼云成功碼以官方文檔為準
$_SESSION['sms_code_' . $mobile] = [
'code' => $code,
'expire' => time() + 300 // 5分鐘有效期
];
exit(json_encode(['code' => 200, 'msg' => '發送成功']));
} else {
exit(json_encode(['code' => 400, 'msg' => '發送失敗：' . $res['msg']]));
}
?>
3. 后端驗證碼驗證接口（verify_sms.php）
用于驗證用戶輸入的驗證碼是否正確：
php
運行
<?php
session_start();
// 1. 接收參數
$mobile = $_POST['mobile'] ?? '';
$code = $_POST['code'] ?? '';
// 2. 校驗參數
if (empty($mobile) || empty($code)) {
exit(json_encode(['code' => 400, 'msg' => '參數缺失']));
}
// 3. 獲取存儲的驗證碼
$stored = $_SESSION['sms_code_' . $mobile] ?? [];
if (empty($stored)) {
exit(json_encode(['code' => 400, 'msg' => '驗證碼不存在或已過期']));
}
// 4. 校驗驗證碼和有效期
if ($stored['code'] != $code) {
exit(json_encode(['code' => 400, 'msg' => '驗證碼錯誤']));
}
if ($stored['expire'] < time()) {
unset($_SESSION['sms_code_' . $mobile]); // 過期刪除
exit(json_encode(['code' => 400, 'msg' => '驗證碼已過期']));
}
// 5. 驗證成功，清除驗證碼（防止重復使用）
unset($_SESSION['sms_code_' . $mobile]);
exit(json_encode(['code' => 200, 'msg' => '驗證成功']));
?>
三、關鍵注意事項
接口地址確認：速碼云的正式接口地址請以官方文檔為準，上述https://api.sumcodecloud.com/sms/send為示例；
參數格式：params參數需為 JSON 字符串，且字段名要和短信模板中的變量（如{code}）完全一致；
安全防護：
生產環境需增加頻率限制（如單個手機號 1 分鐘內最多發送 1 次），防止盜刷；
建議將apiId/apiKey存儲在服務器配置文件中，不要直接寫在業務代碼里；
開啟 curl 的 SSL 驗證（刪除CURLOPT_SSL_VERIFYPEER, false），避免數據泄露；
存儲優化：示例中用session存儲驗證碼，生產環境建議用 Redis（支持過期時間，性能更高）。
四、測試步驟
將上述 3 個文件上傳到你的 PHP 服務器；
替換send_sms.php中的apiId/apiKey/templateId/signName為實際值；
訪問 HTML 頁面，輸入手機號點擊「發送驗證碼」，查看手機是否收到短信；
輸入驗證碼點擊「驗證」，測試驗證邏輯。
總結
速碼云短信接口嵌入核心是「前端觸發請求→后端調用 API→存儲驗證碼→驗證驗證碼」，核心依賴 curl 調用第三方 API；
關鍵配置項（API ID/KEY、模板 ID、簽名）必須與速碼云控制臺一致，否則接口調用失?。?BR>生產環境需補充頻率限制、SSL 驗證、安全存儲等防護措施，避免接口被惡意利用。
登錄
注冊