前言
最近公司须要企业微信的开发，类型是自建的H5利用，本文就是介绍如何受权获取微信用户的根本信息的过程，如用户名、用户头像。
后盾操作
官网开发指南，上面是流程图：
依照流程图开发即可，上面是具体的步骤：
1、结构网页受权链接
2、获取拜访用户身份
3、获取拜访用户敏感信息
前端操作
后盾接口须要获取AccessToken，我这里不须要介绍了，上面介绍下前端开发过程：
public.html
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>考勤助手</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script> </body></html>App.vue
<script setup>import { ref, onMounted } from 'vue'import axios from 'axios'import { NavBar } from 'vant';import {useRouter} from "vue-router";const router = useRouter()axios.defaults.baseURL = import.meta.env.VITE_API_ENDPOINTonMounted(()=>{ var u = navigator.userAgent, app = navigator.appVersion;//android终端或者uc浏览器 var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isAndroid) { localStorage.setItem('device', 'android') } if (isiOS) { localStorage.setItem('device', 'ios') } try { axios.post('/checkin/mobile/sign?url='+'http://third.hypersmart.ltd/').then(res =>{ console.log('sign success =', res) if (res.data && res.data.code === 200 && res.data.result){ console.log('wx.config =', res.data.result) wx.config({ beta: true,// 必须这么写，否则wx.invoke调用模式的jsapi会有问题 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert进去，若要查看传入的参数，能够在pc端关上，参数信息会通过log打出，仅在pc端时才会打印。 appId: res.data.result.corpid, // 必填，企业微信的corpID，必须是本企业的corpID，不容许跨企业应用 timestamp: res.data.result.timestamp, // 必填，生成签名的工夫戳 nonceStr: res.data.result.nonceStr, // 必填，生成签名的随机串 signature: res.data.result.signature,// 必填，签名，见 附录-JS-SDK应用权限签名算法 jsApiList: ['chooseImage', 'previewImage', 'uploadImage', 'getLocalImgData'] // 必填，须要应用的JS接口列表，但凡要调用的接口都须要传进来 }); wx.ready(function(){ // config信息验证后会执行ready办法，所有接口调用都必须在config接口取得后果之后，config是一个客户端的异步操作，所以如果须要在页面加载时就调用相干接口，则须把相干接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则能够间接调用，不须要放在ready函数中。 console.log('wx.ready') const token = localStorage.getItem('token') if (token){ axios.defaults.headers.common['X-Access-Token'] = `${token}` } }); wx.error(function(res){ // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息能够关上config的debug模式查看，也能够在返回的res参数中查看，对于SPA能够在这里更新签名。 console.log('wx.error=',res) }); } }) }catch (e) { console.log('catch-',e) }})</script><template> <div class="app"> <router-view /> </div></template><style scoped>.app{ height: 100%;}</style>oauth.vue
<script setup>import {ref, onMounted} from 'vue'import {Grid, GridItem, Cell, CellGroup, Picker, Popup, Field, Image} from 'vant';import axios from 'axios'import { useRouter } from "vue-router";const router = useRouter()const fieldValue = ref('');const showPicker = ref(false);const urlParams = new URLSearchParams(location.search);const code = urlParams.get('code');console.log('params =', code)if (code){ axios.post('/checkin/sys/wxLogin?code='+code).then(res =>{ console.log('login res =', res) // alert(JSON.stringify(res)) if (res.data && res.data.code === 200){ if (res.data.result){ console.log('set localStorage in ') const token = res.data.result.token const userInfo = res.data.result.userInfo const departs = res.data.result.departs console.log('set localStorage token ', token) localStorage.setItem('token', token) localStorage.setItem('userInfo', JSON.stringify(userInfo)) localStorage.setItem('departs', JSON.stringify(departs)) location.href = '/' } } })}</script><template> <div class="container"> </div></template><style scoped lang="postcss"></style>这里阐明下，咱们在public.html外面引入微信相干js，加好之后能力应用wx.config，而后咱们在App.vue文件中通过接口获取微信签名和密钥等信息，而后增加wx.config配置注册，只有胜利了，才会跳转到你指定的oauth页面，在oauth页面你能够获取到微信返回的code，你再把code通过后盾接口返回给后盾，后盾再获取到企业微信的根本信息，如用户名，头像等等。这样就实现了前端的所有配置。
总结
1、在应用wx.config注册的时候常常会遇到企业微信服务返回的问题，比方：签名谬误，我这里的问题是timestamp导致的，单位应该是秒，后盾设置成了毫秒导致始终失败，这个大家要留神下。
援用
企业微信 引入微信api扫一扫（vue）【h5页面调用微信jssdk】