一、准备工作
- 一个已备案的网站
- 一个已认证的公众号(注意,个人权限是不可以的,需要企业权限)。
确保你有一个企业级的微信公众号,并完成企业认证。个人公众号可能无法获取全部接口权限。
- 获取AppID和AppSecret
在微信公众平台登录后,进入“开发”部分,选择“基本配置”,在这里你可以找到你的AppID和AppSecret。
二、微信公众号后台设置
- 设置JS接口安全域名:
进入公众号设置的“功能设置”中,填写“JS接口安全域名”。需确保你的网页服务部署在此域名下,且该域名已通过ICP备案。 - 设置IP白名单:
在“安全中心”或“开发者中心”设置服务器IP白名单,以便微信服务器能够与之通信。
三、获取签名(含代码)
3.1 获取access_token
- 接口说明:
使用你的AppID和AppSecret,通过GET请求到api.weixin.qq.com/cgi-bin/tok…
参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):
官方文档:developers.weixin.qq.com/doc/offiacc…
- golang代码示例
1 | go复制代码/* |
返回示例:
1 | json复制代码{ |
3.2 获取jsapi_ticket
- 接口说明:
使用上一步获取的access_token,通过GET请求到api.weixin.qq.com/cgi-bin/tic…
参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token)
官方文档:developers.weixin.qq.com/doc/offiacc…
- 请求方式:
1 | bash复制代码请求方式:GET |
- jsapi_ticket 说明:
jsapi_ticket是公众号用于调用微信 JS 接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。由于获取jsapi_ticket的 api 调用次数非常有限,频繁刷新jsapi_ticket会导致 api 调用受限,影响自身业务,开发者必须在自己的服务全局缓存jsapi_ticket (这里建议将 access_token 和 jsapi_ticket 都在服务器端进行获取并缓存,前端通过接口调取结果)。
- golang代码示例:
1 | go复制代码package weixinclient |
成功返回如下JSON:
1 | json复制代码{ |
3.3 根据获取到的 ticket 来生成签名
- 签名说明
微信开发中,ticket 通常用于获取 JS-SDK 的配置参数,包括签名(signature)。这些参数使得你能够在网页上使用微信的 JS-SDK。以下是一个基本的步骤说明如何使用获取到的 ticket 来生成签名:
准备用于签名的参数:nonceStr(随机字符串), timestamp(时间戳), url(当前网页的 URL,不包含 # 及其后面部分)和 jsapi_ticket。
将这些参数按照字段名的ASCII 码从小到大排序(字典序),并且使用 URL 键值对的格式(即 key1=value1&key2=value2…)拼接成字符串。
对拼接后的字符串进行 SHA1 加密,得到的结果即是签名(signature)。
- golang代码示例
1 | go复制代码package main |
在这个示例中,GenerateSignature 函数接受四个参数:nonceStr(随机字符串),timestamp(时间戳),url(当前网页的URL),和jsapiTicket(从微信服务器获取的票据)。函数内部会对这些参数进行字典排序,拼接成一个待签名的字符串,然后使用SHA1算法生成签名。
请注意,为了简化示例,这里直接提供了nonceStr、timestamp、url和jsapiTicket的示例值。在实际应用中,我们需要根据具体情况动态获取这些值。特别是jsapiTicket,你需要先从微信服务器获取。
最后,main 函数中调用了 GenerateSignature 并打印出了生成的签名。我们可以将这段代码集成到我们的Go应用中,并根据需要进行适当的修改和调整。
- noncestr 的含义是什么?应该如何动态获取?
noncestr是一个随机字符串,通常用于确保请求的唯一性和安全性。在微信JS-SDK、微信支付等接口中,noncestr 作为一个重要的参数,用于防止重放攻击和确保请求的时效性。
在微信开发中,noncestr 通常需要你自己生成,并确保其唯一性和随机性。以下是几种生成 noncestr 的方法:
- 使用随机数或UUID:
你可以使用编程语言中的随机数生成函数或者UUID生成库来创建一个唯一的字符串。例如,在Go语言中,你可以使用crypto/rand库生成一个随机数,并将其转换为字符串,或者使用第三方库如github.com/google/uuid来生成一个UUID。 - 时间戳结合随机数:
为了增加noncestr的复杂性,你也可以将当前的时间戳与随机数结合起来使用。这样既可以保证每次请求的noncestr都是唯一的,也能通过时间戳增加一定的时效性验证。 - 使用安全的随机数生成器:
在安全性要求较高的场景下,应使用安全的随机数生成器来产生noncestr,以确保其不可预测性。
golang动态获取 noncestr
1 | go复制代码package main |
得到的签名:
1 | 复制代码e851776f519a6c8d716bc61a5dec87b042d14c3e |
四、H5页面配置与分享设置
注意:从这一步开始,后面的部分属于前端工作
4.1 引入微信JS-SDK
在需要调用 JS 接口的页面引入如下 JS文件,(支持https):res.wx.qq.com/open/js/jwe…
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:res2.wx.qq.com/open/js/jwe…
备注:支持使用 AMD/CMD 标准模块加载方法加载
4.2 通过 config 接口注入权限验证配置
所有需要使用 JS-SDK 的页面必须先注入配置信息,否则将无法调用(同一个 url 仅需调用一次,对于变化 url 的SPA的web app可在每次 url 变化时进行调用,目前 Android 微信客户端不支持 pushState 的H5新特性,所以使用 pushState 来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
注意:
- 引入JS文件后,直接执行下列代码
- debug: true 用来调试的,如果不想alert弹出,改成false即可
- alert 弹出框中 errMsg 不一定就是错误,知识提示信息,例如 updateAppMessageShareData:ok 代表的是updateAppMessageShareData接口是没有问题的。
- 签名用的 noncestr 和 timestamp 必须与 wx.config 中的 nonceStr 和 timestamp 相同。
- jsApiList 接口列表:developers.weixin.qq.com/doc/offiacc…
- jsApiList 接口列表 例如 wx.updateAppMessageShareData({ 配置 }) jsApiList填写 [‘updateAppMessageShareData’] 即可
1 | csharp复制代码wx.config({ |
4.3 通过 ready 接口处理成功验证
在wx.ready函数中配置onMenuShareTimeline、onMenuShareAppMessage等接口实现微信分享功能,并设置自定义的分享标题、描述、缩略图及链接。
1 | lua复制代码wx.ready(function(){ |
4.4 通过 error 接口处理失败验证
使用wx.error函数处理验证失败的情况。
1 | lua复制代码wx.error(function(res){ |
4.5 js代码示例
1 | javascript复制代码// 模拟从后端获取签名等配置信息的函数 |
本文转载自: 掘金