宠物医院网站开发,会声会影模板免费网站,营销推广运营,100个成功营销策划案例背景#xff1a; 使用企业微信开发扫一扫功能
可信域名验证 (1)企业微信的可信域名需要和企业微信的备案主体一致。
域名备案主体可通过站长工具查看域名备案主体。https://icp.chinaz.com/
企业微信备案主体可以咨询管理员
#xff08;2#xff09;通过nginx配置域名归…背景 使用企业微信开发扫一扫功能
可信域名验证 (1)企业微信的可信域名需要和企业微信的备案主体一致。
域名备案主体可通过站长工具查看域名备案主体。https://icp.chinaz.com/
企业微信备案主体可以咨询管理员
2通过nginx配置域名归属验证txt文件
具体操作详见
https://blog.csdn.net/zhaolulu916/article/details/128613264?spm1001.2014.3001.5502
3网页授权及JS-SDK配置成功效果如下 (4)可信域名配置正确但无法通过验证可在开发者中心提问。也可以配置重定向后带端口的地址 2. 白名单配置 代码最终部署到服务器上将服务器的IP配置到白名单里这样调试就不会提示IP不在白名单范围内此界面在系统管理员界面有。 3 .前端代码获取企业微信签名并配置JSSDK权限 1npm安装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引入企业微信开发工具
dependencygroupIdcom.github.binarywang/groupIdartifactIdweixin-java-cp/artifactIdversion3.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(AppIdwxJsapiSignature.getAppId());System.out.println(TimestampwxJsapiSignature.getTimestamp());System.out.println(NonceStrwxJsapiSignature.getNonceStr());System.out.println(SignaturewxJsapiSignature.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和secretagentIdInteger agentId 1111111;String corpIdXXXXXXXX;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(WxJsapiSignatureurlurl);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
