2022-10-10-linux指令

企业微信/政务微信二维码扫码登录 【前端接入】

1. 生成企业微信/政务微信二维码

1. 企业微信扫码登录：https://work.weixin.qq.com/api/doc/90000/90135/91019
2. 政务微信扫码登录：http://wwlocal-dev.pdcts.com.cn/api/doc#10719

注意：由于企业微信、政务微信实例化二维码的方法名相同，会导致实例化方法被覆盖，无法同时区分是哪个二维码；如果系统需要同时接入企业微信及政务微信，则需要重写实例化二维码方法；具体代码及传入参数如下：

生成二维码 核心代码

// 实例化二维码
(function (window, document, undefined) {
  var temp = '/wwopen/sso/qrConnect';

  function ZwWwLogin(data) {
    var host = data.host;
    var frame = document.createElement('iframe');
    var url =
      host +
      temp +
      '?appid=' +
      data.appid +
      '&agentid=' +
      data.agentid +
      '&redirect_uri=' +
      data.redirect_uri;
    url += data.style ? '&style=' + data.style : '';
    url += data.href ? '&href=' + data.href : '';

    frame.src = url;
    frame.frameBorder = '0';
    frame.allowTransparency = 'true';
    frame.scrolling = 'no';
    frame.width = '300px';
    frame.height = '400px';
    var el = document.getElementById(data.id);
    el.innerHTML = '';
    el.appendChild(frame);

    frame.onload = function () {
      if (frame.contentWindow.postMessage && window.addEventListener) {
        window.addEventListener('message', function (event) {
          var hostArr = host.split(':');
          if (hostArr[1] == 80) host = hostArr[0];
          if (event.data && event.origin.indexOf(host) > -1) {
            event.data.code;
            window.location.href = event.data;
          }
        });
        frame.contentWindow.postMessage('ask_usePostMessage', '*');
      }
    };
  }

  window.ZwWwLogin = ZwWwLogin;
})(window, document);

实例化二维码，传参

new ZwWwLogin({
"id": "wx_reg",
"redirect_uri": encodeURIComponent(redirect_uri),
// 直接设置 样式文件编码内容
"href": 'data:text/css;base64,...'
"host": item.Host
"appid": item.AppId,
"agentid": item.AgentId
});

2. 自定义二维码样式

1. 方式一：链接方式引入css文件

{
"id": "wx_reg",
// 设置编码 链接
"href": encodeURIComponent(location.origin + '/static/css/WeChat.css'),
...
}

• 内容如下

.impowerBox .qrcode {
  width: 160px;
}
.wrp_code_rl_bg {
  width: 160px;
  left: 68px;
}
.wrp_code_iframe {
  margin-top: 32px;
}
.wrp_code_rl_label {
  color: rgba(255, 255, 255, 0.9);
}
.impowerBox .title {
  /* display: none; */
  font-size: 20px;
  color: #27282e;
}
.wrp_code_rl_mask {
  opacity: 0.9;
  background: #27282e;
}
.impowerBox .info {
  display: none;
}
.status_icon {
  display: none !important;
}
.impowerBox .status {
  text-align: center;
  margin-top: 0px;
}
.impowerBox .status .status_txt {
  text-align: center;
}
.impowerBox .status .status_txt h4 {
  color: #4490d6;
}
.impowerBox .status.status_browser {
  text-align: center;
  padding: 25px 0px;
}
#wx_default_tip {
  background: url(../img/zwwx1.jpg) no-repeat;
  background-size: auto 28px;
  background-position-x: center;
  background-position-y: -2px;
}
#wx_default_tip > p {
  display: none;
}
.wrp_code_rl_info {
  color: rgba(255, 255, 255, 0.9);
}

1. 方式二：base64编码

{
"id": "wx_reg",
// 设置编码
"href": 'data:text/css;base64,....',
...
}

3. 扫码登录交互

以政务微信为例（企业微信类似）

1. 用户扫码成功后，将重定向到实例化二维码时传入的redirect_ur地址（这里redirect_ur传入的是当前登录页url），代码中监听路由变化，获取回调的返回的code与后端接口交互。

watch:{
 $route(to) {
  if (to.query.code) {
   this.requestWechatLogin(to.query.code);
   }
  }
},

4. 扫码成功/失败 交互

调用后端接口，成功则写入登录态，失败则前端根据业务给出相应提示。

参考文档

企业微信-构造扫码登录链接
企业微信-管理后台

政务微信-开发文档
政务微信-管理后台