草庐IT

vue实现网页端企业微信扫码登录功能(前端部分)

LeeBrook0 2023-07-07 原文

 时至今日,企业微信在企业日常工作中的使用越来越频繁也越来越重要,不少企业已使用企业微信进行着日常的工作安排管理。在这种背景下,各类系统和企业微信对接的需求也不断增加,今天要说的就是一个比较常见的需求:在网页前端实现扫描企业微信二维码进行系统登录。以下是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实现网页端企业微信扫码登录的功能,确实有一点的局限性,没有将后端部分的内容介绍出来。但通过文章前面介绍的内容,前端开发人员能很轻易实现企业微信扫码登录的功能,后续如果有时间看能不能介绍一下后端方面在登录时做的操作,希望这篇文章能够帮到大家,谢谢!

有关vue实现网页端企业微信扫码登录功能(前端部分)的更多相关文章

  1. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  2. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  3. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  4. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  5. MIMO-OFDM无线通信技术及MATLAB实现(1)无线信道:传播和衰落 - 2

     MIMO技术的优缺点优点通过下面三个增益来总体概括:阵列增益。阵列增益是指由于接收机通过对接收信号的相干合并而活得的平均SNR的提高。在发射机不知道信道信息的情况下,MIMO系统可以获得的阵列增益与接收天线数成正比复用增益。在采用空间复用方案的MIMO系统中,可以获得复用增益,即信道容量成倍增加。信道容量的增加与min(Nt,Nr)成正比分集增益。在采用空间分集方案的MIMO系统中,可以获得分集增益,即可靠性性能的改善。分集增益用独立衰落支路数来描述,即分集指数。在使用了空时编码的MIMO系统中,由于接收天线或发射天线之间的间距较远,可认为它们各自的大尺度衰落是相互独立的,因此分布式MIMO

  6. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  8. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  9. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  10. ruby - Arrays Sets 和 SortedSets 在 Ruby 中是如何实现的 - 2

    通常,数组被实现为内存块,集合被实现为HashMap,有序集合被实现为跳跃列表。在Ruby中也是如此吗?我正在尝试从性能和内存占用方面评估Ruby中不同容器的使用情况 最佳答案 数组是Ruby核心库的一部分。每个Ruby实现都有自己的数组实现。Ruby语言规范只规定了Ruby数组的行为,并没有规定任何特定的实现策略。它甚至没有指定任何会强制或至少建议特定实现策略的性能约束。然而,大多数Rubyist对数组的性能特征有一些期望,这会迫使不符合它们的实现变得默默无闻,因为实际上没有人会使用它:插入、前置或追加以及删除元素的最坏情况步骤复

随机推荐