前言
最近公司需要企業微信的開發，型別是自建的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導致的，單位應該是秒，後臺設定成了毫秒導致一直失敗，這個大家要注意下。