因客户一个业务系统比较老,是采用Asp语言开发的,需要短信验证码注册、登录、通知。于是二开该功能时选用腾讯云短信,查了官网云短信文档和度娘,都是php、java、python 版的腾讯短信接口,没有Asp版的,于是自己研究写了一个,思路主要分为几步:
第1步:申请腾讯云短信接口,拿到腾讯云短信接口的4个参数
SDK AppID:腾讯云短信接口App ID
App Key:腾讯云短信接口密匙
Sign:签名内容
tpl_id:短信模板内容ID
第2步:手机号填写与验证,短信发送
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="conn.asp"-->
<%
dim code_obtain_time
code_obtain_time = 120 '验证码重新获取时间:120秒
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--禁止浏览器手动触摸放大缩小-->
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>会员注册</title>
<style type="text/css">
<!--
html,body {margin: 0px; padding: 0px;}
#screen{float:left; width:100%; height: 100vh;}
.container{width: 300px; margin:0 auto;} /* 水平居中 */
.box{float:left; width:100%;}
.input-text{float:left; width:100%; height:48px; background:#fff; font-size:18px; color:#000; padding:0px 0px 0px 14px; border:1px #e8e8e8 solid; border-top:1px #333 solid; border-left:1px #333 solid; border-right:1px #ccc solid;border-bottom:1px #ccc solid;}
.btn-code{float:left; height:48px; background:#fff; font-size:14px; color:#000000; border:1px solid #999; border-radius:10px; margin-left:20px;}
.btn-submit{width:100%;height:48px; border:1px solid #ea2d1c; background:#c13f33; font-size:18px; color:#fff; border-radius:10px;}
#show_tel{float:left;width:100%; font-size:12px; color:#888; text-align:left; margin: 10px 0px 0px 0px;} /* 手机号相关提示 */
#show_code{float:left;width:100%; font-size:12px; color:#888; text-align:left; margin: 10px 0px 0px 0px;} /* 验证码相关提示 */
-->
</style>
<script type="text/javascript">
//checkSpace函数:判断输入是否为空
function checkSpace(checkstr) {
var str = '';
for(i = 0; i < checkstr.length; i++) {
str = str + ' ';
}
return (str == checkstr);
}
// 重新获取验证码 ------------
var code_obtain_time = <%=code_obtain_time%>; //验证码重新获取时间:120秒
code_obtain_time = parseInt(code_obtain_time);
var code_time = code_obtain_time;
function showTime(){
if ( code_time > 0 ){
document.getElementById("send_code").value = code_time + "秒后重新获取";
document.getElementById("send_code").disabled=true;
document.getElementById("send_code").style.background="#DDDDDD";
code_time = code_time - 1;
setTimeout("showTime()",1000);
}else{
document.getElementById("send_code").value = "重新获取";
document.getElementById("send_code").disabled=false;
document.getElementById("send_code").style.background="#EEEEEE";
code_time = code_obtain_time;
}
}
// ----------------------------
// 获取验证码 点击事件 -----------
function checkCode(){
var show_tel="";
var code="";
var tel=document.myform.tel.value;
if(checkSpace(tel)) {
show_tel="<font color='red'>请输入手机号</font>";
}else if( tel.length != 11 ){
show_tel="<font color='red'>手机号输入错误</font>";
}else{
var xmlhttp=false;
try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch (e){
try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
catch (e){
try{xmlhttp=new XMLHttpRequest();}
catch (e){}
}
}
xmlhttp.open("get","check_code.asp?tel=" + tel + "&t=" + new Date().getTime(), false);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
var RequestTxt = unescape(xmlhttp.responseText);
if (RequestTxt == "" || RequestTxt == "undefined" || RequestTxt == null){
showTime();
show_tel="<font color='red'>请求失败,请重新获取验证码</font>";
}else{
if (RequestTxt == "ok"){
showTime();
show_tel="";
}else{
show_tel=RequestTxt;
}
}
}else{
showTime();
show_tel="<font color='red'>请求失败,请重新获取验证码</font>";
}
}
xmlhttp.send(null);
}
if (show_tel!=""){
document.getElementById("show_tel").innerHTML=show_tel;
return false;
}
}
// ----------------------------
// 表单提交 点击事件 -------------
function checkForm(){
tel=document.myform.tel.value;
code=document.myform.code.value;
var show_tel="";
var show_code="";
if(checkSpace(tel)) {
show_tel="<font color='red'>请输入手机号</font>"
}else if( tel.length != 11 ){
show_tel="<font color='red'>手机号输入错误</font>";
}else if(checkSpace(code)) {
show_code="<font color='red'>请输入短信验证码</font>"
}else{
var xmlhttp=false;
try{xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");}
catch (e){
try{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
catch (e){
try{xmlhttp=new XMLHttpRequest();}
catch (e){}
}
}
xmlhttp.open("get","check_register.asp?tel=" + tel + "&code=" + code + "&t=" + new Date().getTime(), false);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4){
var RequestTxt = unescape(xmlhttp.responseText);
if (RequestTxt == "" || RequestTxt == "undefined" || RequestTxt == null){
show_code="<font color='red'>请求失败</font>";
}else{
if (RequestTxt == "ok"){
show_tel="";
show_code="";
}else{
if (RequestTxt == "tel_have"){
show_tel="<font color='red'>该手机号已注册过会员</font>";
}else if (RequestTxt == "code_error"){
show_code="<font color='red'>验证码输入错误</font>";
}else if (RequestTxt == "code_failure"){
show_code="<font color='red'>验证码已失效</font>";
}
}
}
}else{
show_code="<font color='red'>请求失败</font>";
}
}
xmlhttp.send(null);
}
if (show_tel!=""){
document.getElementById("show_tel").innerHTML=show_tel;
return false;
}
if (show_code!=""){
document.getElementById("show_code").innerHTML=show_code;
return false;
}
}
// ----------------------------
function checkShowTel(){ //手机输入框点击事件:点击后清空原 手机输入框 错误提示内容
document.getElementById("show_tel").innerHTML="";
}
function checkShowCode(){ //验证码输入框点击事件:点击后清空原 验证码输入框 错误提示内容
document.getElementById("show_code").innerHTML="";
}
</script>
</head>
<body>
<%
if request.form("action") = "register" then
'验证码和手机验证成功后,注册表单数据提交
tel = trim(request.form("tel"))
rs.open "select top 1 * from member where tel='" & tel & "'",conn,1,3
if not rs.bof and not rs.eof then
rs.addnew
rs("tel") = tel
rs("register_time") = now()
rs.update
response.write("<script language='javascript'>alert('会员注册提交成功,请等待我们的审核!');window.location.href='register.asp';</script>")
response.end
end if
rs.close
else
response.write "<div id='screen'>"
response.write "<div class='container' style='margin-top: 120px;'>"
response.write "<form name='myform' id='myform' method='post' action='register.asp'>"
response.write "<div class='box'>"
response.write "<div class='box'>"
response.write "<input type='number' name='tel' id='tel' value='' maxlength='11' oninput=""if(value.length>11)value=value.slice(0,11)"" placeholder='手机号' autocomplete='off' class='input-text' style='width:100%;' onClick=""return checkShowTel();"">"
response.write "</div>"
response.write "<div id='show_tel'></div>"
response.write "</div>"
response.write "<div class='box' style='margin-top: 20px;'>"
response.write "<div class='box'>"
response.write "<input type='number' name='code' id='code' value='' maxlength='4' oninput=""if(value.length>4)value=value.slice(0,4)"" placeholder='验证码' autocomplete='off' class='input-text' style='width:100px;' onClick=""return checkShowCode();"">"
response.write "<input type='button' name='send_code' id='send_code' value='获取验证码' class='btn-code' style='width:150px;' onClick='return checkCode();'>"
response.write "</div>"
response.write "<div id='show_code'></div>"
response.write "</div>"
response.write "<div class='box' style='margin-top: 20px;'>"
response.write "<input type='hidden' name='action' id='action' value='register'>"
response.write "<input type='submit' value='确认注册' onClick='return checkForm();' class='btn-submit'>"
response.write "</div>"
response.write "</form>"
response.write "</div>"
response.write "</div>"
end if
%>
</body>
</html>
<!--#include file="conn_end.asp"-->
第3步:短信发送 - 腾讯云短信接口与验证
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="conn.asp"-->
<!--#include file="sms_function.asp"-->
<%
sms_function.asp 短信发送必须的函数
tel=trim(request("tel"))
if isnull(tel) or isempty(tel) or tel="" then
response.write "<font color='red'>非法操作</font>"
response.end
end if
rs.open "select tel from member where tel='" & tel & "'",conn,1,1
if not rs.bof and not rs.eof then
response.write "<font color='red'>该手机号已注册过会员</font>"
response.end
else
appid = "在腾讯云官网下的 短信 > 应用列表 页面中"
appkey = "在腾讯云官网下的 短信 > 应用列表 页面中"
sign = "在腾讯云官网下的 短信 > 签名管理 页面中"
stpl_id = "在腾讯云官网下的 短信 > 正文模板管理 页面中
'以上4个参数值 换成您的腾讯云接口参数值
'具体内容详见 附件
'-- 2. 验证码、时间轴、腾讯云短信接口sig加密
'-- 3. 各项参数生成json 对应腾讯云接口要求的json格式
'-- 4. 短信发送到腾讯云接口、对发送返回后的数据进行json解析取得返回结果值
end if
rs.close
%>
<!--#include file="conn_end.asp"-->