![cover](https://img-blog.csdnimg.cn/7491621e83874cf3a3dc87fee1ca4126.png)
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实现网页端企业微信扫码登录的功能,确实有一点的局限性,没有将后端部分的内容介绍出来。但通过文章前面介绍的内容,前端开发人员能很轻易实现企业微信扫码登录的功能,后续如果有时间看能不能介绍一下后端方面在登录时做的操作,希望这篇文章能够帮到大家,谢谢!
更多推荐
所有评论(0)