当前位置:   article > 正文

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

jssdksignature java 企微

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

可信域名验证
 (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

  1. import wx from 'weixin-js-sdk'
  2. Vue.prototype.$wx = wx

在组件中使用:

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

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

  1. // 扫一扫
  2. async scan() {
  3. let url = window.location.href.split('#')[0];
  4. const respose = await getSignature(
  5. )
  6. const {
  7. data
  8. } = respose
  9. this.wxConfig(data.appId,
  10. data.timestamp,
  11. data.nonceStr,
  12. data.signature)
  13. },
  14. //wx.config的配置
  15. wxConfig(appId, timestamp, nonceStr, signature) {
  16. jweixin.config({
  17. debug: false, // 开启调试模式,
  18. appId: appId, // 必填,企业号的唯一标识
  19. timestamp: timestamp, // 必填,生成签名的时间戳
  20. nonceStr: nonceStr, // 必填,生成签名的随机串
  21. signature: signature, // 必填,签名
  22. jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
  23. });
  24. jweixin.ready(() => {
  25. console.log('配置完成,扫码前准备完成')
  26. jweixin.scanQRCode({
  27. desc: 'scanQRCode desc',
  28. needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  29. scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
  30. success: function(res) {
  31. var result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
  32. // var resultArr = result.split(','); // 扫描结果以逗号分割数组(一维码)
  33. // var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素,也就是最终的内容
  34. // _this.form.imei = codeContent
  35. // alert('扫码成功!')
  36. },
  37. });
  38. })
  39. jweixin.error(function(res) {
  40. // console.log('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
  41. });
  42. },

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

  1. // 企业微信签名
  2. export function getSignature(data) {
  3. return http.request({
  4. url: "/work-wechat/qywx/signature",
  5. data: data,
  6. method: "get",
  7. })
  8. }

使用时引入

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

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

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

  1. <dependency>
  2. <groupId>com.github.binarywang</groupId>
  3. <artifactId>weixin-java-cp</artifactId>
  4. <version>3.8.0</version>
  5. </dependency>

(2)新增QywxController

  1. @RestController
  2. public class QywxController {
  3.     @Autowired
  4.     private QywxService qywxService;
  5.     @GetMapping(value = "/system/qywx/signature/")
  6.     public WxJsapiSignature getJsapiSignature(@RequestParam("url") String url) {
  7.         try {  // 直接调用wxMpServer 接口
  8.             System.out.println("访问WxJsapiSignature=====/system/qywx/signature/"+url+"");
  9.             WxJsapiSignature wxJsapiSignature = qywxService.getJsapiSignture(url);
  10.             System.out.println("AppId==="+wxJsapiSignature.getAppId());
  11.             System.out.println("Timestamp==="+wxJsapiSignature.getTimestamp());
  12.             System.out.println("NonceStr==="+wxJsapiSignature.getNonceStr());
  13.             System.out.println("Signature==="+wxJsapiSignature.getSignature());
  14.             return wxJsapiSignature;
  15.         } catch (WxErrorException e) {
  16.             return null;
  17.         }
  18.     }


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

  1. @Service
  2. public class QywxService {
  3.     //获取对应应用的签名
  4.     public WxJsapiSignature getJsapiSignture(String url) throws WxErrorException {
  5.         // 替换成自己应用的appId和secret,agentId
  6.         Integer agentId = 1111111;
  7.         String corpId="XXXXXXXX";
  8.         String corpSecret = "XXXXXXXX";
  9.         WxCpDefaultConfigImpl config = new WxCpDefaultConfigImpl();
  10.         config.setCorpId(corpId);      // 设置微信企业号的appid
  11.         config.setCorpSecret(corpSecret);  // 设置微信企业号的app corpSecret
  12.         config.setAgentId(agentId);     // 设置微信企业号应用ID
  13.         WxCpServiceImpl wxCpService = new WxCpServiceImpl();
  14.         wxCpService.setWxCpConfigStorage(config);
  15.         System.out.println("WxJsapiSignature===url==="+url);
  16.         WxJsapiSignature wxJsapiSignature = wxCpService.createJsapiSignature(url);
  17.         //wxJsapiSignature中可以直接获取签名信息 且方法内部添加了缓存功能
  18.         return wxJsapiSignature;
  19.     }
  20.  
  21. }


(4)签名的结果验证

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

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

  1. //wx.config的配置
  2. wxConfig(appId, timestamp, nonceStr, signature) {
  3. jweixin.config({
  4. debug: false, // 开启调试模式,
  5. appId: appId, // 必填,企业号的唯一标识
  6. timestamp: timestamp, // 必填,生成签名的时间戳
  7. nonceStr: nonceStr, // 必填,生成签名的随机串
  8. signature: signature, // 必填,签名
  9. jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
  10. });
  11. jweixin.ready(() => {
  12. console.log('配置完成,扫码前准备完成')
  13. jweixin.scanQRCode({
  14. desc: 'scanQRCode desc',
  15. needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  16. scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
  17. success: function(res) {
  18. var result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
  19. // var resultArr = result.split(','); // 扫描结果以逗号分割数组(一维码)
  20. // var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素,也就是最终的内容
  21. // _this.form.imei = codeContent
  22. // alert('扫码成功!')
  23. },
  24. });
  25. })
  26. jweixin.error(function(res) {
  27. // console.log('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
  28. });
  29. },

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/712156
推荐阅读
相关标签
  

闽ICP备14008679号