企业微信集成应用程序、服务最详细教程

最新推荐文章于 2024-08-14 23:12:09 发布

那些乐趣

最新推荐文章于 2024-08-14 23:12:09 发布

阅读量3.3k

点赞数 2

分类专栏：企业微信文章标签： java vue.js

本文链接：https://blog.csdn.net/k0307x1990y/article/details/112983428

版权

企业微信专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文档详细介绍了如何注册并创建企业微信应用，包括登录企业微信官网、创建应用、设置自定义菜单，以及在手机客户端上查看应用。同时，教程还涵盖了企业微信用户权限验证的实现步骤，包括构造网页授权链接、前端和后端的代码实现，以及用户信息的校验。此外，还讨论了重定向URL中敏感信息的处理方法和可信域名的设置。

摘要由CSDN通过智能技术生成

一：申请企业微信

1：百度搜索企业微信官网，进入官网：https://mp.weixin.qq.com/

2：点击左下角企业微信，创建企业微信，如图：

3：填写好注册信息之后，点击注册完成企业微信号注册。（此处注意：需要用自己的微信扫注册页上的二维码，把自己的微信和企业微信绑定）

二、在企业微信中创建应用

1：点击应用管理菜单进入应用管理页面，如图：

2：点击创建应用，进入创建应该页面：

3：填写完信息后，点击创建应用，此处注意，可以点击选择部门/成员，绑定用户到该应用中。

4：创建完后会跳转到刚创建的应用页面：

5：点击自定义菜单，把该应用与我们需要集成的程序绑定到一起，如图所示：

6:点击保存，绑定关系就好了，还需要下一步进行发布，登录企业微信就可以看见了。

三、手机下载企业微信客户端

1：安装完毕后，绑定自己的微信进行登录，登录进去，点击下面的工作台菜单，滑到最下面，可以看到你创建好的应用：

2：点击创建好的应用（我这里创建了一个测试应用：test），进入页面:

3:点击下面你创建的菜单，就可以跳转到你绑定的程宇地址了（我这里绑定的百度）：

到此简单企业微信注册、应用创建，登录就已经成功了。

上面登录到绑定的地址并没有进行权限验证，因此所有的用户都可以访问，但是实际上，我们只让加入到企业微信中的用户才可以访问。因此就需要做企业微信用户权限身份验证。API可以参看微信官方文档：https://work.weixin.qq.com/api/doc/90000/90135/91022；具体验证步骤如下：

1：构造网页授权链接,返回给前端：

后端代码：

/**
构造网页授权链接
redirectUrl:跳转的地址，即应用的访问地址（该地址必须是发布过的真实可用域名）
QY_WEIXIN_OAUTH_URL：构造的授权链接
WEIXIN_CORPID：企业id（在企业微信管理页面的企业信息中可以找到）
**/
public static String getauthorizationCode() throws IOException {
        String QY_WEIXIN_OAUTH_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&agentid=AGENTID&state=STATE#wechat_redirect";
        String redirectUrl= "http://xxx.xxx.com/xxxAPP/index.html";
		CloseableHttpClient httpclient = HttpClients.createDefault();
		redirectUrl = URLEncoder.encode(redirectUrl,"UTF-8");//url地址需要进行处理
		String requestUrl = QY_WEIXIN_OAUTH_URL.replace("CORPID", WEIXIN_CORPID)
				.replace("REDIRECT_URI", redirectUrl);
		return requestUrl;
	}

2:前端拿到构造的授权地址，进行跳转，跳转的重定向地址还是你的应用访问页面，只是这时跳转访问应用页面，地址后面会加上一个code参数，拿到这个code用来进行用户身份校验。

/**
根据code进行身份验证
WEIXIN_CORPID：企业id
WEIXIN_SECRET：你创建的应用的secert（在应用管理页面可以找到该信息）
**/
public static String validUser(String code) throws IOException {
		CloseableHttpClient httpclient = HttpClients.createDefault();
		String token = getToken(WEIXIN_CORPID, WEIXIN_SECRET);//调用微信接口获取token
		HttpPost httpPost = new HttpPost("https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?access_token="+token+"&code="+code);
		CloseableHttpResponse response = httpclient.execute(httpPost);
		String resp;
		try {
			HttpEntity entity = response.getEntity();
			resp = EntityUtils.toString(entity, "utf-8");
			EntityUtils.consume(entity);
		} finally {
			response.close();
		}

		Gson gson = new Gson();
		Map<String, Object> map = gson.fromJson(resp,
				new TypeToken<Map<String, Object>>() {
				}.getType());
		Object userId = map.get("UserId");
		if(null == userId){
			return "false";//校验失败
		}else{
			return "true";
		}
	}




/**
	 * 获取token
	 * @param corpId
	 * @param corpSecret
	 * @return
	 * @throws IOException
     *获取的该token会在两个小时后失效，因此后端需要通过逻辑处理，2小时以内不重复获取token，避免重复的请求会让微信服务器认为是恶意请求
	 */
	public static String getToken(String corpId, String corpSecret) throws IOException {
		String token = weiXinUtilsDao.getTokenInfo();//数据库存储了获取的token，时效小于2小时
		if(token == null || "".equals(token)) {
			 String Get_Token_Url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=" + corpId + "&corpsecret=" + corpSecret;
		        CloseableHttpClient httpClient = HttpClients.createDefault();
				HttpGet httpGet = new HttpGet(Get_Token_Url);
		        CloseableHttpResponse response = httpClient.execute(httpGet);
		        String resp;
		        try {
		            HttpEntity entity = response.getEntity();
		            resp = EntityUtils.toString(entity, "utf-8");
		            EntityUtils.consume(entity);
		        } finally {
		            response.close();
		        }
		        Gson gson = new Gson();
		        Map<String, Object> map = gson.fromJson(resp,
		                new TypeToken<Map<String, Object>>() {
		                }.getType());
		        token = map.get("access_token").toString();
		        System.out.println(map);
		        int activeTime = new Double(Double.parseDouble(map.get("expires_in").toString())).intValue() - 600;
		        weiXinUtilsDao.insertToken(token, activeTime);
		}
		return token;
       
    }

前端代码：

index.html:验证页面

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
  <title>镇江二供平台</title>
  <script type="text/javascript" src="./static/js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    .BMap_cpyCtrl {
      display: none;
    }

    .anchorBL {
      display: none;
    }
  </style>
</head>

<body>
  <script>
    window.manageAjaxbaseurl = 'http://xx.xx.xx.xx:8087/Manage'  //校验接口所在的服务器

    //如果是内网 可以访问，内网不需要进行身份验证
    if (returnCitySN["cip"] == "192.168.xx.xx") {
      window.open('./index2.html')
    } else {
      //判断是不是从企业微信登录,重定向后，微信会做处理，使得重定向后的页面地址带上了code参数
      let url = window.location.href.split("?")
      if (url[1] && url[1].indexOf('code') != -1) {
        let code = url[1].split("=")[1].split("&")[0]
        $.ajax({
          url: window.manageAjaxbaseurl + '/weiXin/validUser',
          data: { "code": code },
          type: 'get',
          success: function (res) {
            if (res != "true") {//验证失败
              var opened = window.open('about:blank', '_self');
              opened.opener = null;
              opened.close();
            } else {//验证成功，访问系统
              window.location.href = './index2.html'
            }
          },
          error: function () {
            alert('授权失败')
          }
        })
      } else {
        $.ajax({
          url: window.manageAjaxbaseurl + '/weiXin/getRedirectUrl',
          type: 'get',
          success: function (res) {
            window.location.href = res;
          },
          error: function () {
            alert('重定向失败')
          }
        })
      }
    }
  </script>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

index2.html：首页访问页面

<!DOCTYPE html><html>
<head><meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<title>镇江二供平台</title>
<script type=text/javascript src=./static/js/jquery-1.9.1.min.js></script>
<script type=text/javascript src=./static/js/jQuery.base64.js></script>
<script type=text/javascript src=https://res.wx.qq.com/open/js/jweixin-1.2.0.js></script>
<script type=text/javascript src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=TnTtZt52jtuwnf8aNHl3H1Eh"></script>
<script type=text/javascript src=https://developer.baidu.com/map/jsdemo/demo/convertor.js></script>
<style>
* {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
    }

    .BMap_cpyCtrl {
      display: none;
    }

    .anchorBL {
      display: none;
    }</style>
	<link href=./static/css/app.29a7a587d378a5e10464d334ced1a1d2.css rel=stylesheet>
	</head>
	<body>
	<script>
	window.manageAjaxbaseurl = 'http://xx.xx.xx.xx:8087/Manage'
    let corpid = 'ww0e1e7433c2343438c' //企业id

    $.ajax({
        url: window.manageAjaxbaseurl + '/weiXin/getJssdkInfo',
        type: 'get',
        success: function (res) {
          console.log('获取微信配置', res)
          let data = JSON.parse(res)

          wx.config({
            beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: corpid, // 必填，企业微信的corpID
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.noncestr, // 必填，生成签名的随机串
            signature: data.sign,// 必填，签名，见 附录-JS-SDK使用权限签名算法
            jsApiList: [
              'getLocalImgData', 'onLocationChange', 'getLocation', 'invoke'
            ] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
          });
        }
      })
      wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        //监听不到这个事件
        // wx.onHistoryBack(function(){
        //     console.log('aaaaaaaaaaa')
        //     return false
        // });
      });
	  </script>
	  <div id=app></div>
	  <script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script>
	  <script type=text/javascript src=./static/js/vendor.da277c0a084374932911.js></script>
	  <script type=text/javascript src=./static/js/app.ea3687e46d5a2fe7f4f9.js></script>
	  </body>
	  </html>

至此大工告成

注意问题：

一、用户校验

如果我们在上面绑定的应用菜单的访问地址是通过域名访问的，并且需要通过企业微信重定向校验用户信息，就需要把访问地址中的域名添加为可信域名，具体操作步骤如下：

1：登录企业微信

2：点击应用管理菜单

3：在下发自建应用一栏找到访问的应用，点击该应用进入应用页面

4：在下面找到网页授权及JS-SDK，如图所示：

5：点击设置可信域名，进入域名设置页面，如图所示：

6：在可信域名一栏填写应用访问域名，然后点击下方的确定按钮即可，如图：

二、调用JS-SDK、跳转小程序

1：如果我们需要调用微信的JS-SDK接口或者跳转小程序就需要在上面设置重定向的可信域名的页面中继续添加红框处的可信域名，如图所示：

2：可信域名填完后，点击上图中的申请校验域名，会出现如图所示的页面：

3：点击下载文件，下载txt文本，把txt文本放到提示的根目录下，放完之后，需要自己去把图中红框的地址：http://www.baidu.com/WW_verify_BDaZKXJHcJ3o634b.txt，拿到浏览器中访问一下，能访问到信息就可以了，如图红框所示信息（这是txt文本中的内容）：

4：这里注意上面txt文本的位置，要保证能访问到，不然微信无法校验。放好文件，并且确保可以访问到后，勾选下图中红框处，然后点击确定按钮，配置就完成了：

三、在用户信息校验时，微信重定向的时候会暴露重定向地址

重定向地址里面包含一些敏感信息，如果不想给外部看见，就需要做处理，可以通过前端判断是不是通过微信浏览器访问的，微信浏览器是内置在微信中的，因此可以与其他浏览器区别出来，

具体的验证方法是，在访问项目域名后，首先需要通过js代码判断是否是微信内置浏览器访问的，不是微信浏览器访问，可以直接打开一个空白页面，或者做一些其他处理，下面是直接返回一

个空白页面，代码如下所示：

//判断是否微信登陆
    function isWeiXin() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        	return true;
        } else {
        	return false;
        }
    }
    if(!isWeiXin()){
        var html="<article class=\"weui_msg\"><div class=\"img\"><img src=\"/SkyMis/app/freecharge/phone/images/weui-msg.png\" alt=\"\"></div><div class=\"text\">请在微信客户端打开连接</div></article>";
        $("#shade").html(html);
    }

那些乐趣

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
企业微信集成应用程序、服务最详细教程

一：申请企业微信1：百度搜索企业微信官网，进入官网：https://mp.weixin.qq.com/2：点击左下角企业微信，创建企业微信，如图：3：填写好注册信息之后，点击注册完成企业微信号注册。（此处注意：需要用自己的微信扫注册页上的二维码，把自己的微信和企业微信绑定）二、在企业微信中创建应用1：点击应用管理菜单进入应用管理页面，如图：2：点击创建应用，进入创建应该页面：3：填写完信息后，点击创建应用，此处注意，可以点击选择部门/成员，绑定用户到.
复制链接

扫一扫

专栏目录