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中:

相关推荐
子兮曰3 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭4 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路6 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒7 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端
Kagol8 小时前
TinyVue 支持 Skills 啦!现在你可以让 AI 使用 TinyVue 组件搭建项目
前端·agent·ai编程
柳杉8 小时前
从零打造 AI 全球趋势监测大屏
前端·javascript·aigc
simple_lau8 小时前
Cursor配置MasterGo MCP:一键读取设计稿生成高还原度前端代码
前端·javascript·vue.js
睡不着先生8 小时前
如何设计一个真正可扩展的表单生成器?
前端·javascript·vue.js
天蓝色的鱼鱼8 小时前
模块化与组件化:90%的前端开发者都没搞懂的本质区别
前端·架构·代码规范
明君879978 小时前
Flutter 如何给图片添加多行文字水印
前端·flutter