一、需求背景
因项目需要,发布的H5移动端页面中需要支持微信分享,比如分享到朋友圈,分享到朋友等。在借助node.js全栈技术能力情况下,前端研发人员可利用这一特性来进行依业务实际需求的API接口封装。
主要注意地方是:
1.使用到了
cgi-bin/token
获取token和签名
2.拿到token再调用cgi-bin/ticket/getticket
获取ticket
3.拿到ticket之后再依据传入的[noncestr] [timestamp] [url]
生成可以与腾讯服务器匹配校验的签名串
4.参考资料: 微信公从平台签名实现
5.本文所指内容使用egg.js框架实现
二、实现步骤
1.定义接口结构
通过需求分析,我们知道这个接口的请求与返回应该包含:分享标题,分享描述,分享图片,分享链接,返回校验签名等内容。详细描述如下:
请求参数:
参数名 | 参数说明 | 举例 |
---|---|---|
link | 分享链接 | www.yourdomain.com/montage/ind… |
imgUrl | 分享封面图片 | www.yourdomain.com/montage/ima… |
title | 分享标题 | 你的分享标题 |
desc | 分享描述 | 你的分享描述 |
返回结果:
参数名 | 参数说明 | 举例 |
---|---|---|
code | 状态码 | 200 |
message | 状态描述 | 请求成功 |
data | 返回数据 | {} |
- wxAccountInfo | 签名信息 | {} |
-- appId | 微信公众平台分配ID | 'd0ddsldf3542' |
-- timestamp | 签名时间戳 | 1519265659 |
-- nonceStr | 加密字符串 | M4vhCXM |
- wxShareInfo | 透传分享信息 | 略 |
-- ... | 透传分享信息 | 略 |
2.定义路由
假设我们的接口名字定义为/api/service/getWeChatSignature
那么需要进行以下内容的路由配置。
app.controller.api.index.index.getWeChatSignature
为控制器路径。
3.公共配置
微信分享签名配置,需要抽离到外部公共配置文件中,对于egg.js框架来说,约定于配置,我们则只需要将相关配置放置于config/config.default.js
。
4.token获取
接下来便是实现controller与业务相关的功能开发,利用egg.js service
与controller
理念,我们将调用微信接口逻辑部份抽离至单独的service
中
5.获取TICKET
6.签名实现
获取了token与ticket之后则进入关键一步,签名生成实现步骤。
需要
jsapi_ticket
noncestr
timestamp
url
参与签名
这里的noncestr
需要注意需要生成随机字符串
timestamp
则需要注意单位是秒
,因此需要进行转换
最后,将以上几个参数进行sha1
签名
三、使用方法
1.访问地址
http://localhost:7001/api/service/getWeChatSignature
2.调用方式
POST
3.请求参数
{
link: 'https://www.yourdomain.com/montage/index.html', // 分享链接
imgUrl: 'https://www.yourdomain.com/montage/images/cover.jpg', // 分享封面图片
title: '你的分享标题', // 分享标题
desc: '一些描述...' // 分享描述
}
4.返回结果
{
"code":200,
"message":"请求成功",
"data":{
"wxAccountInfo":{
"appId":"your app id", // appid
"timestamp":1519265659, // 时间截
"nonceStr":"M4vhCXM", // 加密字符串
"signature":"your signature no like.. f5617cf42f" // 比对签名
},
"wxShareInfo":{
"imgUrl":"https://mp.yourdomain.com/montage/images/cover.jpg", // 分享封面地址
"link":"https://mp.yourdomain.com/montage/index.html", // 分享链接地址
"desc":"一此描述。。。", // 分享描述
"title":"分享标题" // 分享标题
}
}
}