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

2019-08-14 admin

在开发之前,最好先过一遍官方的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。 后面就随便玩了。

[转载]原文链接:https://segmentfault.com/a/1190000020070914

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72493.html

文章标题:企业微信端项目登陆、获取用户信息流程等

相关文章
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
Node.js将向移动端扩展
如果你还没有听过Node.js,那么现在就可以了解一下! 目前,来自200多个国家的数以万计的组织在使用Node.js,在Node.js的网站上,每月都有超过200万次下载。但版本发布缓慢使开发人员日益不满,网上出现了创建Node.js分支...
2015-11-12
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
微信公众号实现无限制推送模板消息!可向指定openID群发
微信认证的服务号才有推送模板消息接口 所以本文需要在认证服务号的情况下学习 以上就是模板消息,只有文字和跳转链接,没有封面图。 在服务号的后台添加功能插件-模板消息即可。 模板消息,都是在后台选择一个群发模板的,然后获取模板ID,根据这...
2018-01-14
回到顶部