帮你打开活字格更神奇的功能：五十五，登录页面添加短信验证码功能（新）

收藏

本帖最后由 willning 于 2022-8-15 16:02 编辑

重要提示

活字格在V6.0中增加服务端命令功能，腾讯云短信也配套提供了运行在服务端的版本，配合使用可避免在页面端执行，带来的验证码被用户通过F12或JavaScript获取到的风险。

服务端命令帮助文档

腾讯云短信服务端命令

============以下为旧版本的解决方案，适用于V5.0 Update 1及更早期版本============

目前活字格在登录系统的时候，是通过用户名和密码的形式。一些小伙伴会觉得仅通过这两个信息进行验证不够安全，希望可以再添加一个根据短信验证码验证登录的功能。

对活字格比较熟悉的盆友一定记得，活字格中有一个对接腾讯云，发送短信的插件——>传送门：https://gcdn.grapecity.com.cn/fo ... 8830&extra=page%3D1

有了这个插件，实现短信验证码的功能就简单多啦~那么，到底怎么把这个功能加到内建的登录页面中呢，让我们一起来看看吧~

1.打开内建的登录页面，仿照用户名和密码的样子，添加输入手机号和验证码单元格，并设置为文本框类型。同时添加一个发送验证码的按钮（也可以使用超链接）
image.png804163207.png

2.给文本框设置水印
image.png553974303.png

3.给发送短信验证码添加发送短信命令，各参数的具体说明请参考该插件的帮助文档：https://gcdn.grapecity.com.cn/fo ... 8830&extra=page%3D1
image.png346082763.png

4.在页面中的隐藏列中，使用EXCEL函数公式生成六位随机数作为验证码内容，这个公式有很多种写法，这里我们使用

=INT(RAND()*(999999-100000+1)+100000)

复制代码

5.由于页面一加载就会生成一个随机数，当我点击发送验证码按钮后这个随机数就会变化，填写用户名或密码等时都会变化。所以我们需要在发送验证码命令后，添加一个设置单元格属性的命令，用来将发送出去的那个验证码固定记录在某个单元格中

image.png840448303.png

6.使用IF函数，比较用户输入的验证码和=AX10单元格中记录的单元格是否一致，一致则为1，不一致为0。同时给该单元格起个名字，比如这里叫做result
image.png386869506.png

这里需要注意，当图中1、2两个单元格值都为空时，也是相等的。所以我们需要给手机号和验证码设置数据验证，设置他们为必填项
image.png119882506.png

7.设置发送短信中的手机号码参数为=AG12单元格，短信参数为=AW8单元格（注意因为设置单元格属性在发短信命令之后，所以短信参数这里不能选择=AX10单元格）
image.png817577514.png

8.在文件-设置-自定义JavaScript/Css中添加一个新的.js文件，并添加以下代码

var login = Forguncy.UserManagerCommand.prototype.logIn;
Forguncy.UserManagerCommand.prototype.logIn = function (){
//逻辑代码
var result = Forguncy.Page.getCell("result").getValue();
if(result == 1){
login.apply(this); //登录
}else{
alert("验证码输入有误，请重新输入");
}
}

复制代码

9.如果您是在一个新的空白工程中操作的，那么您需要做一个首页用于验证登录功能是否成功。

到这里就已经做好啦，这个短信验证码功能的做法在第五期基础培训公开课中也有讲过，想看效果的朋友们可以点击链接看看哦~

		自动登录	找回密码
密码			立即注册

[神奇功能] 帮你打开活字格更神奇的功能：五十五，登录页面添加短信验证码功能（新）

0 个回复

讲师达人

悬赏达人

微信认证勋章

元老葡萄

活字格认证

活字格高级认证