企业微信JS-SDK调用摄像头

3 篇文章 0 订阅

参考api地址: https://developer.work.weixin.qq.com/document/path/90514

1. 根据所使用的框架引入js文件

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2. JS-SDK使用权限签名算法

签名生成规则如下:
参与签名的参数有四个: noncestr(随机字符串), jsapi_ticket(如何获取参考“获取企业jsapi_ticket”以及“获取应用的jsapi_ticket接口”), timestamp(时间戳), url(当前网页的URL, 不包含#及其后面部分)

前端将地址#后字符进行截断,并发送给后端参与签名算法

let redirectUri = location.href.split('#')[0]

后端接口配置生成

// 前端发送的uri参数
String url = params.get("redirectUri").toString();
// 当前时间戳
 Long timestamp = System.currentTimeMillis() /1000;
 // UUID
 String nonceStr = UUID.randomUUID().toString().replace("-", "");

到这里还差一个签名

  • 获取access_token,自己替换其中的appid、secret
String accessTokenStr = HttpClientUtil.doGet("https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=" + appid + "&corpsecret=" + secret);
JSONObject accessTokenJson = JSONObject.parseObject(accessTokenStr);
if (accessTokenJson.getInteger("errcode") == 0) {
	// access_token 有请求次数限制,需要对请求的access_token和expires_in进行缓存
	// 建议使用redis保存 ...
    return accessTokenJson.getString("access_token");
}
  • 获取jsapiTicket接口凭证,将上一步中获取的access_token传入
String resultStr = HttpClientUtil.doGet("https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=" + accessToken);
JSONObject result = JSONObject.parseObject(resultStr);
if (result.getInteger("errcode") == 0 && result.getString("errmsg").equals("ok")) {
	// ticket 有请求次数限制,需要对请求的ticket 和expires_in进行缓存
	// 建议使用redis保存 ...
    return result.getString("ticket");
}
  • 将已生成的数据拼接成字符串,注意参数的拼接顺序必须按照如下的顺序进行拼接
String paramsString = "jsapi_ticket=" + jsapiTicket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;
  • 使用sha1签名算法进行加密
public String bytesToHex(final byte[] hash) {
    Formatter formatter = new Formatter();
    for (byte b : hash) {
        formatter.format("%02x", b);
    }
    String result = formatter.toString();
    formatter.close();
    return result;
}
public String sign(String paramsStr) throws Exception {
    try {
        MessageDigest sha1 = MessageDigest.getInstance("SHA-1");
        sha1.reset();
        sha1.update(paramsStr.getBytes(StandardCharsets.UTF_8));
        return bytesToHex(sha1.digest());
    } catch (NoSuchAlgorithmException e) {
        throw new Exception("jsapi_ticket计算签名错误");
    }
}
  • 将前端所需的数据返回
    在这里插入图片描述

3. 通过config接口注入权限验证配置

在需要使用扫一扫的地方页面载入时,先将配置注入

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

4. 调用微信扫一扫

wx.scanQRCode({
	needResult: 1,// 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
	scanType: ["qrCode","barCode"],// 可以指定扫二维码还是条形码
	success: function (res) {
		//扫码成功后回调的方法
		console.log(res)
	},
	fail: function (res) {
		console.log(res)
		alert("系统错误:"+JSON.stringify(res))
	}
})

5. 应用配置中需要注意的事项 80001错误

主页与可信域名应该保持一致,需要都为域名,且已通过认证,认证方式是将文件放入访问的地址的根目录下,如http://www.xxx.com:8024/xxx.txt,如果为tomcat可以放到ROOT文件夹下
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值