微信公众号开发-----JS-SDK使用权限签名算法

本文只提供代码实现,具体参数含义请先仔细阅读微信公众号技术文档之JS-SDK说明文档

jsapi_ticke

简介:jsapi_ticket是公众号用于调用微信JS接口的临时票据

获取方式:

  1. 参考以下文档获取access_token(有效期7200秒,开发者必须在自己的服务全局缓存access_token):https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
    具体代码参考:微信公众号开发----获取access_token,定时刷新access_token

  2. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket)

    2.1相关jar包

     <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.47</version>
     </dependency>
    

    2.2 创建实体(此处省去set/get方法)

    import com.alibaba.fastjson.annotation.JSONField;
    
    public class Jsapi {
    
        private int errcode;
    
        private String errmsg;
    
        private String ticket;
    
        @JSONField(name = "expires_in")
        private String expiresIn;
    
    }
    

    2.3 HttpUtil
    用于发送POST或GET请求:HttpsUtil类

    2.4 获取ticket

    public class WechatUtil {
    
     private static Logger log = LogManager.getLogger(WechatUtil.class);
    
     private static final String JSAPI_TICKET_URL ="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
    
     /**
         * 通过access_token 采用http GET方式请求获得jsapi_ticket
         * @param accessToken
         * @return
         */
        public static String getJsapiTicket(String accessToken){
            String requestUrl = JSAPI_TICKET_URL.replace("ACCESS_TOKEN", accessToken);
            JSONObject jsonObject = HttpsUtil.request(requestUrl, "GET", null);
            Integer errCode = jsonObject.getInteger("errcode");
            if (errCode == 0){
                Jsapi jsapi= Json.getJson().parse(jsonObject.toJSONString(), Jsapi.class);
                return jsapi.getTicket();
            }else {
                log.warn("获取jsapi_ticke失败:"+jsonObject.toJSONString());
                return null;
            }
       	 }
       }
    

签名算法

参与签名的字段包括noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分。

生成步骤:

  1. 对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1
  2. 对string1作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。即signature=sha1(string1)
/**
     * 获取JS-SDK签名
     * @param url  当前网页的URL
     * @param accessToken 
     * @return
     */
  public Map<String,String>  getJsSdkSign(String url, String accessToken){
     	 //获取Ticket
        String jsapiTicket = WechatUtil.getJsapiTicket(accessToken);
        //时间戳和随机字符串
        String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//随机字符串
        String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//时间戳
        //将参数排序并拼接字符串
        String str = "jsapi_ticket="+jsapiTicket+"&noncestr="+noncestr+"&timestamp="+timestamp+"&url="+url;
        //将字符串进行sha1加密
        String signature = SHA1.getSHA1(str);
        Map<String,String> map = new HashMap<>();
        map.put("nonceStr",noncestr);
        map.put("timestamp",timestamp);
        map.put("signature",signature);
        return map;
    }

注:代码中使用到的工具类请参考:消息加密工具-----SHA-1

### 如何在 UniApp 中集成配置微信 JS-SDK 为了在 UniApp 项目中使用微信 JS-SDK 获取用户定位等功能,需先完成 SDK 的安装与基本配置。这一步骤涉及引入必要的 JavaScript 文件以及设置应用 ID 和签名验证等操作[^1]。 ```javascript // main.js 或者 app.vue 中全局引入 wx sdk import wepy from 'wepy'; import WXAPI from './utils/wxapi'; // 自定义封装的wx api工具类 wepy.$WXAPI = WXAPI; ``` #### 判断当前环境是否为微信浏览器 考虑到微信 JS-SDK 功能仅能在微信内置浏览器内正常工作,在实际开发过程中应加入检测逻辑来确认运行环境: ```javascript function isWeChat() { const ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) === "micromessenger") { return true; } else { return false; } } if (!isWeChat()) { console.log('非微信环境'); } else { console.log('微信环境'); } ``` #### 初始化 JSSDK 并获取权限列表 当确认处于微信环境中后,则可通过发起 HTTP 请求向服务器端申请所需的接口权限票据(即 `jsapi_ticket`),随后利用该票据生成用于前端调用 API 所必需的安全参数集合,包括但不限于时间戳、随机字符串及签名算法计算得出的结果。这些准备工作完成后即可通过如下方式加载并启用所需的功能模块[^4]。 ```javascript async function initJssdkShare(url) { try { let res = await this.$http.get('/wechat/jssdk', { url }); if (res.code !== 0) throw new Error(res.msg); wx.config({ debug: false, // 开启调试模式, appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature,// 必填,签名jsApiList: ['getLocation'] // 必填,需要使用JS接口列表 }); wx.ready(function () { // config信息验证成功后会执行ready方法 console.log('config success'); // 使用接口 wx.getLocation({ type: 'gcj02', success: function (res) { alert(JSON.stringify(res)); }, cancel: function (res) { alert('用户拒绝授权获取地理位置'); } }) }); wx.error(function (res) { // config信息验证失败会执行error函数 console.warn(`config error:${JSON.stringify(res)}`); }); } catch (err) { console.error(err.message || err); } } ``` 以上代码展示了如何在一个具体的页面组件里实现对微信位置服务的支持。需要注意的是,这里假设已经存在了一个可以返回正确配置项的服务端接口 `/wechat/jssdk`,并且客户端能够顺利访问此接口获得合法有效的响应数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值