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

本文主要是介绍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)可信域名配置正确,但无法通过验证,可在开发者中心提问。也可以配置重定向后带端口的地址


2. 白名单配置
代码最终部署到服务器上,将服务器的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需要在企业微信上进行可信域名登记。

	// 扫一扫async scan() {let url = window.location.href.split('#')[0];const respose = await getSignature()const {data} = resposethis.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接口

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

使用时引入

import {getSignature} from "@/api/employeeCare/index.js"

4. 后端代码通过weixin-java-cp开发工具获取签名
后端使用的是https://github.com/binarywang/的weixin-java-cp开发工具

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

<dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-cp</artifactId><version>3.8.0</version></dependency>

(2)新增QywxController

@RestController
public class QywxController {@Autowiredprivate 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生成签名

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


(4)签名的结果验证

https://developer.work.weixin.qq.com/devtool/signature

其中jsapi_ticket是企业的ticket,不是应用的ticket
5. 扫一扫调用JSSDK代码  jweixin.scanQRCode


//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配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。});},

6. 扫一扫最终效果如下
以下效果图是代码部署到服务器上,配置成功手机端效果:
显示正常后,关闭调试模式

debug: false, // 开启调试模式,
7. 参考文章
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

这篇关于uniapp移动端——企业微信H5调用jssdk实现扫一扫,通过weixin-java-cp获取ticket签名,配置config的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/642346

相关文章

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

SpringBoot3实现Gzip压缩优化的技术指南

《SpringBoot3实现Gzip压缩优化的技术指南》随着Web应用的用户量和数据量增加,网络带宽和页面加载速度逐渐成为瓶颈,为了减少数据传输量,提高用户体验,我们可以使用Gzip压缩HTTP响应,... 目录1、简述2、配置2.1 添加依赖2.2 配置 Gzip 压缩3、服务端应用4、前端应用4.1 N

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Java枚举类实现Key-Value映射的多种实现方式

《Java枚举类实现Key-Value映射的多种实现方式》在Java开发中,枚举(Enum)是一种特殊的类,本文将详细介绍Java枚举类实现key-value映射的多种方式,有需要的小伙伴可以根据需要... 目录前言一、基础实现方式1.1 为枚举添加属性和构造方法二、http://www.cppcns.co

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.