经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Html5调用企业微信的实现
来源:jb51  时间:2021/4/19 8:39:51  对本文有异议

前言

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

一、环境

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

二、使用步骤

1.js引用

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

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

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

代码如下:

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

其中 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 的方法放到了 后端获取 ,在丢给前台就可以了。

  1. //前端
  2. $.ajax("自己的url", {
  3. dataType: 'json', //服务器返回json格式数据
  4. type: 'post', //HTTP请求类型
  5. headers: {
  6. 'Content-Type': 'application/json'
  7. },
  8. //contentType: "application/json;charset=utf-8",
  9. success: function(data) {
  10. var sad = JSON.parse(data.d);
  11. var token = sad.access_token;
  12.  
  13. sunc(token);
  14. },
  15. error: function(xhr, type, errorThrown) {
  16. //异常处理;
  17. alert("进错误了");
  18.  
  19. }
  20. })
  21.  
  22. //后端
  23. public string test()
  24. {
  25. HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=自己的corpid&corpsecret=自己的corpsecret");
  26. request.Method = "GET";
  27. request.ContentType = "text/html;charset=UTF-8";
  28. //接受返回来的数据
  29. HttpWebResponse response = (HttpWebResponse)request.GetResponse();
  30. Stream stream = response.GetResponseStream();
  31. StreamReader streamReader = new StreamReader(stream, Encoding.GetEncoding("utf-8"));
  32. string retString = streamReader.ReadToEnd();
  33. streamReader.Close();
  34. stream.Close();
  35. response.Close();
  36.  
  37. return retString;
  38. }

就实现了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随机字符串长度)(方法是复制过来的)

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

5.生成timestamp时间戳

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

6.生成signature 签名

  1. var timestamp = Date.parse(new Date());
  2. // noncestr 随机 字符串
  3. var noncestr = randomString(16);
  4. var qiname = getSignature(resyltt, noncestr, timestamp);
  5.  
  6.  
  7. //获取签名
  8. function getSignature(ticket, noncestr, timestamp) {
  9. var url = window.location.href.split("#")[0];
  10. var jsapi_ticket = "jsapi_ticket=" + ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp +
  11. "&url=" + url;
  12.  
  13. return sha1(jsapi_ticket);
  14. }
  15. // 字符串加密成 hex 字符串
  16. function sha1(s) {
  17. var data = new Uint8Array(encodeUTF8(s))
  18. var i, j, t;
  19. var l = ((data.length + 8) >>> 6 << 4) + 16,
  20. s = new Uint8Array(l << 2);
  21. s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
  22. for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2);
  23. s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
  24. s[l - 1] = data.length << 3;
  25. var w = [],
  26. f = [
  27. function() {
  28. return m[1] & m[2] | ~m[1] & m[3];
  29. },
  30. function() {
  31. return m[1] ^ m[2] ^ m[3];
  32. },
  33. function() {
  34. return m[1] & m[2] | m[1] & m[3] | m[2] & m[3];
  35. },
  36. function() {
  37. return m[1] ^ m[2] ^ m[3];
  38. }
  39. ],
  40. rol = function(n, c) {
  41. return n << c | n >>> (32 - c);
  42. },
  43. k = [1518500249, 1859775393, -1894007588, -899497514],
  44. m = [1732584193, -271733879, null, null, -1009589776];
  45. m[2] = ~m[0], m[3] = ~m[1];
  46. for (i = 0; i < s.length; i += 16) {
  47. var o = m.slice(0);
  48. for (j = 0; j < 80; j++)
  49. w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
  50. t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
  51. m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
  52. for (j = 0; j < 5; j++) m[j] = m[j] + o[j] | 0;
  53. };
  54. t = new DataView(new Uint32Array(m).buffer);
  55. for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);
  56.  
  57. var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function(e) {
  58. return (e < 16 ? "0" : "") + e.toString(16);
  59. }).join("");
  60. return hex;
  61. }
  62.  
  63.  
  64. function encodeUTF8(s) {
  65. var i, r = [],
  66. c, x;
  67. for (i = 0; i < s.length; i++)
  68. if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
  69. else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
  70. else {
  71. if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
  72. c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
  73. r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
  74. else r.push(0xE0 + (c >> 12 & 0xF));
  75. r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
  76. };
  77. return r;
  78. }
  79.  

6.信息填入config

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

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

  1. //测试API 接口使用
  2.  
  3. function hreftestce() {
  4. alert("开始执行");
  5. wx.chooseImage({
  6. success: function(res) {
  7. images.localId = res.localIds;
  8. alert('已选择 ' + res.localIds.length + ' 张图片');
  9. }
  10. });
  11.  
  12. }

加粗样式

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号