点击侧边栏入口的url -> 访问到web端的一个地址。
web解析该地址,然后访问企业微信的认证地址。通过重定向地址再返回到web地址,与入口地址相同。
然后在web端认证。
该项目有两部分内容: 1、获取用户信息,2、wx.config
权限注入。这两部分内容不依赖。
需要一个可以正常访问的域名:例如:http://t9mvyd.39nat.com
配置nginx,将项目的各个项目通过上述域可以正常访问。
在企业管理管理页面创建第三方应用,然后创建侧边框。配置:http://t9mvyd.39nat.com?corpId=APPID
这里我的做法是将 corpId
直接配置进去。在web的入口 index.ts
中解析。
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URIresponse_type=code&scope=SCOPE&state=STATE#wechat_redirect`;
根据 redirect_uri
回来的地址,我们就可以拿到code了。
code
和 corpId
对于一个应用的生命周期内,code
和 corpId
是不变的。所以我们可以放到内在和 sessionStorage
中。
获取用户信息。
需要服务端提供一个接口。根据 code
和 corpId
来获取用户信息。
获取签名
对于一个应用,1天只允许获取100次的签名,所以在服务端和web端都需要缓存。
而且从企业微信获取到的签名是会对整个应用的。
从服务端拿到企业签名和应用签名。
将这个签名信息缓存起来。
认证
调用企业微信的每一个 jsApi 都需要认证。而且不同的url页面,都要进行认证。
所以在进入每个页面时,我们单独调用 wx.config
和 wx.agentConfig
.
setAuthContext
设置必须的属性。
参数 | 说明 | 是否必填 | 默认值 |
---|---|---|---|
weComBaseUrl | 企业微信的认证地址 | 否 | https://open.weixin.qq.com/connect/oauth2/authorize |
redirectUrl | 回调地址(一般是系统的入口) | 否 | window.location.href |
authScope | 企业微信参数 | 否 | snsapi_userinfo |
nonceStr | 企业微信参数 | 否 | @_weCom_js_sdk_app |
timestamp | 企业微信参数 | 否 | Date.now() |
jsApiList | 企业微信参数 | 否 | ['invoke'] |
例如:
import { setAuthContext } from 'wxcom-js-jdk';
setAuthContext({
jsApiList(['chooseImage']);
})
registerFetchDataFunction
注册获取tickets
和userInfo
的方法。
通过这个方法,将系统后台实现的获取tickets 和 用户信息的方法注册进去。
需要定义两个方法:
getTicket = (corpId) => {//系统自己实现}
getUserInfo = (corpId, code) => {//系统自己实现}
,其中 code
就是由企业微信返回
然后将这两个方法注册给js-sdk:
import { registerFetchDataFunction } from 'wxcom-js-sdk';
registerFetchDataFunction({
fetchTicket: getTicket,
fetchUser: getUserInfo
});
weComStart
方法import { weComStart } from 'wecom-js-sdk';
weComStart();
另外还可以在页面入口中单独调用
getWeComCode
,getReferTickets
,getReferUser
方法
doAuth
方法, 不同的页面,都需要调用.在运行过程中可开启 wx.config
中的 debug.
import { openDebug } from 'wxcom-js-sdk';
// 在入口的地方调用
openDebug((result) => {
// true 为开启, false 关闭。提示使用
if(result) {
Toast.info('debug 模式开启')
}
});
你可以在一直打开debug。因为启用的时候,需要双击页面8次,否则debug还是无法开启。
1、yarn add wecom-js-sdk
;
2、在项目入口的地方,比如index.js
中:
import { setAuthContext, registerFetchDataFunction, weComStart, openDebug } from 'wecom-js-sdk';
import { getTicket, getUserInfo } from './service'; // 从本地引入自已定义的方法,一般由后端提供数据
setAuthContext({});
registerFetchDataFunction({
fetchTicket: getTicket,
fetchUser: getUserInfo
});
weComStart();
openDebug(); // 建议常开。系统稳定后,就可以不用了。
3、在需要调用 wx.xxxx 的页面进行认证
import { doAuth } from 'wecom-js-sdk';
const jsApiList = ['chooseImage']; // 在这里定义当前页面所需要的jsApiList
doAuth(jsApiList);
至此,一个普通的认证就完成了。
如果项目其他的地方需要签名和用户信息时,有两种办法:
const [tickets, userInfo] = await weComStart()
;
或者
weComStart().then(props => {// tickets = props[0], userInfo = props[1]})
可以直接调用内方法
import { getReferTickets, getReferUser } from 'wecom-js-sdk';
最后,别忘记在你的html页面中引入 https://res.wx.qq.com/open/js/jweixin-1.2.0.js !!!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型