首页 > 其他分享 >springboot+vue项目如何集成企业微信

springboot+vue项目如何集成企业微信

时间:2024-07-01 19:22:09浏览次数:1  
标签:同步 springboot 登录 账号 微信 用户 vue 企业

本文以springboot+vue技术开发的低代码平台为案例,介绍应用系统如何集成企业微信,包括同步企业微信组织用户、单点登录、消息发送等。

在线体验:http://www.yunchengxc.com

1、准备应用

1.1、注册企业微信账号

作为企业微信的企业管理员,首先登录企业微信官网,注册一个企业微信账号。

如果已经有账号,则直接使用即可。

企业微信官网:https://work.weixin.qq.com/

填写注册信息进行注册

1.2、创建企业微信应用

在企业微信管理后台,找到应用管理菜单,点击下方的“创建应用”按钮。

填写应用信息,设置可见范围为所有人,不然会影响同步用户和发送消息通知。

1.3、配置开发者接口

新建应用后进入应用详情,滑倒最下面配置【网页授权及JS-SDK】、【企业微信授权登录】、【企业可信IP】

1.3.1、【网页授权及JS-SDK】配置可信域名

配置这一步骤后才可以配置企业可信IP,填写项目的域名(仅支持域名),域名需要在公网能够访问到。填写完成后点击申请校验域名。

把下载下来的文件放到服务器上,并且可以根据可信域名访问到文件才算时校验通过。

1.3.2、【企业微信授权登录】配置

企业微信扫码登录功能需要设置回调地址。回调地址就是正式系统的访问地址,图中是本地开发的示例。使用企业微信登录,只能回调至该域名下的页面。

1.3.3、【企业可信IP】配置

项目需要远程调用企业微信的接口,这里要写我们的公网ip,不然我们的请求会被拦截。

1.4、配置通讯录同步应用

我们自建的应用只有读取用户的权限,想要进行写的操作需要通过通讯录同步应用去调用接口。点击安全与管理菜单->管理工具->通讯录同步

点击开启接口同步

配置可信IP

2、配置系统参数

2.1、找到应用凭证

点击我的企业菜单,获取企业ID(corpId)

打开自建应用获取自建应用的AgentId(appAgentId) 和 Secret(appSecret)

打开通讯录同步获取通讯录同步Secret(synSecret)

2.2、配置后端参数

在后端工程的yml文件中,把应用凭证对应配置到“yuncheng.workWechat”下,参数名称与应用凭证的名称对应。

2.3、配置前端参数

在前端工程的“public/config/bootConfig.js”文件内,配置参数“VUE_APP_WORKWECHAT_APP_ID”的值,对应企业微信的“corpId”;

配置参数“VUE_APP_WORKWECHAT_AGENT_ID”的值,对应企业微信的“AgentId”;配置“VUE_APP_WORKWECHAT_REDIRECT_URI”参数,登录成功重定向 url,默认当前域名,可以不用改动。

在前端工程的“src/settings.js”文件内,配置开关参数“showWorkWechat”的值为“true”,开启前端的企业微信扫码按钮、同步部门用户按钮的显示。

3、同步部门用户

3.1、同步部门

在组织管理模块,点击“同步企业微信->本地同步到企业微信”。

同步完成后,会有弹框提示同步情况,企业微信管理后台同步后的截图如下。

3.2、同步用户

在用户管理模块,点击“同步企业微信->本地同步到企业微信”。

同步完成后,会有弹框提示同步情况,企业微信管理后台同步后的截图如下。

注意:同步到企业微信的账号,如果该账号没有加入过当前企业团队,系统会自动向该账号发送加入邀请,该账号需要同意邀请后,才能加入当前企业团队。

3.3、同步注意事项

部门和用户的同步规则:以本地数据为准。

本地往企业微信同步,如果企业微信不存在,则新建;如果存在,则更新;如果企业微信有多余的部门,则删除,并把删除部门下的应用转移到跟部门下。

企业微信往本地同步,如果本地不存在,则新建,如果存在,则更新,如果本地有多余的账号,则保持不变。本地新创建的用户的默认密码是“123456”,需要自行设置用户的角色、岗位等信息。

本地和企业微信是否同一用户的账号,是通过用户表的“work_wechat_id”进行判断的。

4、企业微信扫码登录

4.1、扫码登录

点击登录页面的企业微信扫码Tab页,会显示企业微信二维码,使用手机企业微信扫码功能,完成扫码登录。

注意:必须完成上一步的用户同步,并且企业微信用户必须接受邀请加入企业团队后,才能进行扫码登录。

4.2、本地用户和企业微信的关联字段

本地和企业微信通过用户表的“sys_user.work_wechat_id”字段,和企业微信用户的账号id进行关联

如果扫码登录后,提示用户不存在,需要检查企业微信账号所关联的“work_wechat_id”,登录失败的原因可能有以下几点:

原因1、在平台的用户管理中可能没有该userId对应的用户;

原因2、企业管理员可能没有同步企业微信用户或者该企业微信账号没有加入对应的企业微信企业团队;

原因3、企业管理员可能没有给企业微信应用设置可见范围。

标签:同步,springboot,登录,账号,微信,用户,vue,企业
From: https://www.cnblogs.com/hibpm/p/18278658

相关文章

  • Vue核心
    Vuevue的使用有两种方式:安装、使用CDNCDN方式:通过script标签引入<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script> Vue基础语法1.创建一个Vue对象通过new关键字,Vue对象中有几个比较重要的属性el:模板,用来绑定视图,用#视图id占位data:向......
  • Vue组件化编程
    Vue组件化编程组件的定义:用来实现局部(特定)功能效果的代码集合(html/css/js/image)为什么使用组件:一个界面的功能很复杂作用:复用代码,简化项目编码,提高运行效率组件分为非单文件组件和单文件组件,在开发中一般使用单文件组件非单文件组件1.组件的基本用法组件的使用步骤有三步:定......
  • Vue 中的Ajax
    Vue中的Ajax配置代理发送ajax请求的方式:1.xhrnewXMLHttpRequest()xhr.open()配置请求信息xhr.send()发送请求虽是鼻祖,但很麻烦,一般对其进行二次封装2.jQuery$.get$.postjQuery的核心是DOM操作,在vue等框架中不常使用3.axios与jQuery相比的优......
  • SpringBoot项目配置文件加密
    前言防止配置文件敏感信息泄露,去年公司出现过类似事件,也防止源码泄露,对项目中的配置文件进行加密引入方式pom文件引入以下依赖<dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><version>3.0.3</v......
  • Vue Ant Design中a-tree组件支持点击父节点名称(title\label)所有子节点选中
    核心代码<a-treeref="treeRef"class="draggable-tree"v-if="treeData.length":tree-data="treeData"......
  • 记一次vue脚手架打包生成的js里面变量逻辑错误的解决
    问题背景开发环境调用threejs,实现3d功能组件,开发环境测试正常,打包部署到现场后异常。浏览器控制台,报变量i和r,没有定义下图是点击报错地方打开的控制台截图。可以看到有ir变量。解决思路开发调试没有问题,那肯定是打包之后命名的变量存在不正确的逻辑了。肯定不能修改dis......
  • 对接企业微信,通过机器人发送群信息
    1.自己创建一个群聊2.通过右键群聊创建机器人3.获取机器人webhook地址4.查看企业微信的接口文档         由于我使用的是卡片模式,所以以下是基于卡片模式的编写,如选择其他可点击下方按钮进行查询群机器人配置说明-文档-企业微信开发者中心(qq.com){......
  • 自定义vue3 hooks
    文章目录hooks目录结构demohooks当页面内有很多的功能,js代码太多,不好维护,可以每个功能都有写一个js或者ts,这样的话,代码易读,并且容易维护,组合式setup写法与此结合......
  • springboot校企对接实习管理系统 毕业设计-附源码11959
    摘 要校企合作实习是一种重要的实践教学模式,但是在实际的推行过程中,存在许多管理问题。其中包括远程指导困难、学生管理困难、校企信息沟通不畅等问题一直困扰着校方负责管理实习的教师们。随着互联网系统开发技术的发展,应用web技术开发B/s模式的实习管理系统,根据用户需......
  • 一个项目学习Vue3---Vue模板方法
     内容资源下载:关注公众号(资小库),下载相关资源分析下面一段代码,学习模板方法的可能的知识<template><div><div>将下面的msg属性放到上面来:{{msg}}</div><divv-html="htmlMsg"></div><divv-bind="id">这个地方绑定了一个ID{{id}}</div>......