有位朋友让我给他新开的网站帮忙做几个小功能,如下:
- 输入快递公司、快递单号,查询出这个快件的所有动态(从哪里出发,到了哪里)
- 在注册、登录等场景下的手机验证码(要求有一定的防刷策略)
- 通过输入公司名的关键词,查看这个公司是否已经注册、法人信息、有类似名称的公司等等
并且可以用的接口、文档都提供给我了。
其中需求 1、2,都通过 聚合数据 这家网站提供的接口实现;需求 3 通过 云聚数据 来实现。
本项目的文件
因为朋友的网站是用 ThinkPHP 写的,为了保持将来代码的兼容,这三个功能也用 ThinkPHP 写成。
项目的所有文件都放在了 GitHub 上,部分敏感数据已经隐藏,你需要自行替换,地址如下:
GitHub 地址:使用聚合数据API查询快递数据-短信验证码-企业核名
因为这三个功能并不是正式产品,将来会需要嵌入到网站的各个功能模块中去,所以为了查看起来方便,三个功能的代码都写在一个文件里,你只要重点关注以下几个文件就好:
-
/Home/Conf/config.php
参数配置文件 -
/Home/Controller/IndexController.class.php
后端代码、API的请求与处理 -
/Home/View/Index_index.html
前端 html
申请 KEY 和阅读开发文档
分别到上面两家网站上找到“快递”、“短信”、“核名”的文档地址,根据里面的说明,把 KEY、URL 等信息放入配置文件Home/Conf/config.php
,方便后面重复使用。
注意 短信的 API 服务,要先到网站的后台添加“短信模板”,让管理员审核后才可以正常调用
最后,Home/Conf/config.php
配置文件里的内容如下
return array( // 快递查询 'EXPRESS_APP_KEY' => '你的快递 APPKEY', 'EXPRESS_QUERY_URL' => 'http://v.juhe.cn/exp/index', //快递单号查询 'EXPRESS_COM_URL' => 'http://v.juhe.cn/exp/com', //快递公司查询 // 发短信 'SEND_SMS_KEY' => '你的短信接口 APPKEY', 'SEND_SMS_URL' => 'http://v.juhe.cn/sms/send', // 核名 'COMPANY_KEY' => '核名 APPKEY', 'COMPANY_URL' => 'http://eci.yjapi.com/ECIFast/Search', //数据库配置信息 'DB_TYPE' => 'mysql', // 数据库类型 'DB_HOST' => 'localhost', // 服务器地址 'DB_NAME' => '你的数据库名', // 数据库名 'DB_USER' => '你的数据库用户名', // 用户名 'DB_PWD' => '密码', // 密码 'DB_PORT' => 3306, // 端口 'DB_PREFIX' => 'pre_', // 数据库表前缀 'DB_CHARSET'=> 'utf8', // 字符集 );
设置数据库
为了防止恶意用户利用暴露在外的短信接口捣乱,需要对每个手机号码的行为进行记录。例如:
- 向某个手机号码发送短信验证码后, 60 秒内不能再次发送
- 必须在 1 小时内填写短信验证码,否则会过期
- 避免 ajax 请求地址被机器人程序利用,在表单里要使用图片验证码才能提交数据
关于“表单验证码”我们后面代码会说明,这里先创建表结构如下,用于记录短信发送记录:
CREATE TABLE `pre_smsrecord` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `mobile` varchar(11) NOT NULL DEFAULT '', `tpl_id` int(11) NOT NULL, `code` int(6) NOT NULL, `time` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=M
-
mobile
是手机号码 -
tpl_id
是在网站后台添加并通过审核的短信模板 -
code
是发送的验证码(一般是4位或6位) -
time
是发送时间戳
直接下载sql进行还原:在本项目的 GitHub 地址上也可以直接从 /Pubic
目录找到 sql 文件,你可以直接把它还原你的 MySQL 上。
表单验证码的实现
最终效果如下:
因为三个功能都需要表单验证码,所以首先实现它。
打开 /Home/View/Index_index.html
,注意里面图片验证码 img 标签,以及对应的 javascript
<p> (通用)输入验证码 <input type="text" name="verify" id="verify"> <img id="verify-img" src="/?m=Home&c=Index&a=verify" alt=""> <a id="btn-refresh-verify" href="javascript:;" title="">刷新</a> </p> <script type="text/javascript" charset="utf-8"> jQuery(document).ready(function($) { // 刷新验证码按钮 $("#btn-refresh-verify").click(function(event) { $("#verify-img").attr('src', '/?m=Home&c=Index&a=verify' + "&time=" + new Date().getTime()); }); }); </script>
对应的后端代码在 /Home/Controller/IndexController.class.php
中
/** * +-------------------------------------------------------------------------- * 生成验证码 * * +-------------------------------------------------------------------------- */ public function verify(){ $Verify = new \Think\Verify(); $Verify->entry(); } /** * +-------------------------------------------------------------------------- * 检查验证码 * *