在企业微信里面添加h5页面 进行登录授权

1.需求:在企业微信里面添加h5页面 进行登录授权,获取到用户的code,进行登入id的验证

2.步骤:

  • 根据企业微信开发者中心中构造网页授权链接进行授权

在这里插入图片描述

  • 在企业微信内部进行配置,拿到appid,redirect_uri,agentid参数步骤参考这篇文章

  • 由于企业微信进入页面之前会进行授权,然后再进行跳转咱们系统的首页(也是就redirect_uri中的地址),那么就会有两种解决方案:

    ① 有一个页面用于授权,然后在跳转首页
    ② 直接将授权的操作写在首页中,在首页进行授权,然后再跳转首页(我用的是这种方式)
    在这里插入图片描述
    首页进行授权的代码如下:

   //判断是否授权const CORPID = '    '; //appid参数const REDIRECT_URI = encodeURI(' ');  //redirect_uri参数const AGENTID =  '  '; //agentid 参数const searchParams = new URLSearchParams(window.location.search);const code = (route.query.code as string) || (searchParams.get('code') as string);const state = (route.query.state as string) || (searchParams.get('state') as string);const token = computed(() => userStore.getToken);//路由上没有code的情况下,进行企业微信授权if (!code) {const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${CORPID}&redirect_uri=${REDIRECT_URI}/index.html&response_type=code&scope=snsapi_base&state=1&agentid=${AGENTID}#wechat_redirect`;window.location.href = authUrl;}//存在code且不存在token的情况下走登录的接口if (code && (token.value == null || token.value == 'null')) { userStore.resetUserStore();login({code: code,state: state,}).then((res) => {userStore.setToken(res.token);});}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【八股】2024春招八股复习笔记2(大数据开发,Java)

【八股】2024春招八股复习笔记2(大数据开发) 文章目录 1、大数据存储(Flume、Hive、HBase、HDFS)2、大数据计算(MapReduce,Spark、Flink)3、大数据集群(Yarn、ZooKeeper、kafka&…

R语言 | 上下双向柱状图

1. 效果图 2. 代码 # 生成测试数据 difdata.frame(labelspaste0("pathway", 1:3),upc(30,15,1),downc(10,20,40) ) rownames(dif)dif$labels dif#变形 difreshape2::melt(dif) dif# 绘图 ggplot(dif, aes(xlabels, yifelse(variable"up", value, -value), …

Digital Image processing (DIP)

Camera FOV: Filed of view DOV: deep of view 景深 被F f/D 衡量,f 是焦距,D 是光圈大小。 当确定好了景深后,如何光线较暗,则需要补光,或者适当延长曝光时间(快门) 分辨率、像素尺寸&…

【GitLab】Ubuntu 22.04 快速安装 GitLab

在 Ubuntu 22.04 上安装最新版本的 GitLab,可以按照以下步骤操作: 1. 更新系统: 在终端中执行以下命令以确保系统是最新的: sudo apt update sudo apt upgrade2. 安装依赖: 安装 GitLab 所需的依赖包: …

2024年云计算使用报告,89%组织用多云,25%广泛使用生成式AI,45%需要跨云数据集成,节省成本是云首要因素

备注:本文来自Flexera2024年的云现状调研报告的翻译。原报告地址: https://info.flexera.com/CM-REPORT-State-of-the-Cloud Flexera是一家专注于做SaaS的IT解决方案公司,有30年发展历史,5万名客户,1300名员工。Flex…

35.HarmonyOS App(ArkUI)使用父组件@Builder装饰的方法初始化子组件@BuilderParam报错

HarmonyOS App(ArkUI)使用父组件Builder装饰的方法初始化子组件BuilderParam报错 Type void is not assignable to type () > void. <tsCheck> 去掉括号()就可以了 装饰器&#xff1a; 用于装饰类、结构、方法以及变量&#xff0c;并赋予其特殊的含义。如上述示例中En…

npm淘宝镜像源更新

目录 前情提要&#xff1a; 背景&#xff1a; 镜像源更新&#xff1a; 清楚缓存&#xff1a; 直接切换镜像源&#xff1a; 补充&#xff1a; 错误解释&#xff1a; 解决方法&#xff1a; 前情提要&#xff1a; 2024 /1 /22 &#xff0c;registry.npm.taobao.org淘宝镜像源的SSL…

数据结构之单链表的详细实现(图解)

前言 本次博客讲结合图例讲解单向不带头非循环链表 此后会讲解一些题目 1单链表的实现 1.1什么是单链表 我们先看数组&#xff0c;即顺序表的是什么样的&#xff0c;再看链表 1.2单链表的特点 实际中要实现的链表的结构非常多样&#xff0c;以下情况组合起来就有8种链表结…

HarmonyOS实战开发-为应用添加运行时权限

介绍 通过AbilityAccessCtrl动态向用户申请“允许不同设备间的数据交换”的权限&#xff0c;使用设备管理实例获取周边不可信设备列表。 说明&#xff1a; 查询周边不可信设备之前&#xff0c;请确保本设备与周边设备未进行配对。如果已配对&#xff0c;则恢复出厂设置之后重新…

树与二叉树的应用试题解析

01&#xff0e;在有n个叶结点的哈夫曼树中&#xff0c;非叶结点的总数是( A ). A. n-1 B. n C. 2n-1 D.2n 02.给定整数集合{3,5,6,9,12}&#xff0c;与之对应的哈夫曼树是( D…

MySQL - 高阶语句(二)

目录 6. 子查询 操作&#xff1a; EXISTS 关键字 别名 as 7. 视图 理论&#xff1a; 操作&#xff1a; 视图的优缺点 8. NULL 值 9. union 联级 9.1 union &#xff08;合并后去重&#xff09; 9.2 union all (合并后不去重) 9.3 取非交集值 10. case 条件选择查…

Vue 与 React:前端框架对比分析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…