阿里云短信驗證碼接入寫法


這個文件夾全部放進去
<li>
<div class="layui-form-item">
<label style="padding: 9px 0;" class="layui-form-label"><span>*</span> 聯(lián)系電話:</label>
<div class="layui-input-block">
<div style="display: flex;margin-bottom:10px">
<input type="text" name="data[lxfs]" id="phone" lay-verify="required|phone" autocomplete="off" placeholder="請輸入聯(lián)系方式" class="layui-input">
<input style="border-radius: 30px;" id="btnSendCode1" type="button" class="layui-btn layui-btn-normal" value="獲取驗證碼" onClick="sendMessage1()" />
</div>
<input style="margin-left: 10px;width: 215px;" type="text" name="yzm" id="yzm" lay-verify="required|yzm" autocomplete="off" placeholder="驗證碼" class="layui-input">
</div>
</div>
</li>5.js部分代碼
<script>
var count = 60; //間隔函數(shù),1秒執(zhí)行
var InterValObj1; //timer變量,控制時間
var curCount1;//當前剩余秒數(shù)
var yzm = '';
/*第一*/
function sendMessage1() {
curCount1 = count;
var phone = $.trim($('#phone').val());
//設置button效果,開始計時
$("#btnSendCode1").attr("disabled", "true");
$("#btnSendCode1").val( + curCount1 + "s");
InterValObj1 = window.setInterval(SetRemainTime1, 1000); //啟動計時器,1秒執(zhí)行一次
var info = '';
$.ajax({
url: '{dr_url("special/send/index")}',//這里是你自己寫的請求api的方法。里面是阿里云獲取短信的方式
type: 'POST',
data: {
phone: phone//手機號
},
success: function (data) {
info = JSON.parse(data);
console.log(info,'info');
console.log(data,'data');
if (info.code == 1){
layer.msg('驗證碼發(fā)送成功!');
yzm = info.yzm;
}
if (info.code == 0){
layer.msg(info.msg);
}
}
});
}
function SetRemainTime1() {
if (curCount1 == 0) {
window.clearInterval(InterValObj1);//停止計時器
$("#btnSendCode1").removeAttr("disabled");//啟用按鈕
$("#btnSendCode1").val("重新發(fā)送");
}
else {
curCount1--;
$("#btnSendCode1").val( + curCount1 + "s");
}
}
</script>6.php部分代碼,這里就需要把你下載的sdk解壓放到你的網(wǎng)站目錄里面,我這里是放到根目錄下面,php里面的代碼需要修改的,都以漢字進行描述,其他的不需要修改,如需要進行后臺驗證,可以把驗證碼存入session,然后在session中進行驗證
<?php
/**
* 二次開發(fā)時可以修改本文件,不影響升級覆蓋
*/
require 'Vendor/autoload.php';//入口文件
use AlibabaCloud\Client\AlibabaCloud;//引用的類
use AlibabaCloud\Client\Exception\ClientException;
use AlibabaCloud\Client\Exception\ServerException;
class Send extends \Poscms\Home\Module {
private function isphone($phone){
if (!is_numeric($phone)) {
return false;
}
return preg_match('#^13[\d]{9}$|^14[5,7]{1}\d{8}$|^15[^4]{1}\d{8}$|^17[0,6,7,8]{1}\d{8}$|^18[\d]{9}$#', $phone) ? true : false;
}
public function index() {
$phone = $this->input->post('phone');
$code = rand('111111','999999');//生成6位驗證碼
$TemplateParam = json_encode(['code'=>$code]);
if (!$this->isphone($phone)){//這里是用來判斷你輸入的手機號格式是否正確
echo json_encode(['code'=>0,'msg'=>'手機號碼錯誤']);
return false;
}
AlibabaCloud::accessKeyClient('這里是你申請是accessid', '這里是你申請的accesskey')
->regionId('cn-hangzhou')
->asDefaultClient();
try {
$result = AlibabaCloud::rpc()
->product('Dysmsapi')
// ->scheme('https') // https | http
->version('2017-05-25')
->action('SendSms')
->method('POST')
->host('dysmsapi.aliyuncs.com')
->options([
'query' => [
'RegionId' => "cn-hangzhou",
'PhoneNumbers' => $phone,//這里是前臺輸入的手機號
'SignName' => '這里是你申請的簽名',
'TemplateCode' => '這里是你創(chuàng)建的模版id',
'TemplateParam' => $TemplateParam,這里是其他的參數(shù),就是你發(fā)送的驗證碼
],
])
->request();
$array = $result->toArray();
if ($array['Code'] == 'OK'){
echo json_encode(['code' => 1,'yzm' => $code]);
}else{
echo json_encode(['code' => 0,'msg' => '驗證碼發(fā)送失?。≌堉匦芦@?。?#39;]);
}
} catch (ClientException $e) {
echo $e->getErrorMessage() . PHP_EOL;
} catch (ServerException $e) {
echo $e->getErrorMessage() . PHP_EOL;
}
}
}
在阿里云短信服務內(nèi)夠買短信,并創(chuàng)建模版以及短信簽名,具體流程請查看阿里云手冊
2.在阿里云短信服務內(nèi)夠買短信,并創(chuàng)建模版以及短信簽名,具體流程請查看阿里云手冊
3.在短信控制臺->概覽中點擊accesskey,申請key以及id,使用子賬戶去創(chuàng)建,這樣比較安全,具體操作方法,參考
https://help.aliyun.com/document_detail/154750.html?spm=5176.12207334.0.0.58201cbeJSzwdo
4.下載阿里云sdk,可使用comporse安裝,也可以直接下載我提供的安裝包 https://help.aliyun.com/document_detail/53111.html?spm=a2c1g.8271268.10000.121.772fdf2567QDiv,我下載好的安裝包在文末需要的可以自己下載,個人建議使用comporse安裝,當然我下載的也是一樣哈。
5.開始寫代碼(PS所有代碼都有,基本不需要你進行修改,只需要修改js,ajax請求的發(fā)送驗證碼的接口以及修改方法里面阿里云對應申請的參數(shù))
前臺html部分,我這里使用了layui的樣式以及驗證方法,如果需要自行去網(wǎng)下載包,然后放到static目錄下面,把layui.js跟layui.css引用進去就可以了
由于一部分發(fā)送不出去現(xiàn)在補上,文件也可以在這里下載,最好是用comporse安裝
vendor
看看,學習學習
學習學習
感謝分享,樓主長命百歲
看看大佬是什么弄的