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

2024-01-25 06:20
文章标签 java 配置 uniapp 实现 微信 调用 企业 config 获取 签名 移动 h5 ticket cp weixin 扫一扫 jssdk

本文主要是介绍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。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2