前端企业微信开发内嵌H5记录

浓油赤酱清汤寡水

已于 2023-05-22 19:02:51 修改

阅读量7.5k

点赞数 14

文章标签：前端 javascript vue.js 微信开放平台

于 2022-08-20 19:03:12 首次发布

本文链接：https://blog.youkuaiyun.com/zhichaogong/article/details/125679097

版权

前端企业微信开发内嵌H5记录（Vue）

文章目录

前端企业微信开发内嵌H5记录（Vue）
一、引入相应JS-SDK
- 1.JS-SDK
二、授权（网页授权）
总结

一、引入相应JS-SDK

1.JS-SDK

1.注意引入顺序
2.引入成功后可以通过访问window下wx对象，调用企微提供的API

注意：不建议通过 npm 安装jssdk相关依赖使用

---public\index.html

<!-- 按照以下顺序引入 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- 1. jssdk -->
    <script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <!-- 2. 调用 wx.agentConfig需要引入 jwxwork sdk -->
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
    <title>企微</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

二、授权（网页授权）

目的是通过授权登录的方式，在自建应用或网页中获取企微用户信息

1.首先构造网页授权链接
2.通过在 vue-router 中的路由守卫中发起授权

这里注意每次打开或者刷新页面都会经过路由守卫,
并不是每次都需要授权（或调用授权方法，具体原因在后面会提到），所以需要在守卫中进行判断调用时机

1.构造网页授权链接

1.这里一般是后台来构造这个授权链接提供给前台接口，传入需要的参数即可。所以只展示前台封装api部分代码。
2.假设后台提供的接口是 /api/wechat/get_oauth_url
3.需要的参数可以参考企业微信文档-构造网页授权链接
4.返回结果是携带code参数的回调地址，例如：https://my.qiwei.cn/md?code=wx123456

本次记录只传入以下参数：
appid：企业的CorpID
redirect_uri：授权后重定向的回调链接地址，使用urlencode对链接进行处理(也就是授权成功后需要前往的页面)
agentid：应用agentid，snsapi_privateinfo时必填
scope：区分静默授权（snsapi_base）与手动授权（snsapi_privateinfo）

代码如下（示例）：

---src\api\auth.js

//接口请求封装
const auth = {
    // 获取学员uid
    oauthUrl: (params) => {
        return Instance.get(`/api/wechat/get_oauth_url?corpId=${params.corpId}&callback=${params.oauthCallback}&agentid=${params.agentid}&scope=${params.scope}`);
    },
}

export default auth

2.发起授权

这一步很简单，我们只需要在进入页面前在router.beforeEach全局前置守卫中发起授权即可，需要做一步简单的判断。

判断当前路径中query对象中是否有code属性，如果有说明已经授权过了，直接放行就可以了
如果没有就发起授权，授权成功后执行window.location.href跳转，再次进入路由守卫进行判断，最终进入目标页

注意：不进行判断会进入死循环，造成一直授权，并且授权次数是有限制的，具体多少次忘记了，这里提醒以下！

代码如下（示例）：

---src\router\auth.js

import { getOauthUrl } from "@/common/auth";

router.beforeEach((to, from, next) => {
  if (!to.query.code) {
    getOauthUrl(to);
  } else {
    next();
  }
});

---src\common\auth.js

import config from '@/config'
import api from '@/api'

let { baseUrl, corpId, agentid } = config
export function getOauthUrl(to) {
    // URL编码
    let oauthCallback = encodeURIComponent(
        baseUrl[process.env.NODE_ENV] + `/md${to.fullPath}`
    );
    let params = {
        oauthCallback, // 回调地址（授权成功后跳转的地址）
        corpId: corpId[process.env.NODE_ENV],
        agentid: agentid[process.env.NODE_ENV]
    };
    // 获取授权地址 - 跳转
    api.auth.oauthUrl(params).then((res) => {
        window.location.href = res.oauthUrl;
    });
}

3.注入企业与应用权限

注入权限是调用企业微信API的前提，这一步在页面初始化时处理，如页面中有在初始化时调用企微API的场景，需要在注入成功后执行否则会报错

1.企业权限（wx.config）应用权限（wx.agentConfig）分别有对应的生成签名方式。
2.调用agentConfig的注意事项,参见文档，划到最下面

注意：虽然文档有提到从企业微信3.0.24及以后版本，无须先调用wx.config，可直接调用wx.agentConfig。但是这里建议做兼容处理，企业与应用权限都调用，这样做会让你在之后使用API时减少很多麻烦。

代码如下（示例）：

---src\common\wx-auth.js
import api from "@/api";
import Vue from "vue";
import config from "@/config";

const { baseUrl } = config;
const wxAuth = (to) => {
  return new Promise(async (resolve, reject) => {
    const url = baseUrl[process.env.NODE_ENV] + `/md${to.path}`;
    const corpId = "111222333" // 假定
    const corpBody = { url, corpId };
    const agentBody = { url };
    const corpSignature = await api.wxAuth.getCorpWechatSignature(corpBody); // 通过接口，获取agentConfig的参数
    const agentSignature = await api.wxAuth.getAgentWechatSignature(agentBody); // 通过接口，获取agentConfig的参数

    wx.config({
      beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: "", // corpID
      timestamp: corpSignature.timestamp, // 时间戳
      nonceStr: corpSignature.noncestr, // 随机串
      signature: corpSignature.signature, // 签名
      jsApiList: [], // 需要使用的JS接口列表，凡是要调用的接口都需要传进来
    });

    wx.ready(() => {
      wx.agentConfig({
        corpid: "",
        agentid: "",
        timestamp: agentSignature.timestamp, // 时间戳
        nonceStr: agentSignature.noncestr, // 随机串
        signature: agentSignature.signature, // 签名
        jsApiList: [],

        success: async (res) => {
          console.info("注入成功", res);
          resolve(res);
        },
        fail: (res) => {
          console.info("注入失败", res);
          if (res.errMsg.indexOf("function not exist") > -1) alert("版本过低请升级");
          reject(res);
        },
      });
      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    });
    wx.error((res) => {
      console.info("企业注入失败");
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
  });
};

export { wxAuth };

---src\views\page.vue
<script>
import { wxAuth } from "@/common/wx-auth";

export default {
  data() {
    return {};
  },
  async mounted() {
    // 同步
    // 第一步：注入权限
    await wxAuth(this.$route);
    // 第二步：注入成功后调用["getContext"]Api,判断入口
    await this.getContext();
  },
};
</script>