前端的短信验证码如何做（和后端配合）

快来打我* 2023-01-10 15:57 235阅读 0赞

## **前言** ##

阅读本篇文章的要求：懂前端的HTML,CSS,Javascript，ajax；后端的php（或者其它编程语言也行）懂一点，数据库。

这篇文章写了四个小时，希望大家怀着一颗感恩的心阅读，谢谢！感谢您的点赞，让我有继续写下去的兴趣和勇气，谢谢！

## **一、前提** ##

申请短信服务：由于发送短信是需要电信行业的公司（中国电信，移动，联通等），所以，我们必须要和电信行业的公司去沟通。不过不要害怕，现在的社会服务很好，有很多的SP（服务提供商）帮你做好了此事。他们作为你和电信行业之间的桥梁，帮你做好了和电信的接口，也做好了后端的代码，供你使用。所以，怀着一颗感恩的心，面对SP。哈哈

PS：这些服务提供商有：阿里云，腾讯云等等（你可以找度娘，要一下“短信服务接口”，她会告诉你的……）

## **二、申请短信服务的步骤** ##

我以阿里云为例，给大家说一下步骤：

（你也可以看一下阿里云的快速入门文档： [https://help.aliyun.com/document\_detail/55288.html][https_help.aliyun.com_document_detail_55288.html]）

### **1、登录阿里云，进入“短信服务”-->国内消息** ###

**     **1）、进入：[https://account.aliyun.com/login/login.htm][https_account.aliyun.com_login_login.htm] 用支付宝扫描登录

![20210125144953438.png][]

可以选择支付宝的方式，扫描登录。

![20210125145007685.png][]

打开手机支付宝，扫描吧

2）、找到短信服务

![20210125145023648.png][]

[https://www.aliyun.com/product/sms][https_www.aliyun.com_product_sms]

3）、 进入管理控制台---》找国内消息

![20210125145043703.png][]

点击“管理控制台”按钮，进入后，看到如下画面：

![20210125145051152.png][]

点击“国内消息”，页面的右边看到如下画面：

![20210125145106308.png][]

### **2、添加签名（短信里的签名）** ###

在以上画面，点击“添加签名”按钮，进入如下画面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

看清楚要求，不要乱写，否则审核不通过。等待审核通过（说的是两个小时，大部分时候10分钟就差不多了）

点击“确定”按钮，看到如下画面

![20210125145222594.png][]

大概十分钟后，审核通过后，就会看到如下画面（如果审核不通过，看看啥问题，重新改个签名试试）：

![20210125145231325.png][]

记住你的“签名名称”，程序中要用。

如果审核不通过会是如下画面，点击“咨询并修改”看看原因

![20210125145243826.png][]

点击“咨询并修改”后，看到了如下画面：

![20210125145253699.png][]

那就把名字改一下，再等待审核

### **3、添加模板（发生的短信内容格式）** ###

在同一个画面里，进入“模板管理”

![20210125145354261.png][]

点击“添加模板”，进入如下画面：

![20210125145402391.png][]

添加模板时，按照要求，不要乱写，特别注意“模板内容”有格式要求。我填写的是 “你的短信验证码为：$\{code\}，该验证码5分钟内有效，请勿泄露给别人”，code就是你在（后端）程序里产生的随机验证码。填写内容后，如下画面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1][]

点击“提交”按钮，进入如下画面：

![2021012514542276.png][]

等待审核通过（说的是两个小时，大部分时候10分钟就差不多了）

如果通过的话，就是如下画面：

![20210125145431254.png][]

记住你的“模板CODE”，要在程序里使用。

### **4、充值（不充值，没法发短信）** ###

找到菜单“费用” --》充值。

在当前画面的右上角，

![20210125145454597.png][]

点击“费用”进入如下画面

![20210125145502336.png][]

点击“充值”，充值你应该会吧。

### **5、测试一下，看看能不能发** ###

可以通过阿里云的网站测试发送一条短信，验证是否开通成功

进入菜单 “快速学习”--> 测试短信发送

回到刚才添加签名的页面：

![20210125145528813.png][]

点击“快速学习”，进入如下画面：

![20210125145537132.png][]

要等待刚才添加的签名和模板已经通过。选择刚才添加的签名“it教学”，刚才添加的模板“田江测试”，输入你的手机号码。点击“发送短信”。

收到了短信，说明成功了，如果没有收到，说明没有成功。

如果没有成功，那就查看你的“签名”是否通过，“模板”是否通过。充值是否成功。如果还不行，那就打个客服问一下。

## **三、后端开发需要做的事情：** ##

### **1、创建自己的AK（Asscess Key）** ###

在当前页面的右上角，点击你的头像，在菜单里找到“AccessKey管理”

![20210125145655256.png][]

进入如下画面：

![20210125145705298.png][]

点击“创建AccessKey”，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 2][]

点击“保存AK信息”

![20210125145722630.png][]

保存好AK，开发时要用到。不用每次进入阿里云查找了。

创建成功后，如下画面：

![20210125145734871.png][]

AccessKey ID 和Access Key Secret都是在代码中要用的，这是你访问阿里云API的密钥。

要想再次看到“Access Key Secret”点击它下放的“显示”，发送手机验证码。

![20210125145746144.png][]

完成后，你就会看到如下画面：

![20210125145759501.png][]

Ok了

### **2、下载后端的代码（以php为例），并修改** ###

### ** 1）、下载后端的php代码** ###

找到API（阿里云提供的针对各种后端语言的代码（发送短信的代码），如：php）

可以用这个地址 [https://help.aliyun.com/document\_detail/53111.html][https_help.aliyun.com_document_detail_53111.html] 直接进入，也可以按照如下步骤，进行：

在页面左侧的菜单上找到“帮助文档”

![20210125145849403.png][]

点击“帮助文档”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 3][]

点击“SDK参考（新版）”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 4][]

点击“安装PHP SDK”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 5][]

点击“”SDK及DOMO下载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 6][]

点击“红色框”

![202101251459524.png][]

下载完毕，这就是人家写好的后端代码，解压放到你的项目中。

![20210125150000109.png][]

### **2）、修改后端的php代码** ###

文件夹“api\_demo”里是sendSms.php文件里是示例代码，直接可以使用。前端发请求时，找的就是这个文件。

打开sendSms.php文件，需要修改的地方：

**  ① AK（****Asscess Key****）信息（上一大步创建的AK）。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 7][]

**② 修改签名和短信模板的编号：**

前面 添加的签名和模板（模板CODE）。

![20210125150113333.png][]

**③ 随机验证码**

![20210125150230726.png][]

④ **和前端交互代码：**

![20210125150247213.png][]

## **四、前端开发流程** ##

### **    1、前端界面上提供文本框** ###

![20210125150322428.png][]

### **  2、给按钮“获取短信验证码”绑定事件，写上ajax的代码** ###

*  请求的php文件就是 “dysms\_php/api\_demo/sendSms.php”,
 *  发送给后端的电话号码的：phonenumber;（自己可以根据实际情况改）
 *  后端响应的数据格式，你可以跟踪一下，或者console.log一下，就知道了。

### **  3、****后端发送验证码** ###

**后端把产生的短信验证码发到你手机上（sendSms.php文件发的），把你手机收到的短信验证码填入到文本框。**

### **  4、前端再次发送请求。** ###

**       点击“登录”或者“注册”按钮时，前端再次发送请求，把文本框里的短信验证码发给后端，后端进行验证**

*         **Php文件自己写，我的是 loginCheck.php**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 8][]

*  请求参数根据实际情况定，我的是code。
 *  后端响应的格式，根据你们自己的实际情况定。我的是：

1：表示验证通过；0：表示验证失败。

**好了，以上就是完整的短信验证码的使用步骤，希望对大家有帮助。**

[https_help.aliyun.com_document_detail_55288.html]: https://help.aliyun.com/document_detail/55288.html
[https_account.aliyun.com_login_login.htm]: https://account.aliyun.com/login/login.htm
[20210125144953438.png]: /images/20221119/3d93a349b0d24f1ead4426f59083e5d8.png
[20210125145007685.png]: https://img-blog.csdnimg.cn/20210125145007685.png
[20210125145023648.png]: https://img-blog.csdnimg.cn/20210125145023648.png
[https_www.aliyun.com_product_sms]: https://www.aliyun.com/product/sms
[20210125145043703.png]: https://img-blog.csdnimg.cn/20210125145043703.png
[20210125145051152.png]: https://img-blog.csdnimg.cn/20210125145051152.png
[20210125145106308.png]: https://img-blog.csdnimg.cn/20210125145106308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210125145211154.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[20210125145222594.png]: https://img-blog.csdnimg.cn/20210125145222594.png
[20210125145231325.png]: https://img-blog.csdnimg.cn/20210125145231325.png
[20210125145243826.png]: https://img-blog.csdnimg.cn/20210125145243826.png
[20210125145253699.png]: https://img-blog.csdnimg.cn/20210125145253699.png
[20210125145354261.png]: https://img-blog.csdnimg.cn/20210125145354261.png
[20210125145402391.png]: https://img-blog.csdnimg.cn/20210125145402391.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210125145411774.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[2021012514542276.png]: https://img-blog.csdnimg.cn/2021012514542276.png
[20210125145431254.png]: https://img-blog.csdnimg.cn/20210125145431254.png
[20210125145454597.png]: https://img-blog.csdnimg.cn/20210125145454597.png
[20210125145502336.png]: https://img-blog.csdnimg.cn/20210125145502336.png
[20210125145528813.png]: https://img-blog.csdnimg.cn/20210125145528813.png
[20210125145537132.png]: https://img-blog.csdnimg.cn/20210125145537132.png
[20210125145655256.png]: https://img-blog.csdnimg.cn/20210125145655256.png
[20210125145705298.png]: https://img-blog.csdnimg.cn/20210125145705298.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210125145713216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[20210125145722630.png]: https://img-blog.csdnimg.cn/20210125145722630.png
[20210125145734871.png]: https://img-blog.csdnimg.cn/20210125145734871.png
[20210125145746144.png]: https://img-blog.csdnimg.cn/20210125145746144.png
[20210125145759501.png]: https://img-blog.csdnimg.cn/20210125145759501.png
[https_help.aliyun.com_document_detail_53111.html]: https://help.aliyun.com/document_detail/53111.html
[20210125145849403.png]: https://img-blog.csdnimg.cn/20210125145849403.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021012514585873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210125145906302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021012514591510.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2021012514594256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[202101251459524.png]: https://img-blog.csdnimg.cn/202101251459524.png
[20210125150000109.png]: https://img-blog.csdnimg.cn/20210125150000109.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210125150057285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70
[20210125150113333.png]: https://img-blog.csdnimg.cn/20210125150113333.png
[20210125150230726.png]: https://img-blog.csdnimg.cn/20210125150230726.png
[20210125150247213.png]: https://img-blog.csdnimg.cn/20210125150247213.png
[20210125150322428.png]: https://img-blog.csdnimg.cn/20210125150322428.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210125150457669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw==,size_16,color_FFFFFF,t_70