.

API接口功能【短信验证】

小常发表于:2020年01月17日 18:10:11更新于:2020年01月21日 17:20:46

一、案例效果

0015e217f89b34c74f45e1a73cc1692

《人脸融合|你来编号外,庆上海解放70年》

二、应用场景

通过接入 阿里云、腾讯云等云端功能的API 来让H5 支持更多的互动解决方案, 具体云功能可以参看:阿里云官网 aliyun.com和 腾讯云官网

API 可以对接一些基础云服务,比如短信、邮件等,同时可以支持更高级的AI互动功能,如人脸融合/人脸识别,智能手势、文字识别;AI猜画,AI分配诗词、AI语音互动等。

意派Epub360的API(Application Programming Interface,应用程序接口)功能,通常由API组件和相关的API触发行为两个内容组成,以实现较为自由的应用场景需求,也是对意派Epub360较为出色的触发器特点的延用,将为意派Epub360拓展更多玩法。

目前可以支持的是“阿里云手机短信验证”功能的API接口,可以满足对用户输入的手机号进行验证码验证,确保参与作品互动的用户,其手机号真实有效。如果再与数据库用户规则设置、微信授权等相互配合,极大程度上可以防止个别用户填写假手机来参与活动的行为。短信验证功能自己就可以在阿里云申请测试,赶快尝试一下吧!


三、基础用法

(一)手机号短信验证功能:

手机号短信验证主要基于阿里云短信服务 ,首先必须拥有阿里云账号(因为本功能是基于阿里云来实现的) https://dysms.console.aliyun.com/dysms.htm开通账号的阿里云短信功能。

1.进入阿里云官网网址,开通短信服务

0015e218efc6fd792f031c1a8734b64


2.点击立即开通后,需要进行实名认证或企业认证,我们这边用的是个人的实名认证。

账号管理.jpg


3.填写相关信息,进行实名认证

0015e2190d2a399617805f7b32519f9

4.实名认证时间比较快,成功后的提示如图,后面也可以修改为企业认证。

0015e2192274a3c52f8394908cccddb


5.进入短信控制台后,添加签名、模板需要平台审核,审核的官方时间为2个小时内,但个人申请的验证并不是特别容易通过,特别是签名部分,不能随便输入,建议还是以企业为单位去申请,比如意派技术人员按照企业去申请,测试时输入的是“意派科技”。

0015e251059e7434e854728ded2aa48


6.审核通过后,会拿到一个阿里云短信模板code,后面我们在编辑器界面配置API的时候会用到。


组件及功能用法

短信验证API 接口分为 2个执行项:一是向手机发送验证码短信;二是验证码短信校验。两个功能组合才能实现校验手机号。


1.编辑器界面高级组件——数据应用——API接口,点击添加

0015e21685a282f9285238cfba90e6b


2.添加后的API在逻辑小面板显示

0015e2513ceb5f1e5b92abe37605c8c


3.逻辑小面板中选中API接口组件,右侧面板点击编辑“配置设定”

编辑版式文档_-_后台管理系统.jpg


4.点击后弹出API配置面板,会显示一些信息需要我们输入。其中的阿里云短信模板code就是前面我们提到的只有阿里云审核通过后才会给出。全部输入完成后,点击保存。

0015e25750aa8ee459567126c500a00


5.页面添加2个输入框组件,一个用于输入手机号,另一个用于输入验证码。

0015e25162dedac127ffc5220f5d794


6.再添加2个文字按钮组件,用于触发手机验证和接收返回数据。

0015e2666100d9a23394c984e80c2fa


7.添加一个段落组件,方便后面我们做调试。

编辑版式文档_-_后台管理系统.jpg

8.给发送验证码的文字按钮添加触发行为:

(1)点击时触发执行API接口功能】的触发行为。

(2)选择【阿里云短信验证接口】

(3)选择操作【阿里云短信验证码发送】

(4)下方的传递参数手机号绑定【手机号输入框】,目的是将用户在输入框中的手机号给到阿里云短信验证平台,阿里云平台拿到手机号后给出短信验证码并发送到用户手机,当然也可能会有失败的情况,我们可以给出对应提示。

同时阿里云平台也会返回一些参数给到意派平台。

编辑版式文档_-_后台管理系统.jpg


9.我们再选中验证文字按钮,给文字按钮设置验证码输入后的验证,记得手机号要跟手机号输入框绑定;验证码要跟验证码输入框绑定,用于阿里云短信验证平台去验证用户输入的验证码是否正确。

编辑版式文档_-_后台管理系统.jpg


10.另外,结合验证成功后的一些触发器,我们可以去做一些其他的触发行为,如成功时显示验证成功的提示等。

编辑版式文档_-_后台管理系统.jpg


11.补充倒计时效果。

添加新的文字按钮,直接修改按钮颜色为灰色;

双击修改文字按钮内的文字为“S后重试”;

文字对齐方式为右对齐;

设置按钮初始隐藏。

编辑版式文档_-_后台管理系统.jpg


12.添加一个计时器组件。

计时器数字显示颜色更改为白色;

计时器组件设置初始隐藏;

计时器设置触发器=0S时,设置隐藏计时器组件和文字按钮组件。

计时器设置触发器=0S时,设置重置计时器,让计时器恢复到初始状态,接受验证码未成功时,重新发送验证码时,从30S开始倒计时;

0015e26c1257eefe4a9e6c66866ccc3


13.选中“发送验证码按钮”,给它的点击时触发器补充2个触发行为:

(1)显示元素设置显示“计时器组件”跟“30S后重试按钮”。

(2)启动计时器的触发行为。

编辑版式文档_-_后台管理系统.jpg