共计 3740 个字符，预计需要花费 10 分钟才能阅读完成。
前言
最近公司须要企业微信的开发，类型是自建的 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_ENDPOINT
onMounted(()=>{
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】
正文完
