企业微信端项目登陆、获取用户信息流程等


在开发之前,最好先过一遍官方的API,不然很难往下进行。企业微信API

先介绍几个基本的概念:

每个企业都拥有一个唯一的cropid,要获取次信息可在管理后台“我的企业”-“企业信息”下查看“企业ID”(这个需要管理员权限的)

每个成员都有一个唯一的userid,其实就是账号,在管理后台-“通讯录”-点某个成员的详情页就可以看到了

每个部门的唯一id,在管理后台-“通讯录”-“组织结构”-点击某个部门右边的小圆点可以看到

每个标签都有一个唯一的id,在管理后台-“通讯录”-“标签”,选中某个标签,在右上角有个“标签详情”按钮,就可以看到了。

每个应用都有一个唯一的id,在管理后台-“应用与小程序”-“应用”,点击某个应用,就可以看到了。

appid就是开发者id,是开发的识别码,配合开发者密码,可调用公众号的接口能力。

secret是企业应用里面用于保障数据安全的“钥匙”,每一个应用都有一个独立的访问秘钥,为了保证数据的安全,secret务必不能泄露。

access_token是企业后台去企业微信的后台获取信息时的重要票据,由cropid和secret产生,所有的接口在通信时候都需携带此信息用于验证接口的访问权限。(access_token 请求地址: https://qyapi.weixin.qq.com/c...返回结果前端会拿到access_token ,结果如下: { "errcode": 0, "errmsg": "ok", "access_token": "accesstoken000001", "expires_in": 7200 }


首先,获取access_token是调用企业微信API接口的第一步,相当于创建一个登陆凭证,其他业务API接口,多需要依赖access_token来鉴权调用者身份。因此,开发者在使用业务接口前,要明确access_token的颁发来源,使用正确的access_token。


步入正题吧

网页授权登陆:企业微信提供了OAuth的授权登陆方式,可以让从企业微信终端打开网页获取成员的身份信息,从而避免登陆环节。企业应用中的URL链接(包括自定义菜单或者消息中心中的链接),均可通过OAuth2.0验证接口来获取成员的UserId身份信息。

在进入我们开发的项目之前, 我们需要先访问第三方服务构造的OAuth2链接(参数包括当前第三方服务的身份ID,以及重定向URL),将用户引导到认证服务器的授权页面。这里建议企业应用中的URL链接直接填写自己企业的页面地址。成员操作跳转到企业页面时,企业后台校验是否有标识识别成员身份的信息,根据获取的信息在进入相应的页面。 下面贴一下获取用户信息的方法: 第一步需要构造如下链接来获取code参数,我这边贴一下我实际开发中构造的url:

function getToken(str) {
  const appId = Env.appId
  const redirectUrl = encodeURIComponent(`${Env.url}?str=${str||0}`)
  const agentId = Env.agentId
  window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_base&agentid=${agentId}&state=STATE#wechat_redirect`
}

说明一下各个参数代表什么意思。 appid:企业的cropid redirect_uri:授权后重定向的回调链接地址,要使用urlencode对连接进行处理 response_type:返回类型,此时固定为:code scope:应用授权作用域,企业自建应用固定填写:snsapi_base state:重定向后会带上state参数,企业可填写a-zA-Z0-9的参数值,长度不可超过128个字节 wechat_redirect:终端使用此参数判断是否需要带上身份信息

当员工点击后,页面将跳转至redirect_uri?code=CODE&state=STATE,这时候企业可根据拿到的code获得员工的userid。

下面是进入之前的登陆判断:

enterWxAuthor () {
        //获取用户token
        var _this = this;
        var wxUserInfo = sessionStorage.getItem("userToken");
        var code = GetQueryString("code");
        if (!wxUserInfo) {
          if (code) {
            _this.getTokenKey();
          } else {
            //没有微信用户信息,没有授权-->> 需要授权,跳转授权页面
            getToken()
          }
        } else {
        //初始化页面
          _this.init();
        }
      },

getTokenKey方法:

getTokenKey: function () {
        //获取用户信息,token 权限
        var _this = this;
        //通过code获得用户token
        var url = 'api/....';
        //这里的code就是我们上面构造的OAuth链接的code参数
        var code = GetQueryString("code");
        ajax(url, {
          WXTicket: code
        }, '').then(function (res) {
          //   去除url中code,目的是为了避免重复code
          if (window.history.replaceState) {
            window.history.replaceState('', '', window.location.href.replace(
              /&code=.*?(?=[[&#\/])|code=.*?(?=[[&#\/])&?/, ''));
          } else {
            if (/code=/.test(window.location.href)) {
              window.location.href = window.location.href.replace(/&code=.*?(?=[[&#\/])|code=.*?(?=[[&#\/])&?/,
                '');
            }
          }
          _Set('tokenStr', res.data)
          if (res.data.Data) {
            sessionStorage.setItem('userToken', res.data.Data.Token)
          }
          _this.init()
        })
      },

GetQueryString方法:

function GetQueryString(name) {
  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
  let r = window.location.search.substr(1).match(reg)
  if (r !== null) return unescape(r[2])
  return null;
}

这里要注意一下处理微信端的一些问题。有的用户喜欢把微信的默认字体设置的很大,这就会引起页面布局错乱,下面是把重写设置网页字体大小的方法:

// 禁止微信浏览器缩放
    (function () {
      if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
      } else {
        if (document.addEventListener) {
          document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", handleFontSize);
          document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
        }
      }
      function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function () {
          WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize': 0});
        });
      }
    })();

大致的流程就是这样。总结一下就是:进入系统之前要先走一下微信的OAuth链接,拿到code,再凭借code获取用户的token。 后面就随便玩了。

原文链接:segmentfault.com

上一篇:Better than yesterday-前端【display:none与visibility:hidden;】
下一篇:vue写一个全局Message组件

相关推荐

官方社区

扫码加入 JavaScript 社区