企业微信自建应用H5 jssdk本地调试
2024-01-03 本文已影响0人
Roct
一、在企业微信后台自建应用
-
创建应用
image.png
1.1 一般根据不同的环境创建多个应用，比如xxDev, xxTest, xx，将Dev与Test的可见范围变成开发与测试人员
-
配置可信域名
image.png
image.png
2.1 可信域名auth2.0为回调地址，即走微信登录以后得回调地址
2.2 可调用JSSDK的可信域名：即前端项目的域名
二、实现auth2.0登录
- 判断是否是微信环境
const isWx = () => {
const ua = window.navigator.userAgent.toLowerCase()
return ua.match(/micromessenger/i) && ua.match(/micromessenger/i) === 'micromessenger'
}
- 进行auth2.0登录
export const wxLogin = () => {
let rUri = window.location.href
rUri = encodeURIComponent(rUri)
// 页面出错以后, 重定向到错误页面
let errorUri = window.location.origin + window.location.pathname + '#/' + 'error'
errorUri = encodeURIComponent(errorUri)
const baseURL = wxConfig.baseUrl
const appId = wxConfig.appId
let url =
baseURL +
'?redirectUri=' +
rUri +
'&errorUri=' +
errorUri +
'&corpId=' +
appId +
'&agentId=' +
wxConfig.agentId
console.log('url', url)
url = encodeURIComponent(url)
location.href =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
appId +
'&redirect_uri=' +
url +
'&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
}
使用auth2.0登录，流程为前端直接访问https://open.weixin.qq.com/connect/oauth2/authorize，根据配置访问成功以后，微信转发到后端回调地址，后端根据实际需求获取用户信息参数，比如用户的openId，userId挂在redirect_uri上，redirect_uri为前端地址，前端在beforeEach里做监听如果query上携带约定好的参数即视为登录成功, error页面为微信登录失败以后转到的接口，由前端实现
三、配置whistle
- 安装调试工具whistle
npm install -g whistle
- whistle常用命令
// 开始
w2 start
// 停止
w2 stop
// 重启
w2 restart
- 启动whistle
- 在chrome浏览器中输入
http://127.0.0.1:8899/
即可打开页面
image.png
- 下载证书
点击右上角的HTTPS
image.png
mac选中cer证书，两个选项全部勾选，最后点击DownLoad证书，下载成功以后双击安装到钥匙串，这个时候钥匙串里的证书是非信任的，右键信任即可 - 重启whistle
-
配置rules，双击启动rules
点击左边侧边栏里的rules，添加自己的jssdk访问域名进入生效的rules
image.png
在chrome浏览器里直接访问域名，network里看到访问的域名点击一下右侧的详情如果显示final的地址为本机，即配置成功
image.png
如果url和final url 不显示https，显示tunnel那么标识你的证书是有问题的 -
配置微信开发者工具
image.png
image.png
开发者工具会弹窗提醒是否信任代理，点击信任即可
那么经过以上步骤就可以通过whistle将配置的域名转发到本机的vue、react的服务上，就可以config的时候不报错了
友情链接：
