vue项目迁移到企业微信（单点登录、获取定位）

概要

企业微信自建内部应用遇到的各种问题：

1. 获取企业微信用户信息进行单点登录
2. 企业微信中通过h5获取定位问题

思路

1.企微单点登录–获取用户信息有如下步骤

配置应用主页获取code
↓
将code发给后端
↓																	
后端通过code和access_token进行用户信息查询
↓
无其他验证，通过jwt或其他的进行登录，将token返回给前端	/	有验证过程将查询到的数据返回给前端
↓													/	↓
完成登录											/	前端进行人脸拍照，上传图像信息和用户信息
													/	↓
													/	后端比对验证，验证通过后使用jwt或其他的进行登录，将token返回给前端
													/	↓
													/	完成登录

2.通过sdk获取定位

前端导入sdk（安装weixin-js-sdk依赖）
↓
创建一个WeChat.js文件到utils文件下
↓
初始化页面把当前url地址传给后端（当前网页的URL， 不包含#及其后面部分）相当于域名
↓
后端返回初始化用到的数据（appId, timestamp, noncestr, signature）
↓
初始化完成

实现

一、单点登录

1 .首先配置应用主页

2.获取code

当点开应用时会在设定的重定向地址中带上code的参数。通常的页面地址如下：

https://重定向地址/#/login?code=82TpO70pTU5Z3_v17wJVOpvUHE4-z3FcqyQ3zmmlZq4&state=STATE

但有时候我们的项目时vue时并且路由时hash模式时返回的地址可能长这样:

https://重定向地址/?code=82TpO70pTU5Z3_v17wJVOpvUHE4-z3FcqyQ3zmmlZq4&state=STATE#/login

如果是下面这种情况我们可以采用这样的方式获取code

const urlParams = new URLSearchParams(window.location.search);
const urlhash = new URLSearchParams(window.location.hash.split("?")[1]);
const code = urlParams.get("code") || urlhash.get("code");

3.利用code登录

后端通过code和access_token进行用户信息查询。可以根据业务需求进行最终的登录，要注意的是access_token和ticket需要做缓存，否则在后面请求量过大时会短暂的封IP。
方式一：获取到用户信息就直接登录，如果是jwt的登录直接调用jwt生成token并将token返回给前端即可。
方式二：如果有更换设备要验证的需求，通过code里面解析能够取到设备信息，如果是新设备，接口先返回用户信息和设备信息并标识需要验证。如果是人脸验证那么就再将这些信息过人脸验证接口，人脸验证通过后就可以设置jwt登录把token返给前端即可。

二、企业微信SDK获取定位

1.设置可信域名

在企业微信后台的“应用管理”添加域名，主要作用是验证这个域名是不是属于你自己的。点击“申请校验域名”然后访问下面的地址能够拿到校验的字符串就能够验证成功。

2.导入sdk

vue项目中在pubilc文件的index.html下添加sdk的文件。

<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>

第一个是通用的也就是最基础的，它能够获取定位这些等等，能够满足基本的业务需求。
第二个是企业微信的特有的一些地方，比如弹出授权显示的是应用名而不是当前的域名。

3.初始化sdk

创建一个初始化文件WeChat.js

import { instance } from "@/axios/index";
import { Toast } from "vant";
const wx = window.wx;
const WeChat = {
  init: function (jsApiList = [], url) {
    return new Promise((resolve, reject) => {
      instance
        .post("/api/user/wxticket", { currentUrl: url })
        .then((res) => {
          const { appId, timestamp, noncestr, signature } = res.data;
          if (appId) {
            wx.config({
              beta: true,
              debug: false,
              appId: appId,
              timestamp: timestamp,
              nonceStr: noncestr,
              signature: signature,
              jsApiList: jsApiList,
            });
            wx.ready(() => {
              wx.hideOptionMenu(); //隐藏右上角菜单接口
              instance
                .post("/api/user/agentconfig", { currentUrl: url })
                .then((res) => {
                  const { appId, timestamp, noncestr, signature } = res.data;
                  wx.agentConfig({
                    corpid: appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
                    agentid: "1000002", // 必填，企业微信的应用id （e.g. 1000247）
                    timestamp: timestamp, // 必填，生成签名的时间戳
                    nonceStr: noncestr, // 必填，生成签名的随机串
                    signature: signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
                    jsApiList: jsApiList, //你要调用的sdk接口必填
                    success: function () {
                      resolve(wx);
                    },
                    fail: function (res) {
                      Toast("版本过低请升级" + res);
                    },
                  });
                });
            });

            wx.error((err) => {
              Toast("微信初始化失败");
              reject(err);
            });
          } else {
            Toast("微信初始化失败");
            reject(res);
          }
        })
        .catch((err) => {
          reject(err);
        });
    });
  },
};

export default WeChat;

这里调用了两个接口来初始化，也就是上面的两个script标签里面的sdk。

4.使用

使用时先导入该模块

 import WeChat from "@/utils/WeChat.js";

 const getWxLocation = async () => {
      if (active.value) {
        active.value = false;
      } else {
        const currentUrl = window.location.href.split("#")[0]; // 获取当前url
        WeChat.init(["getLocation"], currentUrl)
          .then((wx) => {
            wx.getLocation({
              type: "wgs84",
              success: (res) => {
                const lat = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                const lng = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                getAdcode(lat, lng); // 获取区位码
                active.value = true;
              },
              fail: () => {
                Toast("获取定位失败");
                active.value = false;
              },
            });
          })
          .catch(() => {
            getLocation(); // 微信环境下获取定位失败，使用h5定位
          });
      }
    };

这里获取区位码的这个是另一个接口，可以使用腾讯地图的逆解析api来获取。active是自己定义的表示是否获取定位成功。如果企业微信获取失败这里还有个h5获取定位来容错。方法如下：

/* h5定位获取定位信息 */
    const getLocation = () => {
      if (active.value) {
        active.value = false;
      } else {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            function (position) {
              // 获取到设备的位置信息
              const latitude = position.coords.latitude; // 纬度
              const longitude = Math.abs(position.coords.longitude); // 经度
              active.value = true;
              getAdcode(latitude, longitude); // 获取区位码
            },
            function () {
              active.value = false;
              Toast.fail("定位失败");
            }
          );
        } else {
          active.value = false;
          Toast.fail("不支持H5定位");
        }
      }
    };

以上就是一个基本的使用原有Vue项目迁移到企业微信内部应用的基本过程。