聯(lián)系官方銷售客服
1835022288
028-61286886
阿里云短信驗(yàn)證碼接入寫法
這個文件夾全部放進(jìn)去
<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="獲取驗(yàn)證碼" onClick="sendMessage1()" /> </div> <input style="margin-left: 10px;width: 215px;" type="text" name="yzm" id="yzm" lay-verify="required|yzm" autocomplete="off" placeholder="驗(yàn)證碼" class="layui-input"> </div> </div> </li>
5.js部分代碼
<script> var count = 60; //間隔函數(shù),1秒執(zhí)行 var InterValObj1; //timer變量,控制時間 var curCount1;//當(dāng)前剩余秒數(shù) var yzm = ''; /*第一*/ function sendMessage1() { curCount1 = count; var phone = $.trim($('#phone').val()); //設(shè)置button效果,開始計(jì)時 $("#btnSendCode1").attr("disabled", "true"); $("#btnSendCode1").val( + curCount1 + "s"); InterValObj1 = window.setInterval(SetRemainTime1, 1000); //啟動計(jì)時器,1秒執(zhí)行一次 var info = ''; $.ajax({ url: '{dr_url("special/send/index")}',//這里是你自己寫的請求api的方法。里面是阿里云獲取短信的方式 type: 'POST', data: { phone: phone//手機(jī)號 }, success: function (data) { info = JSON.parse(data); console.log(info,'info'); console.log(data,'data'); if (info.code == 1){ layer.msg('驗(yàn)證碼發(fā)送成功!'); yzm = info.yzm; } if (info.code == 0){ layer.msg(info.msg); } } }); } function SetRemainTime1() { if (curCount1 == 0) { window.clearInterval(InterValObj1);//停止計(jì)時器 $("#btnSendCode1").removeAttr("disabled");//啟用按鈕 $("#btnSendCode1").val("重新發(fā)送"); } else { curCount1--; $("#btnSendCode1").val( + curCount1 + "s"); } } </script>
6.php部分代碼,這里就需要把你下載的sdk解壓放到你的網(wǎng)站目錄里面,我這里是放到根目錄下面,php里面的代碼需要修改的,都以漢字進(jìn)行描述,其他的不需要修改,如需要進(jìn)行后臺驗(yàn)證,可以把驗(yàn)證碼存入session,然后在session中進(jìn)行驗(yàn)證
<?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位驗(yàn)證碼 $TemplateParam = json_encode(['code'=>$code]); if (!$this->isphone($phone)){//這里是用來判斷你輸入的手機(jī)號格式是否正確 echo json_encode(['code'=>0,'msg'=>'手機(jī)號碼錯誤']); 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,//這里是前臺輸入的手機(jī)號 'SignName' => '這里是你申請的簽名', 'TemplateCode' => '這里是你創(chuàng)建的模版id', 'TemplateParam' => $TemplateParam,這里是其他的參數(shù),就是你發(fā)送的驗(yàn)證碼 ], ]) ->request(); $array = $result->toArray(); if ($array['Code'] == 'OK'){ echo json_encode(['code' => 1,'yzm' => $code]); }else{ echo json_encode(['code' => 0,'msg' => '驗(yàn)證碼發(fā)送失敗!請重新獲?。?#39;]); } } catch (ClientException $e) { echo $e->getErrorMessage() . PHP_EOL; } catch (ServerException $e) { echo $e->getErrorMessage() . PHP_EOL; } } }
在阿里云短信服務(wù)內(nèi)夠買短信,并創(chuàng)建模版以及短信簽名,具體流程請查看阿里云手冊
2.在阿里云短信服務(wù)內(nèi)夠買短信,并創(chuàng)建模版以及短信簽名,具體流程請查看阿里云手冊
3.在短信控制臺->概覽中點(diǎn)擊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安裝,當(dāng)然我下載的也是一樣哈。
5.開始寫代碼(PS所有代碼都有,基本不需要你進(jìn)行修改,只需要修改js,ajax請求的發(fā)送驗(yàn)證碼的接口以及修改方法里面阿里云對應(yīng)申請的參數(shù))
前臺html部分,我這里使用了layui的樣式以及驗(yàn)證方法,如果需要自行去網(wǎng)下載包,然后放到static目錄下面,把layui.js跟layui.css引用進(jìn)去就可以了
由于一部分發(fā)送不出去現(xiàn)在補(bǔ)上,文件也可以在這里下載,最好是用comporse安裝
vendor
看看,學(xué)習(xí)學(xué)習(xí)
學(xué)習(xí)學(xué)習(xí)
感謝分享,樓主長命百歲
看看大佬是什么弄的