前言

基于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

请求方式:GET(HTTPS)
请求URL:https://qyapi.weixin.qq.com/cgi-bin/ticket/get?access_token=ACCESS_TOKEN

与获取access_token 相同 要放在后台获取 参数就是
access_token

5.生成noncestr 随机字符串 (len随机字符串长度)(方法是复制过来的)

//随机字符串
		function randomString(len) {
			len = len || 32;
			var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
			var maxPos = $chars.length;
			var pwd = '';
			for (i = 0; i < len; i  ) {
				pwd  = $chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return pwd;
		}

5.生成timestamp时间戳

var timestamp = Date.parse(new Date());

6.生成signature 签名

					var timestamp = Date.parse(new Date());
					// noncestr 随机 字符串
					var noncestr = randomString(16);
					var qiname = getSignature(resyltt, noncestr, timestamp);


//获取签名
			function getSignature(ticket, noncestr, timestamp) {
				var url = window.location.href.split("#")[0];
				var jsapi_ticket = "jsapi_ticket="   ticket   "&noncestr="   noncestr   "&timestamp="   timestamp  
					"&url="   url;
			

				return sha1(jsapi_ticket);
			}
			// 字符串加密成 hex 字符串
			function sha1(s) {
				var data = new Uint8Array(encodeUTF8(s))
				var i, j, t;
				var l = ((data.length   8) >>> 6 << 4)   16,
					s = new Uint8Array(l << 2);
				s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
				for (t = new DataView(s.buffer), i = 0; i < l; i  ) s[i] = t.getUint32(i << 2);
				s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
				s[l - 1] = data.length << 3;
				var w = [],
					f = [
						function() {
							return m[1] & m[2] | ~m[1] & m[3];
						},
						function() {
							return m[1] ^ m[2] ^ m[3];
						},
						function() {
							return m[1] & m[2] | m[1] & m[3] | m[2] & m[3];
						},
						function() {
							return m[1] ^ m[2] ^ m[3];
						}
					],
					rol = function(n, c) {
						return n << c | n >>> (32 - c);
					},
					k = [1518500249, 1859775393, -1894007588, -899497514],
					m = [1732584193, -271733879, null, null, -1009589776];
				m[2] = ~m[0], m[3] = ~m[1];
				for (i = 0; i < s.length; i  = 16) {
					var o = m.slice(0);
					for (j = 0; j < 80; j  )
						w[j] = j < 16 ? s[i   j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
						t = rol(m[0], 5)   f[j / 20 | 0]()   m[4]   w[j]   k[j / 20 | 0] | 0,
						m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
					for (j = 0; j < 5; j  ) m[j] = m[j]   o[j] | 0;
				};
				t = new DataView(new Uint32Array(m).buffer);
				for (var i = 0; i < 5; i  ) m[i] = t.getUint32(i << 2);

				var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function(e) {
					return (e < 16 ? "0" : "")   e.toString(16);
				}).join("");
				return hex;
			}


			function encodeUTF8(s) {
				var i, r = [],
					c, x;
				for (i = 0; i < s.length; i  )
					if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
					else if (c < 0x800) r.push(0xC0   (c >> 6 & 0x1F), 0x80   (c & 0x3F));
				else {
					if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
						c = (x << 10)   (s.charCodeAt(  i) ^ 0xDC00)   0x10000,
						r.push(0xF0   (c >> 18 & 0x7), 0x80   (c >> 12 & 0x3F));
					else r.push(0xE0   (c >> 12 & 0xF));
					r.push(0x80   (c >> 6 & 0x3F), 0x80   (c & 0x3F));
				};
				return r;
			}

6.信息填入config

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

到这里config 就配置完成(下面就是写的一个简单的 弹出手机的相册跟拍照功能)(已测试正常调用OK)。

//测试API 接口使用

	function hreftestce() {
			alert("开始执行");
			wx.chooseImage({
				success: function(res) {
					images.localId = res.localIds;
					alert('已选择 '   res.localIds.length   ' 张图片');
				}
			});

		}

加粗样式

到此这篇关于Html5调用企业微信的实现的文章就介绍到这了,更多相关Html5调用企业微信内容请搜索Devmax以前的文章或继续浏览下面的相关文章,希望大家以后多多支持Devmax!

Html5调用企业微信的实现的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. 浅析HTML5中的download属性使用

    这篇文章主要介绍了浅析HTML5中的download属性使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. HTML5 Blob 实现文件下载功能的示例代码

    这篇文章主要介绍了HTML5 Blob 实现文件下载功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. web字体加载方案优化小结

    这篇文章主要介绍了web字体加载方案优化小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  6. ios – 加载空白页面的SFSafariViewController

    我正在使用SFSafariViewController在我的iOS应用程序中打开一个URL..它在iOS9上完美运行但在将我的设备更新到iOS10后,它只是在地址栏中加载了一个没有URL的空白页面.甚至safariViewController(控制器:SFSafariViewController,didCompleteInitialLoaddidLoadSuccessfully:Bool)在控制器

  7. ios – 应用更新,NSURL和文档目录

    我应该存储相对图像网址或字符串来表示这些资源的位置,还是应该可以存储最终成为绝对网址的内容?

  8. 视频流 – 使用视频工具箱解码iOS 8中的h264

    需要解码h264流并获取像素缓冲区我知道iOS8上的视频工具箱可能1.如何将h264流转换为CMSampleBufferRef?

  9. ios – 从Facebook这样的任何URL获取特定图像

    我的问题看起来可能与其他问题类似,但事实并非如此.(据我所知).我无法理解如何从任何URL获取特定图像像Facebook一样,我无法向您显示屏幕截图,因为我没有真正的设备.但我可以告诉你Skype的屏幕截图来自MAC.任何帮助将不胜感激.thanks.编辑:我使用这个link获得了favicon,但它非常小我想要更大的尺寸.解决方法最后,我得到了答案.这可能对你有帮助,这就是为什么我发布这个答案.

  10. ios – 资产目录与文件夹参考:何时使用其中一个?

    我可以将文件放入Assets.xcassets,或者我可以将文件放入文件夹引用.我何时会选择一个而不是另一个?

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部