H5自建企微应用,企业微信获取用户信息(网页如何拿到code,后端如何根据code获得UserId)
开始开发
最后更新:2019/08/08
企业微信提供了OAuth的授权登录方式,可以让从企业微信终端打开的网页获取成员的身份信息,从而免去登录的环节。
企业应用中的URL链接(包括自定义菜单或者消息中的链接),均可通过OAuth2.0验证接口来获取成员的UserId身份信息。
OAuth2简介
OAuth2的设计背景,在于允许用户在不告知第三方自己的帐号密码情况下,通过授权方式,让第三方服务可以获取自己的资源信息。
详细的协议介绍,开发者可以参考RFC 6749。
下面简单说明OAuth2中最经典的Authorization Code模式,流程如下:
流程图中,包含四个角色。
- ResourceOwner为资源所有者,即为用户
- User-Agent为浏览器
- AuthorizationServer为认证服务器,可以理解为用户资源托管方,比如企业微信服务端
- Client为第三方服务
调用流程为:
A) 用户访问第三方服务,第三方服务通过构造OAuth2链接(参数包括当前第三方服务的身份ID,以及重定向URI),将用户引导到认证服务器的授权页
B) 用户选择是否同意授权
C) 若用户同意授权,则认证服务器将用户重向到第一步指定的重定向URI,同时附上一个授权码。
D) 第三方服务收到授权码,带上授权码来源的重定向URI,向认证服务器申请凭证。
E) 认证服务器检查授权码和重定向URI的有效性,通过后颁发AccessToken(调用凭证)
D)与E)的调用为后台调用,不通过浏览器进行
企业微信OAuth2接入流程
图1 企业微信OAuth2流程图
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwd70ee88af370290f&redirect_uri=http://yuying-api.xutongbao.top/index1.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wwd70ee88af370290f&redirect_uri=http://yuying-api.xutongbao.top/index1.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
参考链接:
构造网页授权链接 - 接口文档 - 企业微信开发者中心
index1.html:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script><scriptsrc="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"referrerpolicy="origin"ref></script><script src="lib/axios.min.js"></script></head><body><div><div>信息</div><div>用户ID:<span id="m-user-id"></span></div><div>群ID:<span id="m-chat-id"></span></div></div><script src="lib/vconsole.min.js"></script><script>// VConsole will be exported to `window.VConsole` by default.var vConsole = new window.VConsole()</script><script>console.log(location.href)axios({url: `http://yuying-api.xutongbao.top/api/light/tools/qiWeToken`,method: 'post',data: {url: location.href,},}).then((res) => {console.log(res)const agentFun = () => {const { timestamp, noncestr, signature } = res.data.data.agentDatawx.agentConfig({corpid: 'wwd70ee88af370290f', // 必填,企业微信的corpid,必须与当前登录的企业一致agentid: '1000004', // 必填,企业微信的应用id (e.g. 1000247)timestamp, // 必填,生成签名的时间戳nonceStr: noncestr, // 必填,生成签名的随机串signature, // 必填,签名,见附录-JS-SDK使用权限签名算法jsApiList: ['getCurExternalChat'], //必填,传入需要使用的接口名称success: function (res) {console.log(666, res)wx.invoke('getCurExternalChat', {}, function (res) {console.log(777, res)if (res.err_msg == 'getCurExternalChat:ok') {let chatId = res.chatId //返回当前外部群的群聊IDdocument.getElementById('m-chat-id').innerHTML = chatId} else {//错误处理}})// 回调},fail: function (res) {console.log(res)if (res.errMsg.indexOf('function not exist') > -1) {alert('版本过低请升级')}},})console.log(timestamp, noncestr, signature)}agentFun()getUserInfo({access_token: res.data.data.corpData.tokenData.access_token,})})const parseQueryString = (url) => {let params = {}let arr = url.split('?')if (arr.length <= 1) {return params}arr = arr[1].split('&')for (let i = 0, l = arr.length; i < l; i++) {let a = arr[i].split('=')params[a[0]] = a[1]}return params}const getUserInfo = ({ access_token }) => {let qs = parseQueryString(location.href)let code = qs.codeaxios({url: `http://yuying-api.xutongbao.top/api/light/tools/qiWeUserInfo`,method: 'post',data: {code,},}).then((res) => {console.log(res)if (res.data.code === 200) {document.getElementById('m-user-id').innerHTML = res.data.data.UserId}})}</script></body>
</html>
const toolsQiWeUserInfo = async (req, res) => {const { code } = req.bodyaxios({url: 'https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=wwd70ee******0290f&corpsecret=JrPSfOHlNz*********HwAxyUdUDu8',}).then((resData) => {let access_token = resData.data.access_tokenaxios({url: `https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo`,params: {access_token,code,debug: 1,},}).then((resData) => {console.log(res)res.send({code: 200,data: resData.data,message: '成功',})})})
}
H5自建企微应用,企业微信获取用户信息(网页如何拿到code,后端如何根据code获得UserId)相关推荐
- 企业微信获取用户信息响应40029(微信小程序与公众号出现类似问题应该是同样的原因)
企业微信获取用户信息响应40029 在对接企业微信的时候需要通过code去获取userId,但是会返回40029的error码,经过测试与验证原因是访问地址 https://open.weixin.q ...
- 独立版企微魔盒企业微信系统V7.5开源版 带安装教程
下载:D立版企微魔盒企业微信系统V7.5开源版带安装教程-小程序文档类资源-CSDN下载 更新日志: 1.部分功能适配新版企业微信第三方应用API: 2.解决企业微信第三方API调整后扫码显示企业未入 ...
- vue + 微信获取用户信息
vue + 微信获取用户信息 本次项目做到一个点赞功能,即分享出去一个页面给微信好友,微信好友点开并点赞,需要将点赞用户的微信昵称,微信头像以及微信openid,微信unionid(这个需要关注公众号 ...
- 2.3 业务实现(微信获取用户信息详解)
在业务实现部分,我们主要介绍微信服务号获取用户信息授权机制以及如何通过该机制进行编程实现用户信息获取. 在微信服务号开发中,常常需要对用户的信息进行获取,以便程序能够识别用户的标识,并有针对性的与用户 ...
- 微信获取用户信息 ”微信用户“
微信获取用户信息 "微信用户" 微信小程序 调用getUserProfile库的时候显示"微信用户" ,不显示微信头像和昵称的情况原因是: 由于版本太高选择低于 ...
- 微信 获取 用户信息访问授权管理
define( "WX_APPID" ,$appid); //公众号的appid define( "WX_SRC" , $screat ); 公众号seceat ...
- java微信获取用户信息_SpringBoot中获取微信用户信息的方法
前言 不知道你是否参加过拼多多上邀请微信好友砍价功能,这个功能实现首先需要考虑的就是获取微信用户的信息.获取用户信息就是获取公众号下微信用户的信息,今天我就来讲讲如何从公众号下获取微信用户信息. 需要 ...
- java微信获取用户信息接口_java微信接口之二—获取用户组
一.微信获取用户组接口简介 1.请求 该请求也是GET方式请求.请求的url格式如下: https://api.weixin.qq.com/cgi-bin/groups/get?access_toke ...
- 【Chapter2】微信获取用户信息(昵称、头像、openid)
一.简介 制作微信小程序,第一步就是获取使用者信息,这样保存在数据库里,可以更好地对用户信息进行管理.操作.因此我们需要用户一个独一无二的凭证,就像超市里给每个客户制作的超市优惠卡,每个卡号是顾客进入 ...
最新文章
- Linux软件安装包中devel与非devel包之间的区别
- .NET Framework 3.5 中的功能简介(1)
- 做最好的自己,人生十件事(事业,人生,情感)
- html中 alt 和 title 的区别
- 【转载】yolo处理流程实例
- Python字典的setdefault() 和get()方法比较
- IT-标准化(中国)有限公司-网络拓朴图
- 【Luogu】P1383高级打字机
- HDLBits答案(9)_卡诺图与最简SOP式
- 如何基于 Kubernetes 构建完整的 DevOps 流水线
- oracle 文件写 n r,[oracle]log_archive_dest_n与DB_RECOVERY_FILE_DEST
- Python学习笔记(随机数)
- java 抽象类 方法_java 抽象类
- 数组 -自动遍历数组-冒泡排序
- linux io100的原因_Unix与Linux的区别与联系
- bzoj 4393 Usaco Fruit Feast
- Python 人脸识别系统
- 【读书笔记-诗词歌赋】诗词积累(一)
- 记录微信公众号迁移的过程(使用微擎)
- 【Python】求笛卡尔乘积