一、案例效果
二、应用场景
通过接入 阿里云、腾讯云等云端功能的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.进入阿里云官网网址,开通短信服务
2.点击立即开通后,需要进行实名认证或企业认证,我们这边用的是个人的实名认证。
3.填写相关信息,进行实名认证
4.实名认证时间比较快,成功后的提示如图,后面也可以修改为企业认证。
5.进入短信控制台后,添加签名、模板需要平台审核,审核的官方时间为2个小时内,但个人申请的验证并不是特别容易通过,特别是签名部分,不能随便输入,建议还是以企业为单位去申请,比如意派技术人员按照企业去申请,测试时输入的是“意派科技”。
6.审核通过后,会拿到一个阿里云短信模板code,后面我们在编辑器界面配置API的时候会用到。
组件及功能用法
短信验证API 接口分为 2个执行项:一是向手机发送验证码短信;二是验证码短信校验。两个功能组合才能实现校验手机号。
1.编辑器界面高级组件——数据应用——API接口,点击添加
2.添加后的API在逻辑小面板显示
3.逻辑小面板中选中API接口组件,右侧面板点击编辑“配置设定”
4.点击后弹出API配置面板,会显示一些信息需要我们输入。其中的阿里云短信模板code就是前面我们提到的只有阿里云审核通过后才会给出。全部输入完成后,点击保存。
5.页面添加2个输入框组件,一个用于输入手机号,另一个用于输入验证码。
6.再添加2个文字按钮组件,用于触发手机验证和接收返回数据。
7.添加一个段落组件,方便后面我们做调试。
8.给发送验证码的文字按钮添加触发行为:
(1)点击时触发【执行API接口功能】的触发行为。
(2)选择【阿里云短信验证接口】
(3)选择操作【阿里云短信验证码发送】
(4)下方的传递参数手机号绑定【手机号输入框】,目的是将用户在输入框中的手机号给到阿里云短信验证平台,阿里云平台拿到手机号后给出短信验证码并发送到用户手机,当然也可能会有失败的情况,我们可以给出对应提示。
同时阿里云平台也会返回一些参数给到意派平台。
9.我们再选中验证文字按钮,给文字按钮设置验证码输入后的验证,记得手机号要跟手机号输入框绑定;验证码要跟验证码输入框绑定,用于阿里云短信验证平台去验证用户输入的验证码是否正确。
10.另外,结合验证成功后的一些触发器,我们可以去做一些其他的触发行为,如成功时显示验证成功的提示等。
11.补充倒计时效果。
添加新的文字按钮,直接修改按钮颜色为灰色;
双击修改文字按钮内的文字为“S后重试”;
文字对齐方式为右对齐;
设置按钮初始隐藏。
12.添加一个计时器组件。
计时器数字显示颜色更改为白色;
计时器组件设置初始隐藏;
计时器设置触发器=0S时,设置隐藏计时器组件和文字按钮组件。
计时器设置触发器=0S时,设置重置计时器,让计时器恢复到初始状态,接受验证码未成功时,重新发送验证码时,从30S开始倒计时;
13.选中“发送验证码按钮”,给它的点击时触发器补充2个触发行为:
(1)显示元素设置显示“计时器组件”跟“30S后重试按钮”。
(2)启动计时器的触发行为。