PC页面-企业微信扫码登录

news2024/11/26 0:39:18

vue代码引入企业微信扫码登录

    • 企业微信后台管理配置。
    • 前端vue 代码
      • 使用的配置信息

项目需求PC端登录需要对接企业微信扫码登录功能。
根据同事研究成果,记录该功能的流程。
前端代码用的是vue。

企业微信后台管理配置。

企业微信后台管理登录连接

1、扫码登录企业微信后台管理。
2、点击应用管理下拉找到自建-点击自建,创建自建应用。

在这里插入图片描述

3、填写应用logo、名称、介绍、选择部门成员。最后点击创建按钮。

在这里插入图片描述

4、配置网页授权、企业微信授权、企业可信IP

在这里插入图片描述
网页授权
在这里插入图片描述

企业微信授权
在这里插入图片描述
企业可信IP
在这里插入图片描述

前端vue 代码

1、打开项目找到public文件,点击打开找到index.html文件。在body里面引入wecom/jssdk
在这里插入图片描述

 <script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>

2、在登陆页面增加企业微信扫码功能

<el-tab-pane label="企业微信扫码登录"> 
	<div class='qrcode'>   
		<div id="wx_qrcode" /> 
	</div>
</el-tab-pane>
data() {
    return {
      authCode:'',
      wwLogin: null,//记录组件的实例
     }
},
// JS方法
  watch: {
    "$route.query": {
    handler(newVal, oldVal) {
      if(this.authCode){
		this.handleWWLogin()// 根据企业微信code调用后台接口进行登录操作
      }
    },
    deep: true,
    immediate: true,
  },
    "authCode": {
    handler(newVal, oldVal) {
    console.log("authCode发生改变",this.authCode);
      if(this.authCode){
      this.handleWWLogin()
      }
    },

  },
  },
// JS方法
mounted() {
   this.createCode(); // 生成企业微信二维码 并获取code
},
// JS方法
 methods: {
 createCode() {
    const that=this;
    this.wwLogin = ww.createWWLoginPanel({
 el: '#wx_qrcode',
  params: {
    appid: 企业ID,
    agentid: 应用ID,
    redirect_uri: 回调URL,一般就是登录页面的URL,需要转成encode,
     redirect_type: 'callback'
  },
  onCheckWeComLogin({ isWeComLogin }) {
    console.log('isWeComLogin',isWeComLogin)
  },
  onLoginSuccess(val) {
    console.log('onLoginSuccess',val.code)
    that.authCode=val.code;// 获取的code赋值
  },
  onLoginFail(err) {
    console.log('err',err)
  },

    });

  },
  }

前后端代码写好之后,需要在测试环境进行验证该功能是否正常。
注意:本地运行是无法看到企业微信扫码功能。
发版之后,运行代码。最终看到的页面效果如下:
在这里插入图片描述

使用的配置信息

前端:企业ID、项目ID、PC端登录页面的url链接,需要URLencode转码。
后台:企业ID、项目ID、项目秘钥。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1162605.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

店铺消费短信通知模板,可以自定义编辑内容群发

店铺消费短信通知模板&#xff0c;可以自定义编辑内容群发 上图可以对短信的发送情况进行查询&#xff0c;可以通过该软件群发短信。 下图为 佳易王 会员管理系统软件&#xff0c;在会员充值或消费的时候&#xff0c;可以设置自动发送短信通知信息。 可以自由设置&#xff0c;…

系列六、Mybatis的一级缓存

一、概述 Mybatis一级缓存的作用域是同一个SqlSession&#xff0c;在同一个SqlSession中执行两次相同的查询&#xff0c;第一次执行完毕后&#xff0c;Mybatis会将查询到的数据缓存起来&#xff08;缓存到内存中&#xff09;&#xff0c; 第二次执行相同的查询时&#xff0c;会…

文件字符流的使用

文件字符输入流 概述 文件字符输入流&#xff1a;FileReader。 作用&#xff1a;以内存为基准&#xff0c;把磁盘文件中的数据以字符的形式读取到内存中去。 为什么要用&#xff1f; 字节流读取中文时为了避免乱码需要一次性读到字节数组里&#xff0c;如果文件很大的话&a…

linux profile文件环境变量配置

1、profile 文件 profile 文件位于/etc/目录下 /etc/profile &#xff0c; 当登入系统时候获得一个 shell 进程时&#xff0c;其读取环境profile 文件时候会读取&#xff0c;/etc/bash.bashrc&#xff0c;/etc/profile.d 文件下配置的sh文件&#xff0c;所以我们也可以在profi…

一分钟了解:什么是Image Matting?

1. 基本概念 Image Matting是图像处理领域的一个基本任务&#xff0c;意为“图像背景抠出”或者“抠图”。这项任务在图像处理、影视制作领域广泛应用。比如&#xff0c;拍电影时常用的扣绿&#xff0c;就是演员在绿幕前面表演&#xff0c;后期再把人物抠出来放到一个新的背景…

java网上阅读网站系统eclipse定制开发mysql数据库BS模式java编程jdbc

一、源码特点 JSP 网上阅读网站系统是一套完善的web设计系统&#xff0c;对理解JSP java SSM框架 mvc编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,eclipse开发&#xff0c;数据库为Mysql5.0&a…

基于深度学习的菠萝与果叶视觉识别及切断机构设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、课题内容二、总体方案确定2.1 方案选择2.2 菠萝的视觉识别流程2.3 菠萝果叶切断机构设计流程 三 基于深度学习的菠萝检测模型3.1 卷积神经网络简介3.2 YOLO卷积神经网络3.3 图像采集与数据制作3.4 数据训练与…

学习笔记三十一:k8s安全管理:认证、授权、准入控制概述SA介绍

K8S安全实战篇之RBAC认证授权-v1 k8s安全管理&#xff1a;认证、授权、准入控制概述认证k8s客户端访问apiserver的几种认证方式客户端认证&#xff1a;BearertokenServiceaccountkubeconfig文件 授权Kubernetes的授权是基于插件形成的&#xff0c;其常用的授权插件有以下几种&a…

垃圾分类箱通过工业4G路由器实现无人值守远程管理

据今年发布的相关数据统计&#xff0c;人们日常生活中每人每天至少能制造1.2kg垃圾&#xff0c;在环保事业中日常垃圾处理已经成为一项紧迫且不可忽视的任务。为了实现城市清洁和环境保护&#xff0c;越来越多的地区开始引入垃圾分类箱。传统的垃圾分类箱管理方式存在着一些不便…

第十五章 EM期望极大算法及其推广

文章目录 导读符号说明混合模型伯努利混合模型(三硬币模型)问题描述三硬币模型的EM算法1.初值2.E步3.M步初值影响p,q 含义 EM算法另外视角Q 函数BMM的EM算法目标函数LEM算法导出 高斯混合模型GMM的EM算法1. 明确隐变量, 初值2. E步,确定Q函数3. M步4. 停止条件 如何应用GMM在聚…

激光雷达的特性总结

激光能识别的上下高度范围是多少? 激光雷达是一种典型的束波型传感器,扫描的射线呈束波状,打到物体上是一个光斑,并且距离越远,光斑越大。激光光斑的大小和激光雷达的制造工艺相关,一般来说在10m处光斑的大小可以达到7cm半径的圆。此外还要考虑到同一个光斑打到不同物体…

掌握DateTimeFormatter,让你的时间格式化更简单

一、介绍 Java 8引入了新的时间日期API&#xff0c;其中DateTimeFormatter是对日期时间格式化的实用类。它提供了一种简便的方法来格式化日期和时间&#xff0c;同时还可以将日期和时间字符串解析为Java对象。 二、特性 DateTimeFormatter具有以下特性&#xff1a; 1. 线程…

vue-cli5.0.x优雅降级,配置项目兼容旧版浏览器

兼容低版本谷歌浏览器 vue-cli5.0.x脚手架下的&#xff0c;如何降低项目版本以适用于底版本的浏览器。 直接使用默认配置打包部署出来的项目再40&#xff0c;60、70版本的谷歌浏览器跑不起来&#xff0c;蓝屏或者浏览器白屏一般这种情况都需要通过Babel去做转换&#xff0c;我…

uniapp原生插件之安卓USB摄像头插件

插件介绍 安卓USB摄像头&#xff0c;支持拍照&#xff0c;录像&#xff0c;停止预览&#xff0c;开启预览&#xff0c;支持多摄像头切换 插件仅支持nvue页面 插件地址 安卓USB摄像头插件 - DCloud 插件市场 超级福利 uniapp 插件购买超级福利 详细使用文档地址 uniapp 安…

STM32H750之FreeRTOS学习--------(四)中断管理

四、FreeRTOS中断管理 中断的概念不再过多叙述&#xff0c;学习过逻辑的都知道 中断的执行过程 中断请求 外设产生中断请求&#xff08;GPIO外部中断、定时器中断等&#xff09;响应中断 CPU停止执行当前程序&#xff0c;转而去执行中断处理程序&#xff08;ISR&#xff09;…

SecureCRT 发送文件内容

当需要连接 Linux 服务器或设备的时候&#xff0c;SecureCRT 是一个利器。有一个工作场景是这样的&#xff0c;工程代码在服务器上编译完后运行&#xff0c;然后用 secureCRT 连接程序的指定端口&#xff08;用 telnet &#xff09;&#xff0c;连接上后就往端口里下发配置&…

在美团和阿里6年,很难却也真实...

先简单的说下&#xff0c;本人6年工作经验&#xff0c;曾就职于某大型国企&#xff0c;公司研究院成员&#xff0c;也就职过美团担任高级测试开发工程师&#xff0c;有丰富的高并发大型项目经验。 后端高并发、高性能、高可用性开发&#xff0c;自动化测试框架开发以及软件自动…

@机械装备企业,“专精特新”你需要这样做!

目录 生产过程有4个特点 三大管理难点 01 计划难管控 02 生产难协同 03 现场难管控 机械装备数字化建设怎么做&#xff1f; 01 计划管控 02 生产协同 03 现场数字化 从2021年7月至今&#xff0c;“专精特新”热度一直居高不下&#xff0c;但其实&#xff0c;这一词早在…

大数据可视化分析建模:每个人都是数据分析师

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 第一部分&#xff1a;介…

【嵌入式项目应用】__cJSON基础介绍与代码测试

目录 前言 一、JSON是什么&#xff1f; 1. JSON 基本语法 2. JSON值(value)的类型 3. 逻辑值&#xff08;true 或 false&#xff09; 4. null 5. NUMBER 数字&#xff08;整数或浮点数&#xff09; 6. STRING 字符串&#xff08;在双引号""中&#xff09; 7…