企业微信-自建H5应用授权登录获取用户信息

前言

最近公司需要企业微信的开发，类型是自建的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】

企业微信-自建H5应用授权登录获取用户信息

前言

后台操作

前端操作

总结

引用

Awbeci

引用和评论

SpringCloud-WebClient使用Get和Post请求

CloudDM 接入主流 OA 系统，简化工单审批流程

企业微信如何管理微信客户