vue开发企业微信保存图片（vue实现网页端企业微信扫码登录功能（前端部分））
时至今日 ，企业微信在企业日常工作中的使用越来越频繁也越来越重要 ，不少企业已使用企业微信进行着日常的工作安排管理 。在这种背景下 ，各类系统和企业微信对接的需求也不断增加 ，今天要说的就是一个比较常见的需求：在网页前端实现扫描企业微信二维码进行系统登录 。以下是vue框架下实现的方式 ，主要是前端部分 。
要完成这个需求主要有两点关键技术问题需要解决：一是如何在网页端产生企业微信的二维码 。二是用户扫码完成后 ，如何知道是哪个用户扫的二维码 ，或者如何告诉后端哪个用户扫的二维码呢 。我们一步步来说 。一.如何生成二维码
详细介绍前先放一下官方文档的链接 ，毕竟无论怎么介绍还得是以官方为准 。构造扫码登录链接 。接下来是具体实现的步骤：
1. 引入JS文件 在你的项目中找到public文件夹中的index.html文件 ，在代码中引入企业微信的js文件 ，加入以下代码即可：
<script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script>注意下 ，引入的js文件其实是有不同版本的 ，截止2023年1月11日 ，官方给出的包的版本是1.2.7 ，但是在未来可能会有更新 ，引入前最好在官网中看一眼是不是最新版本 。
2. 展示二维码 在需要展示企业微信二维码的地方（一般是登录页） ，创建一块区域用来展示二维码 ，注意要给id值
<div id="login_container" style="height: 400px; width: 400px"></div>然后实例企业微信的JS对象 ，这里为方面展示 ，直接写在created()里面了 ，最好封装成一个方法 。
created() { this.wwLogin = new WwLogin({ id: login_container, appid: , // 填你的企业微信企业id agentid: , // 填你的自建应用id redirect_uri: , // 填你的可信域名里的跳转链接 ，一定要有http或者https state: , href: , lang: zh }) }然后来讲一下参数 ，其中id ，appid ，agentid ，redirect_uri ，这四个必填 ，后面三个不填也能出二维码 ，如果有其他需要的话可以再详细了解 。其中第一个id和我们创建出来展示的区域的id是要对应上的 ，不然二维码不知道展示到哪里 。剩下三个参数就要在企业微信的管理后台里面拿了 ，如果这个时候有其他人能告诉你这三个值 ，那你直接运行就能看到二维码了 。效果如下图：
但如果开发者目前没有办法拿到这些值 ，或者是要创建一个新的企业的话 ，博主将在第三步展示如何配置并拿到这些参数 。
步骤二这里还有个小优化在这里分享下 ，在一些有一定代码规范要求的公司里 ，JS对象实例化完成后 ，代码会提示’WwLogin’ is not defined ，虽然也能跑起来 ，但是看着还是会烦 。这种情况下可以在.eslintrc.js文件中加入下面代码 ，再次运行即可： globals: { WwLogin: true }3. 企业微信后台管理平台配置
这一步里讲解下如何进行企业微信的后台管理设置 ，然后说一下哪里能够拿到第二步里缺失的三个必填值 。首先需要登录企业微信后台管理平台 ，官方地址：企业微信 。点击右上角的企业登录后 ，用企业微信扫码即可进入管理平台 。这里要注意下 ，只有企业的管理员角色才能登录进入管理平台 ，如果一个开发人员没有权限的话 ，需要找人扫码或者让管理员帮忙赋予权限 。如果没有企业或者想先弄一个测试组织自己先测试一下的话 ，可以在企业微信的app端上以个人为主体创建一个企业组织 。
登录上的管理平台如下图：
然后在“我的企业 ”下方找到企业id ，这个就是第二步中的appid参数 。在应用管理里面创建一个自建应用 ，然后点进去 ，里面有个AgentId ，这个就是第二步中的agentid参数 。
然后在这个页面中 ，滚动条滚到最下方 ，找到“企业微信授权登录 ” ，点击“设置 ” ，点击“设置授权回调域 ” ，填入回调的地址 ，这个就是第二步中的redirect_uri参数 ，当然回调地址后面还能拼接其他路由地址 ，但是域名和端口号必须和配置中一致 。
以上就是企业微信管理平台的主要配置 ，将这些配置加上后 ，就能在前端看到二维码了 。二.如何知道是哪个用户登录
前面讲解了如何生成二维码后 ，这里讲一下如何知道是哪个用户扫码登录的 。在用户扫码完成 ，并点击确认登录后 ，企业微信会带着参数返回redirect_uri配置的地址 ，下面是一段我用来测试返回的路径：
http://test.com/wechatAuth?code=x4Wie3KgsS3_311mrsiB_WdC1MzsJ&appid=wwcffb38其中http://test.com/wechatAuth这一段是我配置的redirect_uri ，而后面code中的值就是相当于我这个登录人的身份标识 ，我们需要这样this.$route.query.code截取下来 ，获取到code的值并将其传给后端 ，后端根据企业微信的相关接口：https://qyapi.weixin.qq.com/cgi-bin/auth/getuserinfo?access_token=ACCESS_TOKEN&code=CODE最终拿到用户的userid ，知道userid后就能确定登录用户的身份 ，从而给前端返回登录用户的身份信息 ，前端就可以完成登录了 。
总结：本篇文章主要是介绍前端通过vue实现网页端企业微信扫码登录的功能 ，确实有一点的局限性 ，没有将后端部分的内容介绍出来 。但通过文章前面介绍的内容 ，前端开发人员能很轻易实现企业微信扫码登录的功能 ，后续如果有时间看能不能介绍一下后端方面在登录时做的操作 ，希望这篇文章能够帮到大家 ，谢谢！
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！