| web端通过企业微信进行登录（获取员工信息） | 您所在的位置：网站首页 › 史泰博企业用户登录不了微信 › web端通过企业微信进行登录（获取员工信息） |
web端通过企业微信进行登录（获取员工信息）
|
博主 [DTcode7] 带您 溺亖在知识的海洋里，嘿嘿嘿.~ 🐒 个人主页—— DTcode7 的博客🐒 《微信小程序相关博客》《Vue相关博客》《前端开发习惯与小技巧相关博客》《AIGC相关博客》 《photoshop相关博客》 😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈 🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！ 前言企业微信中的自建应用，除了可以关联已发布的小程序，还可以关联网站。 那么久引出了一个问题，如果这个网站需要能通过企微打开后直接自动登录。（毕竟企业里讲究效率，不想输入账号密码，需要直接通过企微中的员工架构信息来登录） 使用小程序的时候直接用 wx.qy.login就能获取到code，用来向后端请求员工数据（详情请看另一篇文章：微信小程序关联企业微信的自建应用后，静默登录）。然而，网页端是不能直接调用wx.qy.login这些API接口的，需要使用企微提供的特定接口去获取。 企微提供给网页端的授权登录方法 OAuth2授权登录这个方法可以可通过OAuth2.0验证接口来获取成员的UserId身份信息，进而让从企业微信终端打开的网页获取成员的身份信息，从而免去登录的环节。 （官方文档：https://work.weixin.qq.com/api/doc/90000/90135/91020） 第一步：构造网页授权链接，获取code（官方文档：https://work.weixin.qq.com/api/doc/90000/90135/91022 ） getQywxCode () { console.log('===================获取企业微信用户code==========') const myAppid = 'xxxxx' // 企业id const myAgentid = 'xxxx' // 自建应用id // !授权成功后跳转的路径【重定向的地址】（重定向的【域名】，需要事先在企微自建应用的可信域名中添加上，否则会报错） const redirectUri = encodeURI('mail.qq.com/firstPage') // 应用中配置的可信域名+授权后跳转到的路径 // state=CJSTATE 就是一个自己设置的标记字段，可以不写 const authorUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + myAppid + '&redirect_uri=' + redirectUri + '&response_type=code&agentid=' + myAgentid + '&scope=snsapi_base&state=CJSTATE#wechat_redirect' // 页面将跳转至 【配置的跳转后的路径url】，并且url中的格式为：redirect_uri?code='用户code信息'&state='STATE' // 可以在跳转后的页面中通过【this.$route.query.code】和【this.$route.query.state】来获取到这两个参数 // 使用这种方法能够避开跨域问题造成的报错中断 window.location.href = authorUrl },这样就能获取到code了，然后将code作为参数传给后端，获取用户信息进行登录 注意：这里有个问题，会出现跨域报错，俺不会解决，所以才参考其他博客的解决方法，直接通过window.location.href跳转页面，毕竟nginx 反向代理又不会用，学是不可能学的，这辈子不可能学的，网上朋友说话又好听，各个都是人才~ 请求中详细的参数说明请看官网文档，写的很详细 特别的：要记住，重定向的url地址（上面的是-->mail.qq.com/firstPage）的域名（就是这个--->mail.qq.com）一定要先在企微的自建应用中设置可信域名
官网文档：https://work.weixin.qq.com/api/doc/90000/90135/91023 老规矩，要查信息，先要获取access_token 获取access_token - 企业微信API (qq.com) // ==========================================调用企业微信接口，获取当前用户的信息======================================= // access_token是一个登录凭证，其它的业务API接口，都需要依赖于access_token来鉴权调用者身份 // 获取access_token，用于在获取用户信息时使用 getAccess_token () { /** 返回的数据格式 * { "errcode": 0, "errmsg": "ok", "access_token": "wqNexxxxxbGW....", "expires_in": 7200 过期时间2小时 } * access_token的有效期通过返回的expires_in来传达，正常情况下为7200秒（2小时）==》2小时内重复获取到的token是一样的 // TODO：开发者需要自己去实现access_token 在2小时快失效时重新获取的逻辑，或者每次打开都重新获取一次 */ const res = this.$axios({ // corpid==>企业id // corpsecret===>企业自建应用的凭证密钥 method: 'get', url: 'https://qyapi.weixin.qq.com/cgi-bin/gettoken', data: { corpid: 'xxxxx', corpsecret: 'xxxxxxxxxx' } // headers: { // 'Access-Control-Allow-Origin': '*' // } }) console.log(res) // 保存当前获取到的access_token sessionStorage.setItem('access_token', res.access_token) // 如果请求成功，拿到返回数据，则调用下一个方法，进行员工信息获取 if (res.status === 200) { this.getQywxUserBaseInfo() } }为了安全考虑，开发者请勿将access_token返回给前端，需要开发者保存在后台，所有访问企业微信api的请求由后台发起（我这里为了方便测试，就直接保存在前端了，还把密钥显式地写在前端，实际开发中，是需要写一个方法，把code传给后端，同时企业id、应用密钥全都要配置在后端，然后由后端发起请求去获取access_token，在后台拿到用户信息返回给前端，而不要在前端保存这些隐私信息！） // 获取用户在企业微信中的基本信息(能得到userId，用来查询更详细的用户信息) getQywxUserBaseInfo () { /** 返回的数据格式 * { "UserId": "Zhangsan", "DeviceId": "xxxxxxx", "errcode": 0, "errmsg": "ok" } */ const res = this.$axios({ method: 'get', url: 'https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo', data: { access_token: sessionStorage.getItem('access_token'), code: this.userCode } }) console.log(res) // 保存当前企业微信用户的userid sessionStorage.setItem('UserId', res.UserId) },这样能拿到的用户信息很少，只有用户id有点用 第三步：去获取员工在企业微信中的详细信息想要拿到详细的信息，就可以使用上面拿到的userId，去请求等多数据 // 根据获取的用户在企业微信中的userId，查询到用户详细信息 getQywxUserInfoByUserID () { /** 返回的数据格式 * { * "errcode": 0, "errmsg": "ok", "userid": "ZhangSan", "name": "张三", "position": "文员", "mobile": "1775746941324", ...... * } */ const res = this.$axios({ method: 'get', url: 'https://qyapi.weixin.qq.com/cgi-bin/user/get', data: { access_token: sessionStorage.getItem('access_token'), userid: sessionStorage.getItem('UserId') } }) console.log(res) } |
【本文地址】