关于企业微信:企业微信自建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_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 ...