微信公众号JS-SDK开发

最新推荐文章于 2022-09-06 14:32:03 发布

JiuShanCunMonkeyKing

最新推荐文章于 2022-09-06 14:32:03 发布

阅读量762

点赞数

分类专栏：微信

本文链接：https://blog.csdn.net/jiushancunmonkeyking/article/details/103591093

版权

微信专栏收录该内容

2 篇文章 0 订阅

订阅专栏

日常开发中，有时候会使用到微信的js，所以我们需要做JS-SDK开发，在这里记录一下JS-SDK开发过程

在后台配置好JS安全域名，此处域名和上面网页授权的域名一致。

配置完成后，在前端需要使用微信JS的页面上请求后台去验证签名是否正确，如果正确，后台返回签名等信息，然后前端再使用签名等信息调用wx.config，在wx.config里面jsApiList[]里面的就是我们需要用到的微信JS方法。

<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>微信签到系统</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="wrapper">

index.html

</div>

<script>
    $(function () {
        getJsSdk();
        console.log(location.href.split('#')[0]);
    })

    function getJsSdk(){
        $.ajax({
            url : "/wx/getJs-SDK",
            type : 'post',
            dataType : 'json',
            data : {
                //'url' : encodeURIComponent(location.href.split('#')[0])
                'url':location.href.split('#')[0]
            },
            success:function(data){
                wx.config({
                    beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，企业微信的corpID
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
                    jsApiList: ['openDefaultBrowser'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
                });

                wx.ready(function(){
                    wx.invoke('openDefaultBrowser', {
                        'url': 'http://www.baidu.com' // 在默认浏览器打开redirect_uri，并附加code参数；也可以直接指定要打开的url，此时不会附带上code参数。
                    }, function(res){
                        if(res.errMsg == "openDefaultBrowser:ok"){
                            wx.closeWindow();
                            window.close();
                        }
                    });

                });

                wx.error(function(res){
                    console.log(res);
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                });
            }
        })
    }

</script>
</body>
</html>

@PostMapping("/getJs-SDK")
    @ResponseBody
    public Map<String,Object> getJSSDKSignature(String url,HttpServletRequest request)throws Exception{
        if(StringUtils.isBlank(url)) {
            throw new Exception("请求路径不能为空");
        }
        //url = URLDecoder.decode(url, "UTF-8");
        Date time = new Date();
        //去redis里面获取token和Ticket
        String accessTokenUrl = WxConstants.QIYE_ACCESS_TOKEN_URL.replace("ID", WxConstants.CORPID).replace("SECRET", WxConstants.SECRETID);
        String tokenJson = WxUtil.loadJson(accessTokenUrl);
        System.out.println(tokenJson);
        //String access_token =   (String) WxUtil.parseJSON2Map(tokenJson).get("access_token");
        String access_token = "g8LKjbYzkcmxVf2CDNGl-Ty43JORbn6tbLxepEzoV2MNrXwRWvcFWqt44HYH8eFw6koV0N5RkKiOOzQjlARcAA4_-H2TZ8Ws-7tU0vlQPwR_vBzNg47aBuddLYJhV9fnEQl8px4dd5fQaiuJ6GLyxQX_YrzS_12de5MzTYMIMpsLblCRNj6qZs1nBcY8aVuLexiRvvDZed2-7LxPSJc5RQ";
        System.out.println(access_token);
        //ticket
        //String ticket = WxUtil.getJsApiTicket(access_token);
        String ticket = "bxLdikRXVbTPdHSM05e5u74DjS18dxtXsnW1O7AWO91EmVMctXZoI_g5slEuuBDprWzl0btNpgqKbY-GXvp5yA";
        //存入Redis

        Map<String,Object> resultMap = new HashMap<>();
        System.out.println("ticket === "+ticket);
        //随机字符串
        String nonceStr = UUIDUtil.randomUUID8();
        // 时间戳
        long timestamp = time.getTime();
        String str = "jsapi_ticket=" + ticket;
        str += "&noncestr=" + nonceStr;
        str += "&timestamp=" + timestamp;
        str += "&url=" + url;
        //微信签名
        String signature = DigestUtils.sha1Hex(str);
        resultMap.put("nonceStr", nonceStr);
        resultMap.put("signature", signature);
        resultMap.put("timestamp", timestamp);
        resultMap.put("appId", WxConstants.CORPID);
        for(String key:resultMap.keySet()){
            System.out.println("key === "+key+"value === "+ resultMap.get(key));
        }
        return resultMap;
    }

如果是企业微信，在配置完成js-sdk域名之后，还需要下载一个文件，然后放在resources文件夹下面

JiuShanCunMonkeyKing

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
微信公众号JS-SDK开发

日常开发中，有时候会使用到微信的js，所以我们需要做JS-SDK开发，在这里记录一下JS-SDK开发过程在后台配置好JS安全域名，此处域名和上面网页授权的域名一致。配置完成后，在前端需要使用微信JS的页面上请求后台去验证签名是否正确，如果正确，后台返回签名等信息，然后前端再使用签名等信息调用wx.config，在wx.config里面jsApiList[]里面的就是我们需要用到的微信J...
复制链接

扫一扫