uniapp移动端——企业微信H5调用jssdk实现扫一扫,通过weixin-java-cp获取ticket签名,配置config

背景:

使用企业微信开发扫一扫功能

可信域名验证

(1)企业微信的可信域名需要和企业微信的备案主体一致。

域名备案主体可通过站长工具查看域名备案主体。https://icp.chinaz.com/

企业微信备案主体可以咨询管理员

(2)通过nginx配置域名归属验证txt文件

具体操作详见:

https://blog.csdn.net/zhaolulu916/article/details/128613264?spm=1001.2014.3001.5502

(3)网页授权及JS-SDK配置成功效果如下

(4)可信域名配置正确,但无法通过验证,可在开发者中心提问。也可以配置重定向后带端口的地址

  1. 白名单配置

代码最终部署到服务器上,将服务器的IP配置到白名单里,这样调试就不会提示IP不在白名单范围内,此界面在系统管理员界面有。

3 .前端代码获取企业微信签名,并配置JSSDK权限

(1)npm安装weixin-js-sdk

复制代码
npm install weixin-js-sdk --save

(2)在main.js全局引入weixin-js-sdk

复制代码
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

在组件中使用:

(3) 配置获取企业微信签名和使用JSSDK权

此时获取的url可以是域名重定向后的带端口的,但是此url需要在企业微信上进行可信域名登记。

javascript 复制代码
	// 扫一扫
			async scan() {
				let url = window.location.href.split('#')[0];
				const respose = await getSignature(
				)
				const {
					data
				} = respose
				this.wxConfig(data.appId,
					data.timestamp,
					data.nonceStr,
					data.signature)

			},


//wx.config的配置
			wxConfig(appId, timestamp, nonceStr, signature) {
				jweixin.config({
					debug: false, // 开启调试模式,
					appId: appId, // 必填,企业号的唯一标识
					timestamp: timestamp, // 必填,生成签名的时间戳
					nonceStr: nonceStr, // 必填,生成签名的随机串
					signature: signature, // 必填,签名
					jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
				});
				jweixin.ready(() => {
					console.log('配置完成,扫码前准备完成')
					jweixin.scanQRCode({
						desc: 'scanQRCode desc',
						needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
						scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
						success: function(res) {
							var result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
							// var resultArr = result.split(','); // 扫描结果以逗号分割数组(一维码)
							// var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素,也就是最终的内容 
							// _this.form.imei = codeContent
							// alert('扫码成功!')
						},
					});

				})
				jweixin.error(function(res) {
					// console.log('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
				});
			},

(4)新增qywx.js编写api接口

javascript 复制代码
// 企业微信签名

export function getSignature(data) {
	return http.request({
		url: "/work-wechat/qywx/signature",
		data: data,
		method: "get",
	})
}

使用时引入

复制代码
import {getSignature} from "@/api/employeeCare/index.js"
  1. 后端代码通过weixin-java-cp开发工具获取签名

后端使用的是https://github.com/binarywang/的weixin-java-cp开发工具

(1)引入企业微信开发工具

java 复制代码
<dependency>

<groupId>com.github.binarywang</groupId>

<artifactId>weixin-java-cp</artifactId>

<version>3.8.0</version>

</dependency>

(2)新增QywxController

java 复制代码
@RestController
public class QywxController {
    @Autowired
    private QywxService qywxService;
    @GetMapping(value = "/system/qywx/signature/")
    public WxJsapiSignature getJsapiSignature(@RequestParam("url") String url) {
        try {  // 直接调用wxMpServer 接口
            System.out.println("访问WxJsapiSignature=====/system/qywx/signature/"+url+"");
            WxJsapiSignature wxJsapiSignature = qywxService.getJsapiSignture(url);
            System.out.println("AppId==="+wxJsapiSignature.getAppId());
            System.out.println("Timestamp==="+wxJsapiSignature.getTimestamp());
            System.out.println("NonceStr==="+wxJsapiSignature.getNonceStr());
            System.out.println("Signature==="+wxJsapiSignature.getSignature());
            return wxJsapiSignature;
        } catch (WxErrorException e) {
            return null;
        }
    }

(3)新增QywxService,使用weixin-java-cp中的WxCpServiceImpl生成签名

java 复制代码
@Service
public class QywxService {
    //获取对应应用的签名
    public WxJsapiSignature getJsapiSignture(String url) throws WxErrorException {
        // 替换成自己应用的appId和secret,agentId
        Integer agentId = 1111111;
        String corpId="XXXXXXXX";
        String corpSecret = "XXXXXXXX";
        WxCpDefaultConfigImpl config = new WxCpDefaultConfigImpl();
        config.setCorpId(corpId);      // 设置微信企业号的appid
        config.setCorpSecret(corpSecret);  // 设置微信企业号的app corpSecret
        config.setAgentId(agentId);     // 设置微信企业号应用ID
        WxCpServiceImpl wxCpService = new WxCpServiceImpl();
        wxCpService.setWxCpConfigStorage(config);
        System.out.println("WxJsapiSignature===url==="+url);
        WxJsapiSignature wxJsapiSignature = wxCpService.createJsapiSignature(url);
        //wxJsapiSignature中可以直接获取签名信息 且方法内部添加了缓存功能
        return wxJsapiSignature;
    }
 
}

(4)签名的结果验证

java 复制代码
https://developer.work.weixin.qq.com/devtool/signature

其中jsapi_ticket是企业的ticket,不是应用的ticket

  1. 扫一扫调用JSSDK代码 jweixin.scanQRCode
javascript 复制代码
//wx.config的配置
			wxConfig(appId, timestamp, nonceStr, signature) {
				jweixin.config({
					debug: false, // 开启调试模式,
					appId: appId, // 必填,企业号的唯一标识
					timestamp: timestamp, // 必填,生成签名的时间戳
					nonceStr: nonceStr, // 必填,生成签名的随机串
					signature: signature, // 必填,签名
					jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
				});
				jweixin.ready(() => {
					console.log('配置完成,扫码前准备完成')
					jweixin.scanQRCode({
						desc: 'scanQRCode desc',
						needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
						scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
						success: function(res) {
							var result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
							// var resultArr = result.split(','); // 扫描结果以逗号分割数组(一维码)
							// var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素,也就是最终的内容 
							// _this.form.imei = codeContent
							// alert('扫码成功!')
						},
					});

				})
				jweixin.error(function(res) {
					// console.log('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
				});
			},
  1. 扫一扫最终效果如下

以下效果图是代码部署到服务器上,配置成功手机端效果:

显示正常后,关闭调试模式

debug: false, // 开启调试模式,

  1. 参考文章

https://blog.csdn.net/weixin_40816738/article/details/123170569

https://developer.work.weixin.qq.com/document/path/90547

https://blog.csdn.net/weixin_45243487/article/details/125101558

相关推荐
Moniane1 分钟前
时序数据库全面重构指南
java·后端·struts
whm277719 分钟前
Visual Basic 值传递与地址传递
java·开发语言·数据结构
2501_9159214324 分钟前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
没有bug.的程序员26 分钟前
云原生与分布式架构的完美融合:从理论到生产实践
java·分布式·微服务·云原生·架构
村口张大爷36 分钟前
Spring Boot 初始化钩子
java·spring boot·后端
x_feng_x40 分钟前
Java从入门到精通 - 集合框架(二)
java·开发语言·windows
LB211240 分钟前
苍穹外卖-缓存套餐 Spring Cache day07
java·spring boot·spring
Le1Yu1 小时前
雪崩问题及其解决方案(请求限流、线程隔离、服务熔断、fallback、sentinel实现以上功能)
java·开发语言
徐子童1 小时前
基于微服务的在线判题系统重点总结
java·微服务·架构
青衫码上行1 小时前
【从0开始学习Java | 第21篇】网络编程综合练习
java·网络·学习