企业微信 => 企业微信接入第三方应用(vue的H5) 第一阶段:授权登录 前端部分

2023-05-16

企业微信接入第三方应用

    • 企业微信接入第三方应用(以服务商身份)
    • 一.确认我们是第三方应用开发还是企业内部开发选项(对后面有很大区别)
    • 二.需要的准备:注册两个企业,一个作为应用的服务商,一个作为应用的使用者,使用服务商的企业登陆到服务商的管理平台。此处需要注意的是,企业微信有两个管理平台,一个是企业微信管理后台另一个是服务商管理平台,不要登陆错了。
  • 这里开始前端部分了

企业微信接入第三方应用(以服务商身份)

一.确认我们是第三方应用开发还是企业内部开发选项(对后面有很大区别)

首先,要明确两个概念,就是微信和企业微信不是一个东西(虽然有些信息互通)、企业微信应用和服务商的第三方应用也不是一个东西(虽然也有些接口可以调用),企业内部开发指的是开发某个企业自己用的应用,而第三方应用开发指的就是开发者作为服务商开发第三方应用,让其他企业(使用企业微信的人)安装你(服务商)开发的应用。这次主要记录作为服务商第三方应用的开发过程

在这里插入图片描述

二.需要的准备:注册两个企业,一个作为应用的服务商,一个作为应用的使用者,使用服务商的企业登陆到服务商的管理平台。此处需要注意的是,企业微信有两个管理平台,一个是企业微信管理后台另一个是服务商管理平台,不要登陆错了。

  • 企业微信管理后台:https://work.weixin.qq.com/wework_admin

  • 企业微信服务商管理后台:https://open.work.weixin.qq.com/wwopen/developer

图一:企业微信管理后
在这里插入图片描述

图二:企业微信服务商管理后台
在这里插入图片描述

  • 第一步,在服务商平台创建一个应用,将需要填写的信息填入。基础信息可以根据实际情况填写,开发信息可能刚接触的时候并不清楚如何填写,这里可以暂时先写随便写一个,后面可以修改并且需要认证,下文会将用到的一一进行介绍。
  • 第二步,结束,因为我们已经有第三方应用了,哈哈
  • 第三步,开发文档,将以上信息了解了之后,还需要看下官方文档。因为笔者是作为java开发的角度来进行开发的,所以主要需要了解的是快速入门和服务端开发API。注意,此处文档区分第三方应用开发和企业内部开发,服务商开发第三方应用一定是第三方应用的那一篇文档,千万不要看错了!
  • 文档链接:https://work.weixin.qq.com/api/doc
  1. 快速开发,注意此处的三个场景:企业的、应用的和服务商的。在开发过程中一定要分清这三者的区别,这是重中之重,“企业的”是指登录者所属的企业;“应用的”是指开发者的第三方应用;“服务商的”是指应用所属的企业,这和登录的企业不一样,一定要区分清楚!(此处不分清楚,后面会有很多坑)

  2. 在这里插入图片描述

  3. 服务端API,这里就是主要获取需要的信息api都有,但此处要区分清楚应用的、企业的、服务商的、个人的信息,它们不可通用(如下面介绍的user_ticket和suite_ticket不是一个东西)

  4. 在这里插入图片描述

第四步: 指令回调流程的建立,在第二步中说到指令回调Url,需要在这里进行配置,企业微信官方会每10分钟调用一次,或者手动点击“刷新Ticket”,或者在编辑完成确认的时候会进行回调。

在这里插入图片描述

  • 指令回调的需要先参考这篇文档(其中有好几个需要注意的点)在这里插入图片描述

  • 注意点1:解密此处有demo,直接使用官方的即可

  • 在这里插入图片描述
    在这里插入图片描述

  • 注意点2:验证回调和实际数据传输方式不同:验证是GET请求,解密后需要将明文的echostr返回回去,实际数据传输是POST请求,入参是xml格式传入(但是在链接上也会有解密需要的参数msg_signature、timestamp、nonce因此都要接收),需要返回success
    在这里插入图片描述

注意点3:此处数据类型可能有很多种,具体可以参考文档的这边,此处只是接收了suite_ticket(应用ticket)类型进行处理

在这里插入图片描述

以下是网上写的demo的代码(此处用dom4j解析xml字符串):
需要后端处理

	@ResponseBody
    @RequestMapping(value = "/directCallback")
    public void directCallback(HttpServletRequest request, HttpServletResponse response) throws Exception {
		System.out.println("----------------------------");
    	System.out.println("this is directCallback");
    	response.setCharacterEncoding("UTF-8");
    	
    	try {
	    	String corpid = request.getParameter("corpid");
	    	// 企业微信加密签名
	        String msgSignature = request.getParameter("msg_signature");
	        // 时间戳 与nonce结合使用,用于防止请求重放攻击
	        String timestamp = request.getParameter("timestamp");
	        // 校验时字符串
	        String echostr = request.getParameter("echostr");
	        // 随机数 与timestamp结合使用,用于防止请求重放攻击
	        String nonce = request.getParameter("nonce");
	        
	        System.out.println("msgSignature: "+ msgSignature);
	        System.out.println("timestamp: "+ timestamp);
	        System.out.println("echostr: "+ echostr);
	        System.out.println("nonce: "+ nonce);
	    	if("GET".equals(request.getMethod())) { // get请求表示是验证
	    		System.out.println("corpid:" + corpid);
		        String echostrDecrypt = null;
		        // 校验服务商公司id
		        WXBizMsgCrypt wxcpt = new WXBizMsgCrypt(sToken, sEncodingAESKey, corpid);
				echostrDecrypt = wxcpt.VerifyURL(msgSignature, timestamp, nonce, echostr);
				System.out.println("verifyurl echostr: " + echostrDecrypt);
		    	
		    	response.setCharacterEncoding("UTF-8");
		    	response.getWriter().write(echostrDecrypt);
	    	}else { // post请求表示是真实数据
	    		// 获取传过来的xml信息(密文)
	        	InputStream ins = request.getInputStream();
	        	BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(ins));
	        	StringBuilder postData = new StringBuilder();
	        	String line = null;
	        	while((line=bufferedReader.readLine()) != null) {
	        		postData.append(line);
	        	}
	        	System.out.println("postData:"+ postData);
	    		
	    		WXBizMsgCrypt wxcpt = new WXBizMsgCrypt(sToken, sEncodingAESKey, suiteid);
	    		String info = wxcpt.DecryptMsg(msgSignature, timestamp, nonce, postData.toString());
	    		System.out.println("解析的明文是:" + info); // 此处明文是xml信息
	    		
	    		// 解析xml,若InfoType是suite_ticket的话,说明是发送ticket的响应方式
	        	Document doc = DocumentHelper.parseText(info);
	        	Element root = doc.getRootElement();
	        	String infoType = root.elementTextTrim("InfoType");
	        	if("suite_ticket".equals(infoType)) { // 此处只是进行suite_ticket的处理,若是需要其他的处理需要在这里添加类型
	        		String suiteTicket = root.elementTextTrim("SuiteTicket");
	        		System.out.println("拿到的ticket是: " + suiteTicket);
	        	}
	    		
	    		response.getWriter().write("success");
	    	}
	    	System.out.println("----------------------------");
		} catch (Exception e) {
			//验证URL失败,错误原因请查看异常
			e.printStackTrace();
		}
    }

第五步:建立应用授权流程(注意主体是应用),此处不是登陆者登录之后授权才能用那个流程,而是在安装应用时候的授权流程。此时是为了获取应用的access_token(第三方应用凭证)和permanent_code(永久授权码),有了access_token和permanent_code,加上之前的suite_ticket(应用ticket),很多其他的信息就可以获取到了
1.在服务商网站配置ip访问白名单,这一点不可忽略,否则无法访问
在这里插入图片描述

2.获取企业的access_token(第三方应用凭证),此处ticket就是企业微信官方每10分钟推送的suite_ticket(应用ticket),还需要应用的id和应用的secret
在这里插入图片描述

  1. 安装应用获取auth_code(临时授权码),此处只是进行安装测试,若需要正式上线需要走上线流程
    在这里插入图片描述

  2. 使用另一个企业进行此处的安装测试之后,之前实现的回调接口会接收到临时授权码的信息
    在这里插入图片描述在这里插入图片描述

  3. 获取到permanent_code永久授权码有了access_token、permanent_code和suite_ticket之后,很多的信息都可以获取到了
    在这里插入图片描述

第六步:用户登录时的用户授权流程,在用户登录的时候,需要用户授权应用,获取去到用户信息,将用户与第三方应用中的用户关联起来。此处,企业微信官方采用的是oauth2授权方式,oauth2授权流程可以参考文档此处--------此处请注意下后面的更新,有神坑!!!!!
在这里插入图片描述

这里开始前端部分了

  • 1.构造oauth2授权链接,此处若是后面需要获取到用户的手机号、邮箱等敏感信息,必须要使用手动授权方式(即scope=snsapi_privateinfo),服务商管理后台中创建的应用,必须支持获取用户的敏感信息,这两个条件只要有一个不满足就无法获取到用户的手机号等敏感信息。

H5登录页
在这里插入图片描述

  • 2.构建一个空白页面放我们的重定向链接 比如wechatLogin.vue 点击企微授权登录跳转到这个空白页

-在这里插入图片描述
在这里插入图片描述

  • 3.跳转成功后,我们当前这个url地址里面会有一个code码
    我们需要通过正则或者js方法去拿到这个code,很多方法
    展示一部分
    在这里插入图片描述

  • 2.获取第三方应用凭证token,调用那个接口去请求拿token

  • 3.获取访问用户身份

  • 4.获取用户敏感信息

  • 5.登录验证用户

  • 6.小插曲:判断是否为企微环境

  • end 把登录的token给存下来就Ok了

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

企业微信 => 企业微信接入第三方应用(vue的H5) 第一阶段:授权登录 前端部分 的相关文章

  • Fast-Planner安装

    Fast Planner安装 Fast Planner是港科大沈老师课题组的项目 xff0c 该项目是为了实现四旋翼无人机能在复杂未知环境下快速飞行 首先到Fast Planner的github网址下 xff0c 查看README xff0
  • Windows程序设计学习笔记——Winsock和udp

    Winsock是处理网络的Windows api 使用前先包含头文件Winsock2 h以及导入静态库Ws2 32 lib include lt Winsock2 h gt pragma comment lib 34 Ws2 32 lib
  • 网络编程04-UDP的广播、组播

    目录 一 UDP广播通信 1 什么是广播 2 特点 3 广播地址 4 实现广播的过程 xff08 一定是使用UDP协议 xff09 广播发送端 广播接收方 练习1 xff1a 把广播通信进行实现 发送端 接收端 二 UDP组播 xff08
  • JSON文件的生成与解析

    参考Json文件的生成和解析
  • C++ 设置double精度

    设置double精度 在这里插入代码片 span class token macro property span class token directive keyword include span span class token str
  • GitLab 出现错误Could not resolve host: xxx-xxx

    错误原因 xff1a 域名解析错误 解决办法找 打开hosts 在最后一行添加 192 30 xxx xxx gitlab
  • TeeChart控件_动态创建

    在安装目录下找到TeeChartxxxxx ocx 以管理员的身份打开cmd 注册TeeChartxxxxx ocx regsvr32 TeeChartxxxxx ocx VS2015 使用TeeChart绘图控件 CRect rect s
  • Nginx

    Nginx 介绍 Nginx是一款轻量级的Web 服务器 反向代理服务器 电子邮件 xff08 IMAP POP3 xff09 代理服务器 xff0c 并在一个BSD like 协议下发行 由俄罗斯的程序设计师Igor Sysoev所开发
  • 上电自动开机

    上电开机启动是指电脑主机在UPS恢复供电时可以自动开机 该功能必须要求电脑主板型号支持 xff0c 进入电脑的BIOS进行设置使用 不同型号的电脑的BIOS设置会有区别 xff0c 以下仅做参考 xff1a 第一步 xff1a 开机进入BI
  • Linux网络编程【TCP】

    文章目录 TCP特点TCP中CS架构TCP状态转换相关操作函数recv函数send函数 TCP特点 TCP是一种面向广域网的通信协议 xff0c 目的是在跨越多个网络通信时 xff0c 为两个通信端点之间提供一条具有下列特点的通信方式 xf
  • 博客资源整理

    文章目录 STLLinux基础命令linux系统编程Linux网络编程Docker容器技术数据库第三方库的使用Linux编程WebQt STL 基础概念 容器 duque stack map set vector 算法 查找算法 排序算法
  • Qt编译Mysql驱动

    1找到源码 2点击编译会看到报错 1解决方案 下载相关文件 也可以私信发给你 2打开配置文件添加下面的信息 相关文件下载 3点击编译 弹出的框直接关掉就行 4在安装qt的根目录下会生成如下目录 5 找到下面的库 6 将上面的库拷贝到如下目录
  • C++中的异常语法

    文章目录 概述异常的关键子自定义异常使用栈解旋异常的接口声明异常变量的生命周期C 43 43 标准异常库 概述 C语言的异常缺陷在于返回值只有一个 xff0c 可能出现二义性 xff0c 没有统一的标准 C 43 43 中的异常必须有处理
  • 处理鼠标连续点击的问题

    处理鼠标连续点击的问题 span class token comment 上次点击时间点 span DWORD m tmClick span class token punctuation span span class token com
  • FLOPS和FLOPs、GFLOPs区别与计算

    参考FLOPS和FLOPs GFLOPs区别与计算
  • VS远程调试

    文章目录 VS远程调试本地和虚拟机调试准备工作 xff1a 需要注意的几个地方 xff1a VS远程调试 在编程中由于环境 版本等各种原因 xff0c 我们需要模拟出来各种环境来跑不同的版本测试 本地和虚拟机调试 准备工作 xff1a 以V
  • AUTOSAR基础篇之CanNM

    前言 首先 xff0c 问大家几个问题 xff0c 你清楚 xff1a 为什么要引入网络管理呢 xff1f 上电同时启动 xff0c 下电同时关闭 xff0c 它不香吗 xff1f 你知道车上的ECU节点可以分为哪几种类型吗 xff1f 汽
  • CANoe应用案例之DoIP通信

    随着ECU功能和存储容量的不断提高 xff0c 主机厂对于ECU诊断和刷写有了更高的要求 由于带宽的限制 xff0c 传统的汽车总线 xff08 如CAN总线 xff09 存在刷写时间过长的缺点 xff0c 大大降低了生产和维修效率 DoI
  • TRACE32——常用操作

    TRACE 32常用操作 TRACE32软件打开后 xff0c 连上硬件环境 xff0c 我们就可以开始尝试和芯片建立连接 xff0c 并进行基本的调试操作 第一步 xff1a 确认目标板是否上电 第二步 xff1a 打开System Se
  • TRACE32——基于SNOOPer的变量记录

    TRACE32 基于SNOOPer的变量记录 在我们日常调试工作中 xff0c 经常会遇到一种场景 xff1a 对于某些变量或者内存的值 xff0c 希望对其进行监控 当这些变量发生写或者读的时候 xff0c 将这些操作记录下来 xff0c

随机推荐

  • TRACE32——内存填充测试Data.Pattern

    TRACE32 内存填充测试Data Pattern Data Pattern 命令可以用于对内存 xff08 SRAM DDR Flash等 xff09 写入随机值 xff0c 以快速地测试内存是否可以正确读写 命令格式 xff1a 示
  • STM32使用printf重定向

    最近用STM32CubeMX创建了一个demo工程 xff0c 在调试过程中 xff0c printf打印功能一直不能正常打印 xff0c 检查工程中也已将fputc函数进行了实现 奇怪的是用JTAG进行调试时打印恢复了正常 最后发现问题的
  • repo的安装和使用

    前言 Android 采用 Gerrit 提供代码评审服务 xff0c 并且开发了一个客户端工具 repo xff0c 实现多仓库管理 Git 的开发者对服务端的 Git 源码做了扩展 xff0c 使得基于 Git xff08 cgit x
  • repo sync之后不能自动 rebase 的定位

    背景 最近在使用repo sync同步代码时老是报告 xff1a branch xxx is published but not merged and is now 1 commits behind 我之前是由推送过一笔提交 xff0c 但
  • git取指定日期log问题

    库上版本有一个重要bug xff0c 使用了如下命令取一个版本 xff1a repo forall c 39 commitID 61 96 git log before 34 2022 12 09 00 00 00 34 1 pretty
  • ROS读取激光雷达点云数据(RS-Lidar为例)

    一 准备工作 xff1a 1 安装ROS xff08 含有rviz xff09 xff1b 2 安装pcl ros pcl xff08 Point Cloud Library xff09 ros 是ROS中点云和3D几何处理的接口和工具 如
  • 标准预定义的宏

    标准预定义宏是由相关的语言标准规定的 xff0c 所以它们可以在所有执行这些标准的编译器中使用 旧的编译器可能不会提供所有这些宏 它们的名字都以双下划线开头 FILE 这个宏扩展为当前输入文件的名称 xff0c 以 C 字符串常数的形式 这
  • Realsense L515使用

    提示 xff1a 文章写完后 xff0c 目录可以自动生成 xff0c 如何生成可参考右边的帮助文档 文章目录 前言一 主要参考二 基本情况 xff08 一 xff09 ubuntu和ROS情况 xff08 二 xff09 主要步骤 总结
  • 电脑前置摄像头运行ORB-SLAM2 Mono

    ROS本地摄像头 下载安装usb cam包 最好将它放在ROS空间的src文件夹下 xff0c 方便管理 git clone https github com bosch ros pkg usb cam git usb cam cd usb
  • ERROR:cannot launch node of type

    当使用roslaunch启动ros节点时 xff0c 如果出现 ERROR cannot launch node of type 这个错误 xff0c 一般原因是由于没有source bashrc 因此工作空间使用 source bashr
  • Ubuntu 18.04 运行PL-VINS

    代码地址 https span class token operator span span class token comment github com cnqiangfu PL VINS span 安装过程出错参考 PL VINS配置
  • rosbag.bag.ROSBagUnindexedException: Unindexed bag

    rosbag bag ROSBagUnindexedException Unindexed bag ROSBAG
  • d435i 相机和IMU联合标定

    一 前提 我们已经对RGB摄像头和IMU进行了单独标定 参考之前博文 RGB标定 IMU kalibr官方WIKI Kalibr 二 准备标定文件 2 1 标定板yaml文件 标定下载链接 Aprilgrid 6x6 0 5x0 5 m u
  • opencv版权nofree问题

    找到3 1 0中cpp文件拷贝到3 4 12中 xff0c 重新cmake编译 xff0c 即可使用 nofree解决方案
  • realsense d435i 自制Euroc数据集

    参考 提取bag Python程序地址 span class token operator span home span class token operator span yang span class token operator sp
  • orb-slam2运行自己数据集

    因为我跑的是双目摄像头 所以首先在orb slam2下找到ros stereo cc文件然后对其中的rostopic节点进行修改 首先先找到自己对应的节点在 自己录制的 bag 数据集下打开终端执行 rosbag info xxx bag在
  • 【Linux】CMake编译C/C++工程文件

    Linux CMake编译C C 43 43 工程文件 文章目录 Linux CMake编译C C 43 43 工程文件前言一 CMake编译工程1 1 两种方式设置编译规则1 2 两种构建方式1 3 CMake构建C C 43 43 工程
  • STM32学习笔记 GPIO初始化参数结构体介绍

    GPIO初始化参数结构体如下 xff1a typedef struct uint16 t GPIO Pin GPIOSpeed TypeDef GPIO Speed GPIOMode Typedef GPIO Mode GPIO InitT
  • Failed to load resource: the server responded with a status of 401 (UNAUTHORIZED) 解决token失效 401错误码

    在这里我们要对别人的错误状态进行判断 来使用刷星token 解决token失效的 401的问题 让别人在后台看不见的地方 登陆失败 然后里面调用这里的请求 再获取最新的token值 然后重新设置到我们的本地存储里面去 span class
  • 企业微信 => 企业微信接入第三方应用(vue的H5) 第一阶段:授权登录 前端部分

    企业微信接入第三方应用 企业微信接入第三方应用 xff08 以服务商身份 xff09 一 确认我们是第三方应用开发还是企业内部开发选项 xff08 对后面有很大区别 xff09 二 需要的准备 xff1a 注册两个企业 xff0c 一个作为