前端短信验证码怎么做（配合后端）

前言

阅读本文要求：了解前端HTML、CSS、Javascript、ajax； 稍微了解后端php（或其他编程语言）、数据库。

这篇文章写了四个小时短信收到泰达币账号密码，希望大家怀着一颗感恩的心看完，谢谢！ 感谢您的好评，让我有了继续写下去的兴趣和勇气，谢谢！

1.前提

申请短信服务：由于发送短信需要电信行业的公司（电信、移动、联通等），所以一定要和电信行业的公司沟通。 不过不用怕，现在的社会服务都很好，有很多SP（服务商）已经帮你搞定了。 它们作为您与电信行业的桥梁，帮助您完成与电信的对接，同时也准备好后台代码供您使用。 所以，怀着一颗感恩的心，面对SP吧。呵呵

PS：这些服务商包括：阿里云、腾讯云等（你可以找度娘要“短信服务接口”，她会告诉你的。。。）

2.申请短信服务的步骤

我以阿里云为例，告诉大家步骤：

（也可以看看阿里云的快速入门文档：）

1、登录阿里云短信收到泰达币账号密码，进入“短信服务”-->国内新闻

1）进入：扫一扫支付宝登录

您可以选择支付宝，扫一扫，登录。

打开手机支付宝扫一扫

2) 查找短信服务

3）进入管理控制台---》查找国内新闻

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

点击“国内新闻”，您将在页面右侧看到如下画面：

2.添加签名（短信中的签名）

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

看清楚要求，不要乱写，否则审稿不通过。 等待审批（比如两个小时，大部分时间10分钟左右）

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

大约十分钟后，审核通过后，会看到如下画面（如果审核不通过，请检查是什么问题，并尝试更改签名）：

请记住您的“签名名称”，它将在程序中使用。

审核不通过会出现如下画面，点击“咨询修改”查看原因

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

然后改名等待审核通过

3.添加模板（短信内容格式）

在同一屏幕中，进入“模板管理”

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

添加模板时，按要求做，不要乱写，特别注意“模板内容”的格式要求。 我填写的“您的短信验证码是：${code}，验证码5分钟内有效，请勿泄露给他人”，code是您在（后台）程序中生成的随机验证码。 填写好内容后，会出现如下画面。

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

等待审批（比如两个小时，大部分时间10分钟左右）

如果通过，将如下所示：

记住你的“模板代码”并在程序中使用它。

4.充值（不充值，无法发短信）

找到菜单“费用”——“充值”。

在当前屏幕的右上角，

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

点击“充值”，应该就可以充值了。

5.测试一下是否可以发送

可以通过阿里云的网站测试发短信验证是否激活成功

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

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

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

等待刚刚添加的签名和模板通过。 选择刚才添加的签名“it教学”，刚刚添加的模板“天江考”，输入手机号。 点击“发送短信”。

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

如果不成功，再检查你的“签名”是否通过，“模板”是否通过。 是否充值成功。 不行就打客服问问。

三、后端开发需要做的事情： 1、创建自己的AK（Asscess Key）

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

进入如下画面：

点击“创建AccessKey”，

点击“保存AK信息”

把AK保存好，开发的时候会用到。 无需每次都进入阿里云搜索。

创建成功后出现如下画面：

代码中同时使用了AccessKey ID和Access Key Secret，这是你访问阿里云API的密钥。

如果想再次看到“Access Key Secret”，点击其下方的“显示”，发送手机验证码即可。

完成后，您将看到以下屏幕：

好的

2.下载后端代码（以php为例），修改1），下载后端php代码

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

您可以使用此地址直接进入，也可以按照以下步骤操作：

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

点击“帮助文档”

点击“SDK参考（新版）”

点击“安装PHP SDK”

点击“”下载SDK和DOMO

点击“红框”

下载后这是别人写的后端代码，解压后放到你的项目中。

2）修改后台的php代码

“api_demo”文件夹下的sendSms.php文件为示例代码，可直接使用。 当前端发送请求时，它正在寻找这个文件。

打开sendSms.php文件，这里需要修改：

① AK（Assess Key）信息（上一步创建的AK）。

② 修改签名号码和短信模板：

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

③ 随机验证码

④与前端的交互代码：

四、前端开发流程 1、前端界面提供文本框

2.给“获取短信验证码”按钮绑定事件，并写入ajax代码 3.后台发送验证码

后台将生成的短信验证码发送到您的手机（由sendSms.php文件发送），并在文本框中填写您手机收到的短信验证码。

4. 前端再次发送请求。

当点击“登录”或“注册”按钮时，前端再次发送请求，将文本框中的短信验证码发送至后端，由后端进行验证

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