关于短信验证码:H5仿原生app短信验证码vue20组件附源码地址

一、开发背景产品出设计稿要求做一个仿原生app短信验证码组件,花了两小时搞进去一个还能够的组件,反对屏幕自适应,能够用于弹出框,或本人封装的vue组件里,心愿能够帮忙那些被产品压迫的同学,哈哈。其核心思想就是利用一个输入框应用css3,translate属性,每输出一次后向右位移一个单位地位,直到输出完验证码个数隐没。而后定义一个数组smsCodeList,初始化时push对象 smsCodeList = [{ val: '', isError: ''}]二、费发不多说,先看演示演示 三、代码解释// html代码<div class='sms-check-code-wrapper' @click='handleClick'> <div class="sms-code-container"> <div :class="['sms-code-title', {'error': error}]" :style="{'color': error ? errorColor : errorColorDefault}"> {{ title }}</div> <div class='sms-code-box'> <div class="sms-code-input-box" :style="{'transform': `translate(${inputBoxActive}%)`}"> <input ref='refInout' v-show='isShowInputBox' type='number' v-model='inputValue' class='sms-code-input' :style="{ 'width': style.smsCodeItemWidth + '%', 'paddingLeft': style.inputPL + '%' }" @keyup="onKeyUp" @keydown='onKeyDown' v-focus :maxlength='codeNum' autocomplete="one-time-code" inputmode="numeric" value='' /> </div> <div class='sms-code-bottom flex-sb'> <div class='sms-code-item' :style="{ 'width': style.smsCodeItemWidth + '%' }" v-for='(item, index) in smsCodeList' :key='index'> <span :class="['sms-value', {'error': item.isError }]" :style="{'color': item.isError ? errorColor : errorColorDefault}"> {{ item.val }}</span> <span :class="['sms-line', {'error': item.isError}]" :style="{'backgroundColor': item.isError ? errorColor : errorColorDefault}"> </span> </div> </div> </div> </div></div>只需简略的这几行html构造,用来渲染题目和输入框和验证码组件js 代码也很简略// 首先定义一些初始默认值,因为默认依照6位数验证码来的let defaultCodeNum = 6let defaultMoveUnit = 17.2let defaultInputPL = 7let defaultSmsCodeItemWidth = 14export default { name: "VueSmsCheckCode", directives: { focus: { inserted: function (el) { el.focus() } } }, props: { title: { type: String, default: '请录入验证码' }, codeNum: { // 验证码个数 type: Number, default: 6 }, isError: { // 验证码谬误显示谬误提醒 type: Boolean, default: false }, errorColor: { type: String, default: '#D81A1A' } }, data() { return { smsCodeList: [], // 验证码输出显示在div上的数字 inputValue: '', // 输入框的值 smsValue: '', // 验证码结束后归总的变量 moveUnit: 17.2, // input 位移单位 inputBoxActive: 0, // 以后输入框位移地位 currentIndex: 0, // 以后验证码索引 isShowInputBox: true, // 是否显示输入框 error: false, // 验证码谬误报红 errorColorDefault: '#b1b1b1', // 默认谬误输入框色彩 style: { // 默认款式 inputPL: 0, // input padding-left值 smsCodeItemWidth: 0, // 验证码显示item的宽度(自适应) } } }, created() { this.reDomRender() // 初始化时,通过传过来的验证码个数从新渲染组件(各个dom地位,宽度等从新计算) this.compareList() // push 默认数据 this.inputPaving() // 当点击手机验证码主动填充时,主动平铺数据 }, methods: { reDomRender() { this.style = { inputPL: Math.round(defaultCodeNum / (this.codeNum / defaultInputPL)), smsCodeItemWidth: Math.round(defaultCodeNum / this.codeNum * defaultSmsCodeItemWidth) } this.moveUnit = Math.round(defaultCodeNum / (this.codeNum / (defaultMoveUnit - .3333))) }, compareList() { for (let i = 0; i < this.codeNum; i++) { if (this.smsCodeList.length < this.codeNum) { this.smsCodeList.push({ val: '', isError: this.isError }) } } }, initAll() { this.smsCodeList = [] this.compareList() this.inputValue = '' this.smsValue = '' this.inputBoxActive = 0 this.currentIndex = 0 this.isShowInputBox = true // 延时解决光标聚焦 setTimeout(() => { this.$refs.refInout.focus() }) }, // 当点击验证码时,inputBoxActive,值要分铺在每个输入框里 inputPaving() { let v = this.inputValue if (v.length > 0) { v.split('').forEach((item, index) => { if (index <= v.length) { this.smsCodeList[index].val = item const inputPosition = (index + 1) * this.moveUnit this.inputBoxActive = inputPosition >= 100 ? 100 : inputPosition this.currentIndex = index + 1 this.smsValue += item this.inputValue = '' if (index + 1 === this.codeNum) { this.isShowInputBox = false this.sendFun() } } }) } }, onKeyDown(e) { let key = e.key; e.returnValue = !(key === 'e' || key === 'E' || key === '+' || key === '-'); }, onKeyUp(e) { if (this.currentIndex < 1) return if (e.code === 'Backspace' || e.key === 'Backspace') { // 会退 this.currentIndex = this.currentIndex - 1 this.inputBoxActive = this.inputBoxActive - this.moveUnit this.smsCodeList = this.smsCodeList.map((val, index) => { if (index === this.currentIndex) { val.val = '' val.isError = this.isError return val } return val }) } }, handleClick() { this.$refs.refInout.focus() }, sendFun() { this.$emit('finish', this.smsValue) } }, watch: { inputValue(v) { // 监听输入框输出的值 if (!v) return // 初始化时,点击软键盘上的验证码主动填充时候铺input数据 if (v.length > 1) { this.inputPaving() return; } this.inputBoxActive = this.inputBoxActive + this.moveUnit this.smsCodeList.map((val, index) => { if (this.currentIndex === index) { if(val) { //以后输出的地位使红色底部条初始化 val.isError = false } val.val = v return val } return val }) this.currentIndex += 1 this.inputValue = '' if (this.currentIndex >= this.codeNum) { // 当最初一位时发 this.isShowInputBox = false this.smsCodeList.forEach(val => { this.smsValue += val.val }) this.sendFun() } }, isError(v) { // 监听验证码是否谬误 this.error = v if (v) { this.smsCodeList.map(value => { value.isError = true return value }) this.initAll() } } }}剩下的就是css了npm install vue-sms-check-code --save最新版1.0.1 (2022/5/25)包惯例操作下载应用另外须要残缺的代码请到github或gitee上下载开源并总结整顿真的很费时间,如果不错还请star️问题请issuesgitee源码地址 ...

May 30, 2022 · 3 min · jiezi

关于短信验证码:互联网下半场短信验证正在离开舞台中心

不晓得你是否曾经习惯在注册的环节填写手机号获取验证码,因为时不时收不到短信而后放弃。或者间接在注册的时候因为繁琐的过程间接扭头走人。浪费时间的操作对于工夫碎片化越来越烦躁的用户来说就是对他们的一种"羞辱"。或者说,在设计App注册登录环节的时候,千万不要对你的用户抱有太多期待,他们基本就没打算在注册登录环节耗费太多工夫。 进入互联网下半场,特地是随着5G的到来,短信验证,这个让人爱恨交加的验证形式正在缓缓走出舞台地方。是什么造成了它必然来到的场面?先来看一下短信验证码的运作机制。 1.验证码加密发送 在App中点击发送验证码,向后盾发送申请,后盾收到申请,生成验证码A并反编译成短信验证码A',申请短信服务商发送短信验证码A'至用户手机,同时存储验证码A至后盾数据库中。 2.验证码解密验证 用户收到短信验证码A',提交短信验证码,后盾收到申请后后反编译短信验证码A',验证反编译之后的后果是否是验证码A,是则验证码胜利,此次用户注册申请胜利,否则验证失败,反馈给APP,此次注册申请不胜利。 这就带来三个问题,一是平安危险,二是工夫老本,三是短信费用。 首先,在短信验证码的机制下能够暴力破解也能够短信嗅探,其设施老本不超过300块,而造成的经济损失则是不可计数的。其次,因为通道资源缓和,理论短信验证码的达到率个别只有60%-70%,遇到逢年过节通道拥挤,短信未胜利下发或工夫滞后让用户等个十几分钟也很常见。最初,短信验证码的计费形式是只有发送就免费,如果遇上黑客依照某个手机号码列表循环发送短信验证码,如果未作任何限度的话,那么App可能损失数以万计甚至更高的短信费用,又如果收回的短信大多数都是没有用的话,用户注册量越大资金收入越大,这都是不必要的损失。 商业的实质实际上就是4P模型:产品、渠道、促销、价格。而且这几个点的优先级是顺次递加的。一个App想要胜利,就须要顺次做好这些点。如果别家曾经在某一个环节做得很好,你再想超过,就必须也做好这一环节,而后在下一个环节做得更好。所以当短信验证曾经裸露很多弊病的状况下,想要App更上一层楼的话就要站在用户的角度去抉择应用感更晦涩,操作更平安不便的验证形式。 比方一键登录。什么是一键登录?一键登录就是通过运营商独有的通信网关取号技术,在登录过程中精确辨认用户手机号码间接达成验证。用户只有输出手机号就可实现注册登录,从而触达利用内的信息和服务,全程不超过3秒就能实现。如果拿它和短信验证码进行比拟,那么在便利性上显著弱小很多。又因为整合了三大运营商网关认证能力,所以齐全不必放心被劫持。而老本上,一键登录只有验证胜利才会计费,心里默念一百次:省到就是赚到…… 随着现状互联网解决的问题越来越多,边界越来越广,很多性能模式都有了约定俗成的标准,想要从中怀才不遇就要开发更多创造性的空间。在可预感的将来,短信验证码将来到互联网的舞台核心。取而代之的,将是更平安更不便的一键登录。

June 10, 2021 · 1 min · jiezi

关于短信验证码:最高法用户遭盗刷银行应赔偿银行如何破局

一、新规解读银行卡明明在本人手里,余额却不胫而走……最高人民法院对于审理银行卡民事纠纷案件若干问题的规定25日起实施。 1.1 盗刷问题银行将担责《银行卡规定》第七条,明确以下两种盗刷状况,银行须抵偿: 产生伪卡盗刷交易或者网络盗刷交易,借记卡持卡人基于借记卡合同法律关系申请发卡行领取被盗刷贷款本息并赔偿损失的,人民法院依法予以反对产生伪卡盗刷交易或者网络盗刷交易,信用卡持卡人基于信用卡合同法律关系申请发卡行返还扣划的透支款本息、违约金并赔偿损失的,人民法院依法予以反对同时,针对上述两款情景,持卡人对银行卡、明码、验证码等身份辨认信息、交易验证信息未尽妥善保存任务具备过错,发卡行主张持卡人承当相应责任的,人民法院应予反对。近年来,银行卡盗刷特地是网络盗刷案件频发,重大侵害当事人财产权利,同时也影响着银行卡领取市场的平安稳固倒退,潜藏着较大的危险。专家认为,该规定在银行卡产业法治化倒退过程中具备里程碑作用。与此同时,新规的出台,将给银行业带来哪些影响?人们眼光再次聚焦到各大银行。 二、银行面临的问题与挑战自2018年以来,短信验证码攻打案多地频发,短信嗅探盗刷迅速蔓延全国。给用户财产造成巨大损失的同时,银行也深陷银行卡民事纠纷案件之中。 2019年3月,上海市普陀区人民法院裁决,农行将抵偿瞿学生全额损失,包含18万的卡内被盗刷金额、利息损失以及律师费;2019年12月,南昌市西湖区人民法院审理了该起储蓄存款合同纠纷案,针对验证码泄露卡被盗刷问题,鉴于银行有责任建设持卡人平安保障机制,且银行在单方储蓄合同法律关系中处于强势位置,并联合本案中单方的过错水平,法院判令银行对王某资金被骗承当70%的责任,即7000元;王某本身泄露动静明码,应承当30%的责任,即3000元;2020年9月,杭州萧山区法院对储蓄存款合同纠纷案作出裁决,银行抵偿小康的贷款全副损失,共计102128.31元及相应利息;2021年4月,温州中院依法对阮某诉某银行储蓄存款合同纠纷一案作出终审判决,银行对银行卡被盗刷造成的损失承当70%的抵偿责任,即抵偿阮某贷款损失153160元及利息损失,阮某对信息管理不善导致银行卡被盗刷,承当30%的责任。驳回银行的上诉申请,维持原判; 与此同时,随着技术与市场的成熟化发展,挪动领取笼罩场景将更加宽泛。中国人民银行公布的最新数据显示,截至2020年末,全年银行共解决电子领取业务2352.25亿笔,金额2711.81万亿元。暴利驱动下,黑灰产频频出手,网络盗刷案件逐步攀升。 新规的出台,无疑对银行挪动领取平安提出更高的要求。但面对日益成熟的网络盗刷产业链,银行又该如何破局呢? 三、银行卡网络盗刷剖析回顾近年来对于盗刷的纠纷,银行投入了大量人力、物力与财力,尽量减少用户财产损失。但面对频发的网络盗刷案件,银行依然只能疲于应酬,问题到底出在哪? 此次新规中,针对网络盗刷问题,在理论业务场景中,始终存在两个较大争议点: 网络盗刷中,存在着持卡人点击不明链接后,手机接管的短信验证码被犯罪分子拦挡的景象存在。如何解决这一争议,短信验证码的泄露是否基于持卡人的过错的举证责任由谁承当;网络盗刷中,还存在短信嗅探,基于短信验证码的攻击行为。持卡人未经任何操作的状况下,线上资产产生盗刷,如何界定持卡人保存任务与过错。而在以下两大争议点中,「短信验证码」又正是网络盗刷过程中黑灰产冲破的关键环节。 案件一:2018年8月,「独钓寒江雪」在豆瓣发帖《这下赤贫如洗了》,讲述被盗刷的经验。一时间,伪基站、短信嗅探掀起舆论关注。与此同时,包含郑州、广州、厦门等全国多地,接连产生多起银行卡被盗刷事件。这些银行卡盗刷案件作案伎俩统一,均是利用手机2G网络(GSM)不加密传输的破绽,通过伪基站和短信嗅探器,在肯定范畴内获取用户手机号码和短信验证码。之后,再利用各大银行APP存在的破绽和缺点,实现信息窃取、资金盗刷。案件二:2020年8月,深圳龙岗警方发表打掉一个新型盗刷银行卡犯罪团伙,抓获10名嫌疑人,查缴伪基站等电子设备6套,带破同类案件50余宗,涉案金额逾百万元。据专家剖析,嫌疑人通过“GSM劫持+短信嗅探”技术截获受害人短信验证码,从而实现盗刷等操作。截至目前,这是全国该类案件中打掉涉案人数最多、金额最大的一起。注册新账号,须要短信验证码;遗记明码又想登录网站,须要短信验证码;在网上转账提现,须要短信验证码……以后,应用短信验证码验证用户身份的技术,被广泛应用于各类挪动利用和网站服务。但非凡状况下,黑产利用「伪基站」攻打,短信验证码将遭逢拦挡。那么便存在,「是否用户自己应用自己手机实现验证操作」这样的破绽,给不法分子假装受害者提供了机会,也给网络盗刷责任界定减少了争议点。那么,如何保障在诸多场景下是否是被自己操作呢? 四、极验「无感本机认证」4.1 极验「无感本机认证」极验新一代的身份认证解决方案「无感本机认证」,代替传统短信验证,既能躲避传统短信验证毛病:短信轰炸、短信钓鱼、短信谬误发送、短信通道梗塞、短信嗅探、第三方运营商用户信息泄露等诸多平安层面问题,同时在用户体验方面也能够解决传统短信存在延时发送不到,导致用户散失投诉等用户体验问题,极验新一代身份认证产品-无感本机认证实用于挪动APP终端、H5以及微信小程序。 4.2 静默校验「是否用户自己应用自己手机实现验证操作」这样的问题,极验新一代验证是如何解决的呢? 极验新一代验证无感本机认证中推出另外一种验证模式,用户登录胜利之后,基于三大运营商的能力拿到本机SIM卡手机号与用户登录账号进行比照。依据匹配后果判断登录账号是否为本机账号,如果后果不匹配,可判断用户不是本机账号登录,可进行高强度认证。 静默校验可用于领取场景,遗记明码场景,确认本次登录APP账号为本机手机号。 结语站在银行角度,新规的出台,有利于倒逼相干部门开展挪动领取平安危险专项排查,不断加强挪动领取场景平安能力建设。作为新一代身份验证解决方案,极验「无感本机认证」将为挪动领取场景减少一层防护,守护用户资产平安同时,晋升交互体验。而银行相干部门,在面对网络盗刷问题上,除了配合相干部门进行反诈宣传,晋升用户网络安全意识外,也将多一个抉择,从而更加被动的做出应答。

June 3, 2021 · 1 min · jiezi

关于短信验证码:关于银行业钓鱼攻击风险提示的政策解读

日前,中国银行保险监督管理委员会办公厅会办公厅下发《对于银行业蒙受短信钓鱼攻打无关危险提醒的告诉》,此政策告诉文件面向全国各银保监局、各政策性银行、大型银行、股份制银行、城商行、外资银行,笼罩整个银行业,各级部门告诉如下: 此次事件是从2021年2月份陆续产生,不法分子通过群发短信的形式,内容中多以手机银行生效或身份证过期等内容,诱导银行客户点击其中的伪造手机银行链接,使用户填入手机银行账号、登录明码、短信验证、交易明码等实在信息后,通过冒用客户实在身份信息登录手机银行进行转账操作,实现资金盗取。截止目前,已有数百名客户蒙受损失,被盗取资金1000多万元。 这个政策的背地,其实是随着国家金融科技的蓬勃发展,人工智能、大数据、区块链等新技术与金融业务的深度联合,促成了金融科技的转型,越来越多的金融机构都在应用手机APP来开展业务,但同时也遭逢了大量的金融平安攻打,特地是各种类型的钓鱼攻打,其中银行APP成为钓鱼短信的重灾区。本文将沿着这个思路进行具体的解读,并提出对应的解决方案。 一、银行业线上业务高速倒退1.1 线下物理网点缩减传统银行商业模式的外围是「笼罩更多人群以获取贷款或触达客户金融需要」。故在传统销售模式下,银行会一直增设网点实现业务转化。而在万物互联的明天,这一模式,正在产生扭转。 依据招商银行和中国银行在2017-2019年期间,线下网点裁撤散布数据来看,其中一二线城市物理网点占比招行超过70%,中国银行也有40%的占比。能够预感,随着挪动互联网倒退,以及农村互联网的逐步遍及,传统的物理网点占比将进一步缩减。 数据起源:公开材料整顿 1.2 线上挪动端银行业务办理成为支流相较传统网点,挪动银行对于银行业务的取代率较高,客户的接受度也较高,网点线上化尝试,从一二线城市疾速向全国各区域开展,网上银行APP、微信银行等挪动端更加便捷的操作渠道受到了用户的青睐。 同时手机银行的遍及,越来越的的线下业务转移到线上办理,例如以往须要到银行柜台或ATM办理的转账汇款、投资购买理财、国债等业务均能够在银行APP挪动端实现,大大的节约了用户的工夫与效率。近年来手机银行APP独立设施数始终保持稳定增长,截止2018年7月份,手机银行APP月独立设施数已超过3.2亿,同比增长44%。同时,人均单日应用次数靠近3次,同比增长36%。 数据来源于《2019-2025年中国手机银行APP行业市场需求预测及投资将来发展趋势报告》 疫情以来,全国各大银行线上累积用户数、日活跃度用户数大大晋升。依据中国互联网信息中心公布的第45次《中国互联网络倒退情况统计报告》,截至2020年3月,我国网民规模达9.04亿,较2018年底增长7508万,互联网普及率达64.5%,较2018年底晋升4.9个百分点。如此宏大的互联网用户群体,促使手机银行的个人用户规模也在一直攀升,APP建设经营逐步成为银行线上获客的重点渠道入口。 二、钓鱼短信在金融业日益高发依据中国电子银行报告,截止至2020年第三季度,我国手机银行沉闷用户数高达3.5亿。随着线上用户规模的日益增长,银行业互联网金融安全监管也必然带来重大压力。与此同时,相干的法规及文件层出不穷,其中《金融科技3年布局》更是提出,要求加强金融行业危险科技防备能力,加强网上银行、手机银行、直销银行等业务零碎的平安防护程度,其中特别强调针对仿冒APP、钓鱼网站、钓鱼短信的辨认处理能力的晋升。 据调查,常见钓鱼欺诈伎俩如下: 1、欺诈短信:不法分子利用手机短信,假冒银行名义向客户发送欺骗短信,宣称称客户中奖或账户被别人盗用等,要求客户尽快登录到短信中指定的网站进行身份验证。而该网站是不法分子建设的、用于套取客户信息的假网站,如客户登录该网站并进行操作,客户的卡号、明码、身份证件等信息将会被不法分子获取。 2、木马程序:不法分子通过木马程序等网络技术手段或其余伎俩,近程操纵客户电脑获取客户明码等认证信息,从而盗用客户资金。 3、垃圾邮件:不法分子以垃圾邮件的模式大量发送欺诈性邮件,这些邮件多以中奖、参谋、对账等内容,或是以银行账号被解冻、银行系统升级等各种理由,要求收件人点击邮件上的链接地址,登录一个酷似银行网页的界面,而用户一旦在这个指定的登录界面输出了本人的卡(账)号、明码等,这些信息就会被窃取。 4、混充的银行网站:不法分子在网络上设置与真银行网站域名类似或外观类似的站点,诱骗客户输出用户名及口令,盗取信息后进行网银转账。 以上几种钓鱼欺诈中,以钓鱼短信欺诈最为常见,银行公布的多个外部平安文件中都有提及,咱们具体的来理解一下它是一种什么样的存在?钓鱼短信次要是黑产通过伪装成银行给指定用户或者群发用户发送相似账户提醒内容的相干短信,要求用户提供个人身份信息来验证银行账户的平安,随着欺骗短信作案者的教训回升,整个欺骗行业的分工越来越细成规模化,从搭建钓鱼网站、购买域名、服务器以及网站保护都由专门的包网服务商提供。这些包网服务商还开明了各类后盾管理系统,为料主提供全方位的服务,价格非常便宜; 受害人收到的扣款短信 钓鱼短信欺骗的外围,就是通过各类短信诱导受害者点击钓鱼网站,骗你填完各类信息后再盗刷银行卡。这些蕴含姓名、身份证、银行卡、手机号、验证码的信息,在黑话中叫做「料」,搞料的人叫做「料主」,搞料的过程就是「钓鱼」。 钓鱼网站欺骗全链条 三、解决方案思考3.1 传统短信认证形式弊病剖析在后面咱们曾经具体的剖析了黑产施行钓鱼欺诈的全链条,其中外围的环节就是短信的验证,不论是在钓鱼后期的短信群发,还是钓鱼中期的冒用用户身份登录银行APP零碎中的用户身份短信认证,以及钓鱼前期的盗刷洗钱,外围的作案工具都会应用到传统短信的认证形式。以下是例举为银行APP中利用传统短信作为用户身份认证的常见场景: 实例常见银行APP注册场景流程比照: 综上可见,在银行业手机端,传统短信认证形式的身影在各个外围场景都存在,因而钓鱼短信带来的安全隐患危险破绽大增不容忽视,是否能有新的一代技术创新解决方案代替传统短信的平安危险,带着这个问题咱们一起来看看极验推出的「无感本机认证」产品。 3.2 极验无感本机认证极验新一代的身份认证解决方案「无感本机认证」,代替传统短信验证,既能躲避传统短信验证毛病:短信轰炸、短信钓鱼、短信谬误发送、短信通道梗塞、短信嗅探、第三方运营商用户信息泄露等诸多平安层面问题,同时在用户体验方面也能够解决传统短信存在延时发送不到,导致用户散失投诉等用户体验问题,极验新一代身份认证产品-无感本机认证实用于挪动APP终端、H5以及微信小程序,具体体验demo 极验单干银行业局部案例 结语不论是从政策报告还是当下的金融互联网环境变动,银行大力发展互联网金融科技必然是趋势外围,而在大力发展的过程中,对于互联网安全危险的防备必定也存在诸多困难。平安危险的反抗是一场长久的博弈,咱们要在关注用户平安的同时,让用户体验也越来越优,操作越来越便捷,线上银行业务的倒退能力欣欣向荣,极验在这个过程中致力于用已有的9年反抗黑产风控的教训,32万家服务客户的反抗数据,为金融账户打造新一代的平安与体验极致均衡的认证形式。

April 29, 2021 · 1 min · jiezi

开发中使用-容联-云通信获取短信验证码的-Javascript-接口

开发中使用 【容联 云通信】获取短信验证码的 Javascript 接口注册账号:https://www.yuntongxun.com/,注册后送8元,开发试用可以用很久了。在平台应用列表添加应用。在测试号码中绑定测试手机号码,只有这个号码能接收验证短信。在项目中绑定配置:将控制台首页的开发者主账号信息粘贴复制进下列接口代码的相应位置。一个前后台分离的应用,在后台项目目录下建立 util文件夹,建立util/sms_util.js文件,文件内写使用 【容联 云通信】平台获取短信验证码的 Javascript 接口代码: // 容联云通信 短信验证码接口var md5 = require('blueimp-md5')var moment = require('moment')var Base64 = require('js-base64').Base64;var request = require('request');/*生成指定长度的随机数 */function randomCode(length) { var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; var result = ""; //统一改名: alt + shift + R for (var i = 0; i < length; i++) { var index = Math.ceil(Math.random() * 9); result += chars[index]; } return result;}// console.log(randomCode(6));exports.randomCode = randomCode;/*向指定号码发送指定验证码 */// 将控制台首页的开发者主账号信息粘贴复制进下列接口代码的相应位置function sendCode(phone, code, callback) { var ACCOUNT_SID = ''; var AUTH_TOKEN = ''; var Rest_URL = ''; var AppID = ''; //1. 准备请求url /* 1.使用MD5加密(账户Id + 账户授权令牌 + 时间戳)。其中账户Id和账户授权令牌根据url的验证级别对应主账户。 时间戳是当前系统时间,格式"yyyyMMddHHmmss"。时间戳有效时间为24小时,如:20140416142030 2.SigParameter参数需要大写,如不能写成sig=abcdefg而应该写成sig=ABCDEFG */ var sigParameter = ''; var time = moment().format('YYYYMMDDHHmmss'); sigParameter = md5(ACCOUNT_SID + AUTH_TOKEN + time); var url = Rest_URL + '/2019-6-16/Accounts/' + ACCOUNT_SID + '/SMS/TemplateSMS?sig=' + sigParameter; //2. 准备请求体 var body = { to: phone, appId: AppID, templateId: '1', "datas": [code, "1"] } //body = JSON.stringify(body); //3. 准备请求头 /* 1.使用Base64编码(账户Id + 冒号 + 时间戳)其中账户Id根据url的验证级别对应主账户 2.冒号为英文冒号 3.时间戳是当前系统时间,格式"yyyyMMddHHmmss",需与SigParameter中时间戳相同。 */ var authorization = ACCOUNT_SID + ':' + time; authorization = Base64.encode(authorization); var headers = { 'Accept': 'application/json', 'Content-Type': 'application/json;charset=utf-8', 'Content-Length': JSON.stringify(body).length + '', 'Authorization': authorization } //4. 发送请求, 并得到返回的结果, 调用callback // callback(true); request({ method: 'POST', url: url, headers: headers, body: body, json: true }, function (error, response, body) { console.log(error, response, body); callback(body.statusCode === '000000'); // callback(true); });}exports.sendCode = sendCode;/*sendCode('13716962779', randomCode(6), function (success) { console.log(success);})*/5.在后台路由文件/routes/index.js中引入,使用: ...

June 17, 2019 · 2 min · jiezi

Mob之短信验证集成SMSSDK

开相关发中总会遇到短信验证这些操作,这周没有来得及写新的东西,借此分享一篇以前学习短信验证的笔记,本文使用的是 Mob 提供的 SMSSDK . 下载 SMSSDK官网下载地址:SMSSDK 集成 SMSSDK将 MobCommons.jar、MobTools.jar、SMSSDK-2.0.1.aar、SMSSDKGUI-2.0.1.aar 放到了app 的 libs 目录下,如果不需要带界面的 SMSSDK 可以不添加 SMSSDKGUI-2.0.1.aar,具体文件请参考最新的 SMSSDK。 配置 build.gradle 文件打开 app 下面的 build.gradle 文件进行如下配置: 配置AndroidManifest.xml在 AndroidManifest.xml 文件中配置权限和Application. 配置权限<uses-permission android:name="android.permission.READ_CONTACTS" /><uses-permission android:name="android.permission.READ_PHONE_STATE" /><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.RECEIVE_SMS" /><uses-permission android:name="android.permission.READ_SMS" /><uses-permission android:name="android.permission.GET_TASKS" /><uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />配置 application<activity android:name="com.mob.tools.MobUIShell" android:theme="@android:style/Theme.Translucent.NoTitleBar" android:configChanges="keyboardHidden|orientation|screenSize" android:windowSoftInputMode="stateHidden|adjustResize"/>启动 SDKpublic class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); SMSSDK.initSDK(this, "您的appkey", "您的appsecret"); }}参考代码实现一个简单的案例,获取验证码,并进行验证。 ...

May 22, 2019 · 3 min · jiezi