;

白小萌】提问: 是否可以实现短信验证码的功能?

做一个需要用户注册的H5,然后需要短信验证码,iH5可以实现吗?


1 个回答

泽雨点石

iH5可以实现,可以使用API功能编辑API,或者写函数调用短信发送的API。

image.png

这里我仅介绍用API功能的方法的实现。

简单介绍一下,我做的这个demo实现的三个功能:

  1. 发送短信;2.验证码有效计时;3.验证验证码并且提交数据库


image.png

    发送短信需要用到第三方的短信API或者服务。在此案例中我使用了网易的短信APIimage.png

第一步添加API

image.png

image.png

这里是我已经填好的。

    接口名称,可以任意填写。接口URL,需要添加的请求的header参数,需要添加的body参数都可以在API的帮助文档中找到。

image.png

调用方式有POST和GET,使用哪种方式,api文档上有说明或者例子,在这里blob.png

由于例子用的是POST所以也就知道了这里应该使用POST的方式

header参数:

image.png

body参数:

image.png

body参数在这里我就只添加了必填的mobile(也就是用户手机号)的参数,可选参数(可根据自身的需求和API文档进行添加)。

另外文档中一般也有具体的例子进行参考。

API参数的填写中,如果参数的值不变的话,可以直接在默认值中填写,这样以后使用API发送请求事件的时候,就可以不用再次填写了。

image.png

找到了需要添加的参数以后,下面的问题就是怎么填写参数的值了。也就是上面请求事件中的值。

一般参数值的要求,文档中都会说明。

image.png,appkey一般是在注册好账户和创建完应用以后,系统自动生成的。

image.png

这里我创建了一个叫做短信测试的应用,那么下面就有appkey和appsecret了。

image.png

    Nonce要求为随机数,我看了下文档给的例子,在这里其实任意填一些字符就可以了,不过一般最好是用英文或者数字,避免出错。

image.png

    curTime要求为当前的时间戳,image.png一般是这样的形式。然后可以通过系统·时间·UNIX时间获取

blob.png

image.png

    CheckSum的要求是SHA1(AppSecret+Nonce+CurTime)的形式。SHA1()这里说的是哈希计算的方法,具体是怎么实现的呢,额我也没研究过,简单来说就是一种转换AppSecret+Nonce+CurTime这一串拼接字符为其他字符的方法。那么怎么能够使用这种字符转换方法呢。也很简单只要在舞台这里添加sha1的库就好了。

image.png

    sha1的库或者JS文件可以怎么找呢。这里我在https://cdnjs.com/,搜索sha1,选择第一个,点击copy,然后就能把JS文件的url复制出来了。其他常用的例如MD5,也可以在这里查找MD5获取。image.png

blob.png于是我们就能在值那里调用这个方法sha1(舞台·appSecret+舞台·Nonce+System.getSystemTime())转换这几个数据的拼接的字符串了。

image.png

    舞台·appSecret和舞台·Nonce,是我在舞台上设置的自定义属性,填写的值的来源,上面已经提过了。

OK,我们已经有了发送请求的所有拼图了,那么现在就添加一个事件去发送这个请求吧。

blob.png

        上面的mobile就是手机输入框的内容,这个事件需要判断手机输入框是否已经正确填写好手机号,并且验证码的验证倒计时为0。

        验证倒计时指的是验证码的有效时间,网易平台默认是10分钟,所以点击发送以后给倒计时的计数器设置为600秒。同时让触发器播放。

image.png

触发器的事件是,每过一秒让计数器,减一,计数器减到0以后,才能再次请求验证码。同时让触发器暂停。

image.png

blob.png

    发送成功以后,网易的短信的服务端会返回验证码的信息,这个时候我们需要把返回的验证码的信息记录下来,这里我是把验证码的信息记录到舞台的自定义属性verificationCode上。

image.png

   image.png

我使用的这个api由于obj是发送的验证码,所以

返回结果·obj。举个例子,如果返回的是下面这样的,

{  "code": 200,  "msg": "88",  "code": "1908"},就是返回结果·code了。
关于JSON的使用可以百度获取更多信息。
最后要做的就是让返回的验证码跟用户输入的验证码进行比对,比对成功,在这里我们会让它提交到数据库。

image.png


贴一下完整的事件面板和对象树:

blob.png

blob.png

image.png

学习地图