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

4次阅读

共计 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】

正文完