欢迎访问艾立兹站 Aliz- 专注建站教程与技术分享
您当前的位置:首页 > 建站教程 > WordPress 建站

Html5调用企业微信的实现

时间:2023-12-30 08:34:44  来源:[db:出处]  作者:[db:作者]  阅读:

前言

基于H5的页面调通 企业微信的API (已调通demo)

一、环境

企业微信管理员 添加应用 ,地址指向H5程序的地址。(企业微信通过内部游览器访问你自己发布出来的web端的手机项目,不做本文重点)

二、使用步骤

1.js引用

https://work.weixin.qq.com/api/doc/90000/90136/92455

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.config接口注入权限验证配置

代码如下:

wx.config({
    beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,企业微信的corpID
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});

其中 appId 在企业微信上获取,timestamp 时间戳,nonceStr 一个16位的随机字符串,signature 这个签名是最复杂的 (下面有讲到配置方法)。

signature 这个 签名 需要的如下(官网文档)

参与签名的参数有四个: noncestr(随机字符串), jsapi_ticket(如何获取参考“获取企业jsapi_ticket”以及“获取应用的jsapi_ticket接口”), timestamp(时间戳), url(当前网页的URL, 不包含#及其后面部分)

将这些参数使用URL键值对的格式 (即 key1=value1&key2=value2…)拼接成字符串string1。
有两个注意点:1. 字段值采用原始值,不要进行URL转义;2. 必须严格按照如下格式拼接,不可变动字段顺序。

jsapi_ticket=JSAPITICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=URL
然后对string1作sha1加密即可。
示例 :

假如有如下参数:

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value
步骤1. 将这些参数拼接成字符串string1:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value
步骤2. 对string1进行sha1签名,得到signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

下面我来一一实现这些参数

3.生成access_token

请求方式: GET(HTTPS) 请求地址: https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET (其中 corpid 跟 corpsecret 都是通过企业微信获取)

提示:这个get 请求 我一开始写在前端js中,用Hbuilder(开发软件)开发测试时,能正常返回信息,但是到游览器才意识到有 跨域问题。后来将获取access_token 的方法放到了 后端获取 ,在丢给前台就可以了。

			//前端
			$.ajax("自己的url", {
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				headers: {
					'Content-Type': 'application/json'
				},
				
				//contentType: "application/json;charset=utf-8",
				success: function(data) {
					
					var sad = JSON.parse(data.d);
					 
					var token = sad.access_token;

					sunc(token);
				},
				error: function(xhr, type, errorThrown) {
					//异常处理;
					alert("进错误了");
					

				}
			})

		//后端 
		 public string test()
        {
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=自己的corpid&corpsecret=自己的corpsecret");
            request.Method = "GET";
            request.ContentType = "text/html;charset=UTF-8";
            //接受返回来的数据
            HttpWebResponse response = (HttpWebResponse)request.GetResponse();
            Stream stream = response.GetResponseStream();
            StreamReader streamReader = new StreamReader(stream, Encoding.GetEncoding("utf-8"));
            string retString = streamReader.ReadToEnd();
            streamReader.Close();
            stream.Close();
            response.Close();

            return retString;
        }

就实现了GET 请求获取 access_token

4.生成jsapi_ticket

本文配套模板、静态源码可前往艾立兹素材库alisucai.com下载

发表评论 共有0条评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
公众号二维码

扫码关注公众号
获取全套技术教程