企业微信H5-OAuth2静默登录如何在本地进行调试开发简记

企业微信官网接口参考 https://developer.work.weixin.qq.com/document/path/91119

本文主要记载以下几点功能

1、如何使用OAuth2进行静默登录拿到对应的成员身份的cookie信息

2、前端如何通过映射在本地进行调试实时看到本地开发的效果

3、步骤一会导致的一些问题以及如何解决

开始第一步：
1.1登录企业微信后台拿到配置应用的 应用主页地址 这一段代码的逻辑就是跳转地址的时候判断路由参数是否携带code、如果携带则判断一下来源是否是oauh的回调，如果是的话则路由返回上一页、因为通过location.href重定向会导致两层
此刻返回一层(总觉得这个方法不是特别好如果有更好的，可以评论或者私信我！！！共同进步家人们)，如果不是oauh的回调那么就执行自己的相应逻辑！第一步就完成了，目的就是通过重定向拿到用户cookie和服务器进行交互

1.2在前端代码config.uiUrl就是第一步拿到的应用主页地址

onLoad(async (options: any) => {
  try {
    userInfosStroe.setLogin(false);
    let params = new URLSearchParams(window.location.search);
    state.code = uni.getStorageSync("code") || params.get("code") || "";

    if (!state.code) {
      uni.setStorageSync("first", 1);
      // 重定向登录
      let REDIRECT_URI = encodeURI(config.uiUrl);
      let test = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.corpid}&redirect_uri=${REDIRECT_URI}&response_type=code&scope=snsapi_base&state=STATE&agentid=AGENTID#wechat_redirect`;
      uni.setStorageSync("code", state.code);
      userInfosStroe.setCode(state.code);
      window.location.href = test;
    } else {
      let isFirst = uni.getStorageSync("first");
      uni.setStorageSync("code", state.code);
      if (isFirst == 1) {
        uni.removeStorageSync("first");
        history.back();
         return;//这个很重要code是次抛！！！！！！
      }
      // 已经是重定向的
      const {
        data: { needRegist, qxwxUserId, token },
      } = (await checkUserInfo({
        code: state.code,
        agentId: config.agentId,
      })) as any;
      uni.setStorageSync("qxwxUserId", qxwxUserId);
      userInfosStroe.setqxwxUserId(qxwxUserId);
      if (needRegist) {
        uni.removeStorageSync("token");
        userInfosStroe.setToken("");
        userInfosStroe.setLogin(false);
        // uni.reLaunch({
        //   url: "/pages/account/index",
        // });
      } else {
        // 登录 存token
        uni.setStorageSync("token", token);
        uni.setStorageSync("qxwxUserId", qxwxUserId);
        userInfosStroe.setqxwxUserId(qxwxUserId);
        userInfosStroe.setToken(token);
        userInfosStroe.setLogin(true);
        registerJSSDK();
      }
    }
  } catch (error) {
    console.log(error, "报错了");
  }
});

2.开始第二步
2.1发现第一步配置完之后、没办法验证是否可以使用、如果代码频繁发布到服务器进行验证费时费力、那么我们就通过hosts映射来实现吧！


配置完之后把第一张图的地址https修改为http:xxxx，并且config.uiUr也需要改成http的这时候就可以前端直接在企业微信进行调试看效果了 如果需要发布发布之后要把第一张图的改回https；简而言之就是为了本地调试、把涉及到的应用地址、oauh回调地址都改成http的地址映射到我们本地！使我们可以实时看到代码效果方便调试

3.步骤一这么配置会导致刷新或者说多了一次返回、以及如果需要提供其他界面通过其他入口进入会额外处理等；所以我把静默登录的地址直接配置在了企业微信应用管理的应用主页上；