企业微信H5授权登录

在企业中如果需要在打开的网页里面携带用户的身份信息,第一步需要获取code参数

如何实现企业微信H5获取当前用户信息即accessToken?

1.在应用管理--》创建应用

2.创建好应用,点击应用主页-》设置-》网页-》将授权链接填上去

官方文档可以看这---->构造网页授权链接 - 接口文档 - 企业微信开发者中心

https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww72c853a9xxxx54&redirect_uri=http%3A%2F%2F47.xxx.179.198%3A6379%2F%23%2F&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect

ww72c853a9xxxx54  是你企业的APPID  
http%3A%2F%2F47.xxx.179.198%3A6379%2F%23%2F  是你经过UrlEncode的网站,要跳转的地址
 

以上的案例只需要改动 appid和redirect_uri的值

APPID可以去我的企业,底部的企业ID去获取

redirect_uri 就是我们开发的网站 然后记住 请使用urlencode对链接进行处理

3.记得加在开发者接口-》网页授权-》设置可信任域名 上白名单 要不然会以下报错

企业微信报错 redirect_uri需使用应用可信域名

1.必须是域名 不支持ip

2.不用加http 协议头

PS:前面设置错了,后来专门配置了个域名(www.xxxx.com.cn)

4.在我的应用点击打开,如果跳转到redirect_uri 就说明配置成功了

以下就是重定向的地址,多了2个参数我们要拿到code值去传给后端进行登录

https://www.xxxx.com.cn/html?code=J2jO8plZ_LNeoZjW_Z21rDlHJTYylOHqcvoo0JqLoGc&state=STATE#/

获取重定向code,得到accessToken

<template><view class=" "><view class=" "><p>url:<input type="text" v-model="title"/></p><p>code:<input type="text" v-model="code"/></p><p>accessToken:<input type="text" v-model="accessToken"/></p></view></view>
</template><script>export default {data() {return {title: '',accessToken:"",code:"",baseUrl:'https://www.xxxxx.com.cn/shebao', }},onLoad() {this.code=this.getUrlParams('code')this.getAccessToken()},mounted() {var currentUrl = window.location.href;this.title=currentUrl			},methods: {		// 获取tokengetAccessToken(){let _this=thisuni.request({url:this.baseUrl+'/qw/callback',data: {code:this.code},success(res){console.log(res.data);let result=res.dataif(result.code==200){_this.accessToken=result.result	}}})},//获取url的codegetUrlParams(name){try{// 获取当前页面的URLvar url = window.location.href.split('?')[1];console.log(url)let query= url.split('&')console.log(query)let code=''for (var i = 0; i < query.length; i++) {if(query[i].split('=')[0]==name){code=query[i].split('=')[1]break} }return code}catch(e){return ''}},}}
</script><style lang="scss">input{background-color: antiquewhite;}
</style>

这样在页面展示一下当前url,并获取到了code,再调用后端接口获取token。

至此完成了我们的授权登录

企业微信H5授权登录获取accessToken

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

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

相关文章

wampserver的使用

wampserver的使用 文章目录 wampserver的使用1.启动2.目录3.基本操作 1.启动 WampServler有三种状态 服务器关闭状态&#xff0c;颜色为红色服务器开启&#xff0c;但是为离线状态&#xff0c;颜色为橙色&#xff0c;只有本机可以访问服务器开启&#xff0c;在线状态&#xf…

Educational Codeforces Round 166 (Rated for Div. 2)题解(A,B,D)

今天真的巨抽象&#xff0c;第三题没做出来&#xff0c;但是第四题过了&#xff0c;也是准备上小分了&#xff0c;因为nnd不按那个分数&#xff0c;而是按照做题数&#xff0c;直接废了 A. Verify Password 题解&#xff1a;小丑水题一个人&#xff0c;按照ASCII码比较一遍直接…

SDK开发

为什么需要Starter&#xff1f; 理想情况:开发者只需关心调用哪些接口&#xff0c;传递哪些参数就跟调用自己写的代码一样简单。 开发starter的好处&#xff1a;开发者引入之后&#xff0c;可以直接在application.yml中写配置&#xff0c;自动创建客户端。 starter开发流程 …

STM32G030C8T6:EEPROM读写实验(I2C通信)--M24C64

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;系统主频64 MHZ,采用高速外部晶振&#xff0c;实现PB11,PB10 引脚模拟I2C 时序&#xff0c;对M24C08 的EEPRO…

javascript DOM 设置样式

No.内容链接1Openlayers 【入门教程】 - 【源代码示例300】 2Leaflet 【入门教程】 - 【源代码图文示例 150】 3Cesium 【入门教程】 - 【源代码图文示例200】 4MapboxGL【入门教程】 - 【源代码图文示例150】 5前端就业宝典 【面试题详细答案 1000】 文章目录 一、直接…

【易错题】数据统计补充习题(选择题 )#CDA Level 1

本文整理了数据统计相关的易错题&#xff0c;部分可作为备考CDA Level 1统计学部分的补充习题。来源&#xff1a;如荷学题库&#xff08;CFDP第三部分&#xff09; 1&#xff09; 2&#xff09; 3&#xff09; 4&#xff09; 5&#xff09; 6&#xff09; 7&#xff09; 8&…

shopee签名x-sap-ri、x-sap-sec算法还原

最新版签名&#xff0c;免账号登录成功率百分百&#xff0c;需要可d 两种方式base64 MTQzMDY0OTc3OA QXVndXN0MjItZnF4

【项目经理】什么是领导

引言&#xff1a;        项目管理是一个不断发展的领域&#xff0c;它要求项目经理不断学习、适应和创新。通过本系列文章&#xff0c;我们希望能够帮助每一位项目经理提升自己的专业能力&#xff0c;成为引领项目成功的舵手。 持续更新。。。。。。。。。。。。。。。…

Blueprints - Collision Presets相关

一些以前的学习笔记归档&#xff1b; 在Static Mesh或SkeletalMesh等的属性中&#xff0c;都有Collision Presets&#xff1a; 其中Oject Type只是一个枚举参数&#xff0c;代表设置该Actor为什么类型&#xff0c;Collision Responses代表该Actor对各种类型的Actor有什么反应&a…

DataGrip 数据库连接客户端

I DataGrip 安装 1.1安装 打开dmg镜像&#xff0c;将“DataGrip.app”拖入应用程序中&#xff1b; 1.2 Act 打开应用程序,点击试用模式启动软件&#xff0c;然后将“jetbrains-agent-latest”拖到任意位置&#xff0c;然后拖入&#xff0c;弹出对话框&#xff0c;点击“Rest…

Java web应用性能分析之【压测工具ab】

常用的性能测试工具有&#xff1a;JMeter、loadRunner、ab&#xff1b;对于开发人员来说用的多的是免费的Jmeter和ab&#xff0c;对于测试来说可能用收费的商业软件loadRunner多。在这里我们就说说ab压测工具&#xff0c;因为ab基本满足web接口测试要求&#xff0c;jmeter后面再…

LabVIEW车体静强度试验台测控系统

LabVIEW车体静强度试验台测控系统 开发了一种基于LabVIEW的车体静强度试验台测控系统&#xff0c;通过自动化技术提高试验的精度和效率。系统采用LabVIEW软件与S7-200 SMART PLC硬件平台相结合&#xff0c;实现了对液压缸作用力的精确控制和试验数据的实时采集及管理。 传统的…

通用代码生成器应用场景四,跨编程语言翻译

通用代码生成器应用场景四&#xff0c;跨编程语言翻译 如果您有一个Java工程&#xff0c;想把它移植到Rust或Golang语言中去&#xff0c;希望尽可能加快研发速度。 如果您的系统是通用代码生成器开发的&#xff0c;保留了系统的SGS源文件或者SGS2的Excel模板&#xff0c;您可…

结构体 基础知识

本笔记为观看64 结构体-结构体定义和使用_哔哩哔哩_bilibili 的学习笔记 1.结构体概念 结构体属于用户自定义的数据类型&#xff0c;允许用户存储不同的数据类型。 2.结构体定义和使用 ​ 结构体定义 ​ 通过结构体创建变量的方式 2.1 Struct 结构体名 变量名 ​ 2…

【算法】MT2 棋子翻转

✨题目链接&#xff1a; MT2 棋子翻转 ✨题目描述 在 4x4 的棋盘上摆满了黑白棋子&#xff0c;黑白两色棋子的位置和数目随机&#xff0c;其中0代表白色&#xff0c;1代表黑色&#xff1b;左上角坐标为 (1,1) &#xff0c;右下角坐标为 (4,4) 。 现在依次有一些翻转操作&#…

“迎七一、学党史、祭英烈”活动在孙善师孙善帅烈士故居启动

临沂信息联播讯&#xff08;张春兄、冯爱云&#xff09; 5月30日&#xff0c;山东省著名烈士孙善师孙善帅故居迎来了山东全味时间企业管理咨询服务有限公司、志林丽虹沂蒙文化传播&#xff08;临沂&#xff09;有限公司、山东志林搏击健身有限公司的参观团队&#xff0c;标志着…

【WEEK14】 【DAY4】Swagger第二部分【中文版】

2024.5.30 Thursday 接上文【WEEK14】 【DAY3】Swagger第一部分【中文版】 目录 16.4.配置扫描接口16.4.1.修改SwaggerConfig.java16.4.1.1.使用.basePackage()方法指定扫描的包路径16.4.1.2.其他扫描方式均可在RequestHandlerSelectors.class中查看源码 16.4.2.仍然是修改Swag…

这个夏天,凶险如昨?

回望2023年三季度的“美债风暴”&#xff0c;当时美债收益率狂飙突破5%&#xff0c;阴霾笼罩下全球风险资产一片惨淡&#xff0c;这一场景会在今夏再度上演吗&#xff1f; 本周美债遭遇抛售&#xff0c;10年期收益率上破4.6%&#xff0c;2年期收益率逼近5%关口&#xff0c;收益…

linux磁盘满了,如何查找大文件清除?

将整个Linux中文件按照文件大小排序&#xff0c;从大到小排序 只显示前100条数据 命令&#xff1a; find / -type f -exec du -h {} | sort -rh | head -n 100结果&#xff1a;

全栈工程师需要具备哪些技能?

概论&#xff1a; 全栈工程师是一位能够从头到尾构建 Web 应用程序的工程师&#xff0c;能独立完成产品。技术包括前端部分、后端部分和应用程序所在的基础架构。他们在整个技术栈中工作&#xff0c;并了解其中的每个部分。从需求分析开始&#xff0c;到概要设计&#xff0c;详…