当前位置: 首页 > news >正文

企业微信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

相关文章:

  • C# 解决 Excel 自动适应列宽的问题
  • Fatfs
  • nginx隐藏版本号、错误信息页面隐藏nginx软件、修改 HTTP 头信息中的connection 字段,防止回显具体版本号、curl命令
  • 2024年5月份面试总结
  • 安卓Zygote进程详解
  • 栈与队列练习题(2024/5/31)
  • 免费生物蛋白质的类chatgpt工具助手copilot:小分子、蛋白的折叠、对接等
  • systemctl系统控制器
  • 旧衣回收小程序带来的收益优势,小程序有哪些功能?
  • A6110 轴相对振动监控器AMS 6500机械健康监测器
  • 如何完全清除docker
  • 【设计模式深度剖析】【6】【结构型】【外观模式】| 以电脑开关按钮为例,并结合微服务架构的API网关加深理解
  • AI Agent LLM相关知识
  • 从C到C++,C++入门篇(1)
  • 10-探索 Intersection Observer API:高效管理元素可见性
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • 2017前端实习生面试总结
  • 8年软件测试工程师感悟——写给还在迷茫中的朋友
  • ABAP的include关键字,Java的import, C的include和C4C ABSL 的import比较
  • docker容器内的网络抓包
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • RxJS: 简单入门
  • VuePress 静态网站生成
  • Webpack 4x 之路 ( 四 )
  • win10下安装mysql5.7
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 阿里云爬虫风险管理产品商业化,为云端流量保驾护航
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 工程优化暨babel升级小记
  • 规范化安全开发 KOA 手脚架
  • 警报:线上事故之CountDownLatch的威力
  • 开放才能进步!Angular和Wijmo一起走过的日子
  • 微信端页面使用-webkit-box和绝对定位时,元素上移的问题
  • 微信开放平台全网发布【失败】的几点排查方法
  • 小程序开发中的那些坑
  • 写给高年级小学生看的《Bash 指南》
  • 2017年360最后一道编程题
  • ​虚拟化系列介绍(十)
  • # 睡眠3秒_床上这样睡觉的人,睡眠质量多半不好
  • #pragma pack(1)
  • #pragma 指令
  • #微信小程序(布局、渲染层基础知识)
  • #在线报价接单​再坚持一下 明天是真的周六.出现货 实单来谈
  • (Redis使用系列) Springboot 使用redis实现接口Api限流 十
  • (超简单)构建高可用网络应用:使用Nginx进行负载均衡与健康检查
  • (动态规划)5. 最长回文子串 java解决
  • (二)换源+apt-get基础配置+搜狗拼音
  • (附源码)小程序 交通违法举报系统 毕业设计 242045
  • (十六)Flask之蓝图
  • (十三)Flink SQL
  • (四) 虚拟摄像头vivi体验
  • (转)关于pipe()的详细解析
  • (自适应手机端)响应式服装服饰外贸企业网站模板
  • * 论文笔记 【Wide Deep Learning for Recommender Systems】
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始