欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 文化 > h5接入企业微信登录以及本地开发调试

h5接入企业微信登录以及本地开发调试

2024/10/24 11:24:17 来源:https://blog.csdn.net/weixin_42912237/article/details/139504626  浏览:    关键词:h5接入企业微信登录以及本地开发调试

首先管理员登录企业微信,创建第三方应用

把appID(企业微信ID) , AgentId(应用id)和Secret(密钥)记下来给后端同事

在应用中配置可信域名,例如:

在这里插入图片描述
我配置好的如下:
在这里插入图片描述

配置登录授权域名

在这里插入图片描述

设置应用主页

在这里插入图片描述

通过hosts文件将www.luocl.cn转发到本地

在这里插入图片描述

通过nginx代理,将127.0.0.1转发到本地服务,我的如下:

在这里插入图片描述

打开企业微信,按住 Ctrl + Shift + Alt + D 进入调试模式,点击头像打开debugger

在这里插入图片描述

点击进入应用:

在这里插入图片描述

上面实现了企微本地联调,接下里是实现通过企微登录h5

通过前面的应用主页链接地址,前端可以获取Code,通过code,可以消费code,获取后端返回的token,以及其他参数,具体返回什么根据业务自定义。
参考文档:
https://developer.work.weixin.qq.com/document/path/91023

https://developer.work.weixin.qq.com/document/path/91039
前端代码示例:

 const { params } = getUrlParams(window.location.search)// 通过code登录this.toAuth(params.code)

getUrlParams为获取url参数公用方法:

getUrlParams = (url) => {let result = {url: '',params: {}};let list = url.split('?');result.url = list[0];let params = list[1];if (params) {let list = params.split('&');list.forEach(ele => {let dic = ele.split('=');let label = dic[0];let value = dic[1];result.params[label] = value;});}return result;
}

在前后端联调的时候,注意把后端IP加入到可信IP中:

在这里插入图片描述

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com