vue开发企业微信_vue全局api

vue开发企业微信_vue全局apiVue+Axios+Nginx实现调用企业微信API详细过程一、思路2.读入数据二、思路2.读入数据总结一、思路先捋清楚整体的步骤:1、首先需要从企业微信管理后台拿到企业ID和应用的Secret2.读入数据代码如下(示例):data=pd.read_csv(‘https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv’)print(data.head())该处使用的url网络请求的数据。二、思路代码如

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

先捋一下大概的步骤:

1、首先需要从企业微信管理后台拿到 企业ID 和 应用的Secret

2、通过 企业ID 和 应用的Secret 来生成 access_token

3、通过 access_token 来获取 ticket

4、用 ticket + 随机字符串 + 时间戳 + 当前网页url 拼接成一串字符,然后进行sha1加密。

下面是详细过程


先引入一下

// 先安装下微信的js-sdk
npm install weixin-js-sdk

// 然后在页面中引入
import wx from 'weixin-js-sdk'

一、生成签名

1.获取企业ID与Secret

企业微信后台登录地址:https://work.weixin.qq.com/wework_admin/frame#profile

企业ID在这里获取
在这里插入图片描述
Secret在这里获取
在这里插入图片描述

2.获取Access_token

请求URL:https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=ID&corpsecret=SECRET

注:此处标注大写的单词ID和SECRET,替换为上一步中的企业ID和Secret。

返回结果:

{ 
   
   "errcode":0,
   "errmsg":"",
   "access_token": "accesstoken000001",
   "expires_in": 7200
}

access_token的有效期正常情况下为7200秒(2小时),有效期内重复获取返回相同结果,过期后获取会返回新的access_token。

这里只要能发送上述请求并得到access_token即可。我这里是用的axios + nginx,直接在axios中请求上述地址会报跨域的错误,解决方法是在axios发送请求后在nginx中转到上述地址。

3.获取ticket

请求URL:https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=ACCESS_TOKEN

注:此处ACCESS_TOKEN,替换为上一步中的ACCESS_TOKEN。

返回结果:

{ 
   
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
}

这里同上只要能发送上述请求并得到ticket即可。

二、生成签名以及回调

所需的参数都拿到了,接下来就是验证签名和回调:

const that = this

// 生成时间戳
var timestamp = getTimestamp()

// 生成的随机字符串
var nonceStr = randomString(16)

// 有效期2小时,用localStorage做本地缓存
localStorage.setItem('timestamp', timestamp)

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

简单说下wx.config方法。必填参数一共5个,

appId就是第一步中获取的企业ID;

timestamp是生成签名时的时间戳,下面写了通用的方法把当前时间转时间戳;

nonceStr是随机字符串,下面也有通用方法;

signature就是签名了;
个人猜测验证签名这一步 就是根据参数手动拼接字符串,然后手动对这个串加密,把加密后的串与参数一起提交。企业微信后台拿到这个加密的串与参数后,会去根据参数再自动生成一次加密的串,两个串一对比,就是验证成功与失败了。

jsApiList是需要调用的接口列表,完整的在这里:https://work.weixin.qq.com/api/doc/90001/90144/90540

上面调用的方法getTimestamp()和randomString()和getSignature()方法在这里:

import sha1 from 'js-sha1'

/** * 获取当前时间 时间戳 * @returns {number} */
export function getTimestamp() { 
   
  return Date.parse(new Date());
}

/** * 获取随机字符串 * @param len 可指定长度 * @returns {string} */
export function randomString(len) { 
   
  len = len || 32
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  var maxPos = $chars.length
  var pwd = ''
  for (var i = 0; i < len; i++) { 
   
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return pwd
}

/** * 拼接签名字符串 * @param ticket 通过access_token获取的jsapi_ticket * @param noncestr 自己生成的随机字符串 * @param timestamp 生成签名时的时间戳 * @returns {*} */
export function getSignature(ticket, noncestr, timestamp) { 
   
  let url = window.location.href.split("#")[0]
  let jsapi_ticket = `jsapi_ticket=${ 
     ticket}&noncestr=${ 
     noncestr}&timestamp=${ 
     timestamp}&url=${ 
     url}`
  return sha1(jsapi_ticket);
}

上面getSignature()方法中用到的sha1加密用的是js-sha1:

npm install js-sha1

最后就是config验证通过后会回调ready方法,下面是拿调用摄像头举例:

/** * config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后, * config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。 * 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 */
that.$wx.ready(function () { 
   
  that.$wx.scanQRCode({ 
   
    desc: "scanQRCode desc",
    needResult: 1, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码(一维码),默认二者都有
    success: function (res) { 
   
      // 业务代码
    },
    error: function (res) { 
   
      // 业务代码
    },
  });
});

以上就是今天要讲的内容,欢迎评论区留言补充。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/186670.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号