uniapp 企业微信侧边栏开发网页授权 注入企业权限 注入应用权限 获取userid(2)

news2024/9/19 21:43:17

1、网页授权,获取code

代码:

oauthUrl() {
		const that = this
		uni.removeStorageSync('code')
		let REDIRECT_URI = encodeURIComponent(window.location.href)
		let CORPID = webConfig.appId
		let url =
			`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${CORPID}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
		if (window.location.href.indexOf('code=') != -1) { // 避免一直重复重定向无限获取code
			let code = that.getQueryVariable('code')
			if (code == that.getCode()) { // 微信获取code会重定向,所以从上个页面返回主页后,返回的其实是重定向之后的url,此时url一定带有上次的code,code只能用一次,这时候要重新获取
				let urls = that.ridUrlParam(window.location.href, ['code']) // 从url中祛除code,用没有code的url重新生成code 
				window.location.href = urls
			}
			that.setCode(code)  // 保存code
			that.getConfig() // 注入企业权限
		} else {
			window.location.href = url
		}
	},

里面用到的方法:

// 获取url后参数code

getQueryVariable(variable) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	},

// 删除URL中指定search参数

ridUrlParam(url, params) {
		/**
		 * 删除URL中指定search参数,会将参数值一起删除
		 * @param {string} url 地址字符串
		 * @param {array} aParam 要删除的参数key数组,如['name','age']
		 * @return {string} 返回新URL字符串
		 */
		for (var index = 0; index < params.length; index++) {
			var item = params[index];
			var fromIndex = url.indexOf(item + "="); //必须加=号,避免参数值中包含item字符串
			if (fromIndex !== -1) {
				// 通过url特殊符号,计算出=号后面的的字符数,用于生成replace正则
				var startIndex = url.indexOf("=", fromIndex);
				var endIndex = url.indexOf("&", fromIndex);
				var hashIndex = url.indexOf("#", fromIndex);

				var reg = "";
				if (endIndex !== -1) {
					// 后面还有search参数的情况
					var num = endIndex - startIndex;
					reg = new RegExp(item + "=.{" + num + "}");
					url = url.replace(reg, "");
				} else if (hashIndex !== -1) {
					// 有hash参数的情况
					var num = hashIndex - startIndex - 1;
					reg = new RegExp("&?" + item + "=.{" + num + "}");
					url = url.replace(reg, "");
				} else {
					// search参数在最后或只有一个参数的情况
					reg = new RegExp("&?" + item + "=.+");
					url = url.replace(reg, "");
				}
			}
		}
		var noSearchParam = url.indexOf("=");
		if (noSearchParam === -1) {
			url = url.replace(/\?/, ""); // 如果已经没有参数,删除?号
		}
		return url;
	}

这个时候就会发现,如果你是从企业微信客户端侧边栏配置的自定义应用,点击不同的外部联系人时,获取到的code都是一致的,这时候从企业微信后台管理去配置,就每次获取到不同的code了

在这里插入图片描述
2、注入企业权限、应用权限、获取当前外部联系人userid
html引入js文件

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

然后在manifest.json中配置模板路径

在这里插入图片描述
这个时候,一般页面中会出现一个无法去掉的“取消”字样,通过查看是多了个<uni-actionsheet__action>组件,这时候在index.html中加了一行代码就解决了

<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />

完整代码如下:
在这里插入图片描述

注入企业权限(必须先注入企业权限,不然wx(jWeixin)中找不到agentConfig方法,就没法注入应用权限):

如果你使用的是uniapp,那么你会发现你在html引入js文件后,window中会找不到wx对象,这是因为uniapp把wx自用了,但是wx返回了wx和jWeixin两个,这时候直接用jWeixin就行。

tips:代码中的getWxVerify是我们后台的接口,用来获取签名的,,,,最重要的一点,告知后台开发仔细看文档,获取access_token要用的corpsecret是应用秘钥,不是企业秘钥

在这里插入图片描述
还有,请求你们后端接口是,要把请求的ip添加到企业微信后台管理的白名单中

在这里插入图片描述

// 注入企业权限

getConfig() {
	const that = this
	const path = window.location.href.indexOf("#") !== -1 ? window.location.href.split("#")[0] : window.location.href;
	getWxVerify({
		url: encodeURIComponent(path),
		appId: webConfig.appId
	}).then(res => {
		console.log(res, 'ressss')
		window.jWeixin.config({
		    beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
		    appId: res.result.appid, // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用
		    timestamp: res.result.timestamp, // 必填,生成签名的时间戳
		    nonceStr: res.result.noncestr, // 必填,生成签名的随机串
		    signature: res.result.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法
		    jsApiList: ['getCurExternalContact'] ,// 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
		});
		window.jWeixin.ready(function(){
			console.log('注入企业权限成功')
			console.log(window, 'window')
		    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
			that.getAgentConfig()  // 注入应用权限
		});
	})
},

注入应用权限:

// 注入应用权限

getAgentConfig() {
		const that = this
		const path = window.location.href.indexOf("#") !== -1 ? window.location.href.split("#")[0] : window.location.href;
		getWxVerify({
			url: encodeURIComponent(path),
			appId: webConfig.appId,
			type: 'agent_config'
		}).then(res => {
			console.log(res, 'ressss')
			window.jWeixin.agentConfig({
			    corpid: res.result.appid, // 必填,企业微信的corpID,必须是本企业的corpID,不允许跨企业使用
				agentid: 1000066, // 必填,企业微信的应用id (e.g. 1000247)
			    timestamp: res.result.timestamp, // 必填,生成签名的时间戳
			    nonceStr: res.result.noncestr, // 必填,生成签名的随机串
			    signature: res.result.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法
			    jsApiList: ['getCurExternalContact'] ,// 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
				success: function(res) {
					// 回调
					console.log('注入应用权限成功',res)
					that.getCurrentUserId()  // 获取当前联系人的userid
				},
				fail: function(res) {
					console.log('注入应用权限失败',res)
					if (res.errMsg.indexOf('function not exist') > -1) {
						alert('版本过低请升级')
					}
				}
			});
		})
	},

获取当前联系人userid:

getCurrentUserId() {
		const that = this
		window.jWeixin.invoke('getCurExternalContact', {
			}, function(res){
				console.log(res, '获取当前外部联系人userIdres')
			if(res.err_msg == "getCurExternalContact:ok"){
				let userId  = res.userId ; //返回当前外部联系人userId
				that.setCurrentUserId(userId)
				console.log(userId, '获取当前外部联系人userId', res)
			}else {
				//错误处理
			}
		});
	},

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

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

相关文章

keil编译链接文件警告Pattern *.o(RAMCODE) only matches removed unused sections

问题&#xff1a; 从提示看是链接文件中&#xff0c;RAM中原先分配给代码存储的空间没有用上 解决办法&#xff1a;删除掉上图中红框里面代码&#xff1b;

途乐证券-宁德时代发力超充赛道,高压快充概念强势拉升,泰永长征涨停

高压快充概念17日盘中强势拉升&#xff0c;到发稿&#xff0c;泰永长征涨停&#xff0c;万祥科技涨超9%&#xff0c;英可瑞涨逾8%&#xff0c;迦南智能涨超4%。 消息面上&#xff0c;8月16日&#xff0c;宁德时代举行线下新品发布会&#xff0c;正式发布全球首款磷酸铁锂4C超充…

股票交易c接口包含哪些调用函数?

股票交易的C接口中可能包含多个调用函数&#xff0c;具体的调用函数取决于所使用的接口规范和交易所的要求。接下来看看下面是一些可能常见的股票交易C接口调用函数的示例&#xff1a; 1. 连接函数&#xff08;Connect&#xff09;&#xff1a;用于与交易所建立网络连接。 2.…

python3.73安装教程,python3.10安装教程

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python3.73安装教程&#xff0c;python3.10安装教程&#xff0c;现在让我们一起来看看吧&#xff01; Python目前已支持所有主流操作系统&#xff0c;在Linux,Unix,Mac系统上自带Python环境&#xff0c;一般默认装的是P…

等保案例 5

用户简介 四川省人民代表大会常务委员会&#xff0c;作为省人民代表大会地常设机关&#xff0c;随着政府部门信息化程度地提高&#xff0c;对信息系统地依赖程度越来越高&#xff0c;同时由于网络安全形势日益严峻、新型攻击层出不穷&#xff0c;单位信息化所面临地各种风险也…

【闪击Linux系列P6】自动化构建工具-make/Makefile详解

前言 大家好吖&#xff0c;欢迎来到 YY 滴 Linux系列 &#xff0c;热烈欢迎&#xff01;本章主要内容面向接触过Linux的老铁&#xff0c;主要内容含 欢迎订阅 YY 滴Linux专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 订阅专栏阅读&#xff1a;YY的《…

〔012〕Stable Diffusion 之 中文提示词自动翻译插件 篇

✨ 目录 &#x1f388; 翻译插件&#x1f388; 下载谷歌翻译&#x1f388; 谷歌翻译使用方法&#x1f388; 谷歌翻译使用效果 &#x1f388; 翻译插件 在插件列表中搜索 Prompt Translator可以看到有2个插件选项&#xff1a;一个是基于谷歌翻译 〔推荐〕、一个基于百度和deepl…

什么是字体堆栈(font stack)?如何设置字体堆栈?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 什么是字体堆栈&#xff08;Font Stack&#xff09;&#xff1f;⭐ 如何设置字体堆栈&#xff1f;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 …

客服专用耳机哪个品牌好用,打电话好用的蓝牙耳机推荐

如果你喜欢户外运动时戴耳机&#xff0c;那绝对不能错过骨传导耳机&#xff01;这种开放式耳道设计在跑步时非常实用&#xff0c;因为它可以让你快速察觉行人和车辆的动静&#xff0c;大大减少安全隐患。而且&#xff0c;这种耳机无需插入耳朵&#xff0c;可以让你的耳道长时间…

聊聊火车的发展

目录 1.火车的概念 2.火车的发展历史 3.火车对战争的影响 4.火车对人们出行造成的影响 1.火车的概念 火车是一种由机械动力驱动的陆上交通工具&#xff0c;通常用来运输人员和货物。它由一列或多列的连接在一起的车厢组成&#xff0c;有轨道作为其行驶的基础&#xff0c;并通…

AI商业化如何落地?看设计师如何利用AI细化工作流

自从AI爆火之后&#xff0c;人类是否会被AI取代一直都是打工人格外关注的问题。 而最近&#xff0c;在小编深入探索到我们用户的使用情况后&#xff0c;发现已经有人拿神采PromeAI直接实现了商业应用&#xff0c;将AI的设计创意应用得淋漓尽致&#xff0c;并且直接进军房地产及…

nvm-----node版本管理器

使用nvm来进行切换不同的node版本 我们在开发的时候有会很多的新老项目&#xff0c;有些老项目会要求使用低版本的node&#xff0c;但是新项目又会要求高版本的node&#xff0c;这个时候就是很纠结了。因为低版本的项目你用高版本的node进行启动会有启动失败或者代码保存的时候…

PO、BO、VO、DTO、DAO、POJO

文章目录 PO&#xff08;Persistant Object&#xff09;持久对象DO&#xff08;Data Object&#xff09;数据对象AO&#xff08;Application Object&#xff09;应用对象BO&#xff08;Business Object&#xff09;业务对象VO&#xff08;Value Object&#xff09;表现对象DTO&…

海外应用ASO优化的小技巧3

编写准确的应用程序描述&#xff0c;有4000个字符限制。用户可以访问应用程序的主要功能和信息&#xff0c;要说服并推动用户去下载我们的应用&#xff0c;需要使用自然流利的语言。 1、填写应用描述的方案。 我们需要知道该应用有什么用&#xff0c;能够解决什么问题&#xf…

latex 笔记:cs论文需要的排版格式

主要针对英文文献 1 基本环境 连字符 不同长度的"-"表示不同含义。 一个"-"长度的连字符用于词中两个"-"长度的连字符常用于制定范围三个"-"长度的连字符是破折号数学中的负数要用数学环境下的-得到 强调 在正式文章中, 通常不…

C++提高编程——模板

C提高编程 本阶段主要针对C泛型编程和STT技术做详细讲解&#xff0c;探讨C更深层的使用 1模板 1.1模板的概念 模板就是建立通用的模具&#xff0c;大大提高复用性 例如生活中的模板 寸照片模板&#xff1a; 1.2函数模板 C另一种编程思想称为 泛型编程&#xff0c;主要利…

Linux权限相关问题

权限 1. 权限概念su 2.权限管理2.1 权限设置方法2.1.1 chmod(change mode)chownchgrpumask 3.目录的权限粘滞位 权限总结 1. 权限概念 Linux下有两种用户&#xff1a;超级用户&#xff08;ROOT&#xff09;&#xff0c;普通用户。 超级用户&#xff1a;可以Linux下的系统做任…

软件测试学术顶会——ISSTA 2023 论文(网络安全方向)清单、摘要与总结

总结 本次会议涵盖的安全研究主题广泛,包括源代码分析、二进制代码分析、恶意软件检测、漏洞检测、模糊测试、程序验证等。一些热门的研究方向包括:基于机器学习的漏洞检测、大型语言模型在软件安全中的应用、区块链智能合约安全分析。这些方向都在最近几年持续发展。一些较冷门…

c++ std::shared_ptr(内存布局)

https://cplusplus.com/reference/memory/shared_ptr/

基于Redis实现点赞及排行榜功能

微信公众号访问地址&#xff1a;基于Redis实现点赞及排行榜功能 推荐文章&#xff1a; 1、SpringBoot整合多数据源&#xff0c;并支持动态新增与切换&#xff08;详细教程&#xff09; 2、​​​​​​Redis中使用lua脚本 3、SpringBoot统一标准响应格式及异常处理 4、Spr…