微信扫一扫、分享功能引入JS-SDK后端生成signature及signature和微信网页验证一致前端初始化invalid signature

最新推荐文章于 2026-06-07 13:17:10 发布

原创

最新推荐文章于 2026-06-07 13:17:10 发布 · 1.4k 阅读

标签

#java #小程序

本文详细介绍了如何使用微信JS-SDK实现公众号和小程序的功能，包括获取access_token、jsapi_ticket的过程，以及生成signature签名的具体步骤。

js-sdk微信官方文档
开发微信公众号以及微信小程序的时候，有时候会使用到微信的分享、扫一扫、地理位置等常用功能，此时需要前端使用微信的JS-SDK功能来实现。根据微信开放文档的要求，前端有一步是 “通过config接口注入权限验证配置”
在这里插入图片描述
这一步中的参数appId、timestamp、nonceStr、signature需要后端生成给到前端，后端生成signature的时候需要去获取两个参数即access_token和jsapi_ticket才能生成signature签名。
根据附录1的提示：
获取access_token文档
然后根据获取到的access_token作为参数调用下面的接口(GET请求)去获取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
即使用获取到的access_token替换上面url中的ACCESS_TOKEN参数。
注意：微信官方规定每天可获取access_token和jsapi_ticket的次数为10000次且access_token和jsapi_ticket每次生成的有效期都是7200s，其中access_token保证五分钟内新旧值都有效；所以微信官方建议进行缓存access_token和jsapi_ticket的值，防止获取次数过多被限制
在这里插入图片描述
获取到jsapi_ticket之后根据文档上提示的算法进行加密获取signature参数，然后返回给前端就可以使用这些参数进行初始化js-sdk，调用对应的api实现功能

获取signature的算法：
参与签名的参数是：noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分）
1、对上面四个参数进行ASCII码升序排序
2、使用key=value&key=value的格式拼接排好序的参数得到字符串
3、调用sha1算法对上面得到的字符串加密即得到signature
然后将appId、timestamp、nonceStr、signature四个参数返回给前端即可。
注意：其中appId对于同一个公众号或小程序是不变的、signature即上面算法生成的参数、timestamp及nonceStr是参与生成signature使用的noncestr（随机字符串）和timestamp（时间戳）。

后端java代码实现：

	/**
     * js-sdk配置所需参数获取
     *
     * @param referer-url地址
     * @return
     */
    public Map<String, Object> getConfig(String referer) {
   
   
        String accessToken = null;
        RBucket<String> accessTokenBucket = redissonClient.getBucket("redis中accessToken的key");
        //redis缓存中是否存在accessToken
        if (accessTokenBucket.get() == null) {
   
   
            String accessTokenString = getAccessToken();
            JSONObject accessTokenJsonObject = JSON.parseObject(accessTokenString);
            //errcode为null说明获取成功
            if (accessTokenJsonObject.get("errcode") == null) {
   
   
                accessToken = accessTokenJsonObject.getString("access_token");
                accessTokenBucket.set(accessToken, 7000, TimeUnit.SECONDS);
            } else {
   
   
                //获取accessToken失败
                return null;
            }
        } else {
   
   
            accessToken = accessTokenBucket.get();
        }
        //有效的jsapi_ticket
        String jsApiTicket = null;
        RBucket<String> jsApiTicketBucket = redissonClient.getBucket("redis中jsApiTicket的key")

最低0.47元/天解锁文章