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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/645785.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法Hot100系列】不同路径

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

LIMS源码,实验室信息系统源码,后端框架:asp.net

LIMS(laboratory information management system)即实验室信息管理系统是实验室管理科学发展的成果&#xff0c;是实验室管理科学与现代信息技术结合的产物&#xff0c;是利用计算机网络技术、数据存储技术、快速数据处理技术等&#xff0c;对实验室进行全方位管理的计算机软件…

代码随想录二刷——数组day2

文章目录 前言数组知识点 一、 977. 有序数组的平方二、209. 长度最小的子数组三、59. 螺旋矩阵 II总结 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招&#xff0c;计划二刷完卡子哥的刷题计划&#xff0c;加油&#xff01; 二刷决定精刷了&#xff0c;于是参加了卡子哥…

【Linux】糟糕,是心动的感觉——与Linux的初次相遇

初识Linux 导言一、计算机的发展1.1 历史背景1.2 计算机的发明 二、操作系统2.1 什么是操作系统&#xff1f;2.2 操作系统的诞生2.3 操作系统的发展2.3.1 批处理系统的发展2.3.2 分时系统2.3.3 实时系统2.3.4 通用操作系统 2.4 UNIX操作系统2.4.1 UNIX的诞生2.4.2 UNIX的发展 2…

开源 C/C++(DuckX)操作docx文旦

目录 1.详情 2.项目示例 1.详情 创建、读取和写入 Microsoft Office Word docx 文件&#xff0c;可以不使用Microsoft Office组件。目前看操作docx文件绕不开Microsoft Office组件&#xff0c;虽然本项目可以读取docx文档&#xff0c;但是里面排版都消失了&#xff0c;除此之…

Mysql的基本操作详解

当涉及到MySQL数据库的基本操作时&#xff0c;我们通常会涉及到创建数据库、创建表格、插入数据、查询数据等操作。下面是一个简要的MySQL基本操作的博客&#xff1a; --- MySQL基本操作详解 MySQL是一个广泛使用的关系型数据库管理系统&#xff0c;为许多应用程序提供了可靠…

BP神经网络需要像深度学习一次次的迭代训练吗?

BP神经网络 答案&#xff1a;是的&#xff0c;BP神经网络需要像深度学习一次次的迭代训练。总结&#xff08;BP神经网络和深度学习在本质上有以下区别&#xff09; 答案&#xff1a;是的&#xff0c;BP神经网络需要像深度学习一次次的迭代训练。 BP神经网络&#xff08;误差反…

2024.1.24 GNSS 学习笔记

1.伪距观测值公式 2.载波相位观测值公式 3.单点定位技术(Single Point Positionin, SPP) 仅使用伪距观测值&#xff0c;不使用其他的辅助信息获得ECEF框架下绝对定位技术。 使用广播星历的轨钟进行定位&#xff0c;考虑到轨钟的米级精度&#xff0c;所以对于<1米的误差&…

Linux:gcc的相关知识

目录 gcc的翻译&#xff08;编译&#xff09;过程&#xff1a; 预处理&#xff1a; 条件编译&#xff1a; 编译&#xff1a; 汇编&链接&#xff1a; 什么是链接&#xff1f; 安装静态库&#xff1a; 静态库的使用&#xff1a; 动态静态的对比&#xff1a; 优缺对比…

IDEA插件(MyBatis Log Free)

引言 在Java开发中&#xff0c;MyBatis 是一款广泛使用的持久层框架&#xff0c;它简化了SQL映射并提供了强大的数据访问能力。为了更好地调试和优化MyBatis应用中的SQL语句执行&#xff0c;一款名为 MyBatis Log Free 的 IntelliJ IDEA 插件应运而生。这款插件旨在帮助开发者…

Oracle、MySQL数据库常规命令语法-简易记录(非常规持续更新)

前言:呈现的是非常基础必备命令以及常规关联语法,因涉及到不同数据库其表达都会有所区别,此篇纯属做个仓库记录更非常规持续更新,专业人士可忽略,且看且珍惜… MySQL: 关系型数据库、重点开源、支持大型规模、标准SQL数据语言、多平台多架构、高可用集群、可定制开发等等、…

Spring Cloud+SkyWalking全链路监控部署及使用分享

先了解 SkyWalking 极简入门 | Apache SkyWalking 版本&#xff1a;apache-skywalking-apm-9.7.0.tar.gz OAP服务和UI服务 apache-skywalking-java-agent-9.1.0.tgz JAVA-AGENT服务 环境&#xff1a;linux 项目&#xff1a;spring cloud 记录下碰到的问题&#xff1a; 1、s…

uni-app导航栏自定义“返回按钮”多种方法设置原生返回

方法一、 导航栏返回按钮事件 onBackPress监听页面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack;详见app、H5、支付宝小程序onBackPress() { this.back1(); …

【ASP.NET Core 基础知识】--依赖注入(DI)--生命周期和作用域

在依赖注入&#xff08;Dependency Injection&#xff0c;简称 DI&#xff09;中&#xff0c;生命周期和作用域是非常重要的概念&#xff0c;它们对于正确设计和实现软件系统具有至关重要的作用。以下是生命周期和作用域在依赖注入中重要性的详细阐述&#xff1a; 生命周期的重…

阿赵UE学习笔记——12、植物系统

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的用法。这次需要使用植物系统在地形上添加一些草和石头的装饰。 一、素材准备 之前介绍过&#xff0c;可以在Quixel上面获取免费的资源&#xff0c;所以我这里就下载了一些资源&#xff0c;有草和石头的…

windbg:设置断点 bp, bu, bm

bp、bu和bm命令设置一个或多个软件断点。您可以组合位置、条件和选项来设置不同类型的软件断点。 本文中的调试代码示例如下&#xff1a; #include <iostream>using namespace std;struct JKGirl{std::string name;int age;friend ostream& operator <<(ostr…

一文分清:Less、Sass、Scss、stylus,看看与css的对比

一、什么是css预处理器&#xff0c;有什么作用 CSS 预处理器是一种将预先定义的语法和功能添加到 CSS 中的工具。它们允许开发人员使用变量、嵌套规则、混合、继承等功能&#xff0c;以更高效和可维护的方式编写样式表。 CSS 预处理器的作用包括&#xff1a; 变量和计算&…

php项目中laravel框架下用postman调用接口实战总结

一.项目接口实战总结: 1.传参赋值错乱问题&#xff0c;如下&#xff1a; SQLSTATE[HY093]: Invalid parameter number (SQL: select count(*) as aggregate from cars where company_id 3345 and status ! 7 and user_id in (2148, 2060, 2061, 2432, 2136, 1970, 1987, 202…

【unity实战】实现实体子弹射击

文章目录 射击脚本新增子弹预制体子弹挂载脚本&#xff0c;实现触碰销毁子弹添加拖尾效果完结 射击脚本 public class Weapon : MonoBehaviour {public GameObject bulletPrefab; // 子弹预制体public Transform bulletSpawn; // 子弹生成位置public float bulletVelocity 30…

重构改善既有代码的设计-学习(三):重新组织数据

1、拆分变量&#xff08;Split Variable&#xff09; 有些变量用于保存一段冗长代码的运算结果&#xff0c;以便稍后使用。这种变量应该只被赋值一次。 如果它们被赋值超过一次&#xff0c;就意味它们在函数中承担了一个以上的责任。如果变量承担多个责任&#xff0c;它就应该被…