小言_互联网的博客

前端的短信验证码如何做(和后端配合)

304人阅读  评论(0)

前言

阅读本篇文章的要求:懂前端的HTML,CSS,Javascript,ajax;后端的php(或者其它编程语言也行)懂一点,数据库。

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

一、前提

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

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

二、申请短信服务的步骤

我以阿里云为例,给大家说一下步骤:

(你也可以看一下阿里云的快速入门文档: https://help.aliyun.com/document_detail/55288.html

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

     1)、进入:https://account.aliyun.com/login/login.htm 用支付宝扫描登录

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

 

打开手机支付宝,扫描吧

  2)、找到短信服务

https://www.aliyun.com/product/sms

 

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

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

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

2、添加签名(短信里的签名)

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

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

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

大概十分钟后,审核通过后,就会看到如下画面(如果审核不通过,看看啥问题,重新改个签名试试):

 

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

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

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

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

3、添加模板(发生的短信内容格式)

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

点击“添加模板”,进入如下画面:

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

点击“提交”按钮,进入如下画面:

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

如果通过的话,就是如下画面:

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

4、充值不充值,没法发短信

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

在当前画面的右上角,

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

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

5、测试一下,看看能不能发

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

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

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

 

点击“快速学习”,进入如下画面:

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

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

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

 

三、后端开发需要做的事情:

1、创建自己的AK(Asscess Key)

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

进入如下画面:

点击“创建AccessKey”,

点击“保存AK信息”

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

 

创建成功后,如下画面:

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

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

 

完成后,你就会看到如下画面:

Ok了

 

2、下载后端的代码(以php为例),并修改

 1)、下载后端的php代码

找到API(阿里云提供的针对各种后端语言的代码(发送短信的代码),如:php)

可以用这个地址 https://help.aliyun.com/document_detail/53111.html 直接进入,也可以按照如下步骤,进行:

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

点击“帮助文档”

点击“SDK参考(新版)”

点击“安装PHP SDK”

点击“”SDK及DOMO下载

点击“红色框”

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

2)、修改后端的php代码

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

打开sendSms.php文件,需要修改的地方:

  ① AK(Asscess Key)信息(上一大步创建的AK)。

 

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

       前面 添加的签名和模板(模板CODE)。

③ 随机验证码

④ 和前端交互代码:

四、前端开发流程

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

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

  • 请求的php文件就是 “dysms_php/api_demo/sendSms.php”,
  • 发送给后端的电话号码的:phonenumber;(自己可以根据实际情况改)
  • 后端响应的数据格式,你可以跟踪一下,或者console.log一下,就知道了。

  3、后端发送验证码

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

  4、前端再次发送请求。

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

  •        Php文件自己写,我的是 loginCheck.php

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

           1:表示验证通过;0:表示验证失败。

 

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

 

 


转载:https://blog.csdn.net/jiang7701037/article/details/113112911
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场