在企业微信里面添加h5页面 进行登录授权

1.需求:在企业微信里面添加h5页面 进行登录授权,获取到用户的code,进行登入id的验证

2.步骤:

  • 在企业微信内部进行配置,拿到appid,redirect_uri,agentid参数步骤参考这篇文章

  • 由于企业微信进入页面之前会进行授权,然后再进行跳转咱们系统的首页(也是就redirect_uri中的地址),那么就会有两种解决方案:

    ① 有一个页面用于授权,然后在跳转首页

    ② 直接将授权的操作写在首页中,在首页进行授权,然后再跳转首页(我用的是这种方式)

    首页进行授权的代码如下:

    复制代码
     //判断是否授权
    const CORPID = '    '; //appid参数
    const REDIRECT_URI = encodeURI(' ');  //redirect_uri参数
    const AGENTID =  '  '; //agentid 参数
    const searchParams = new URLSearchParams(window.location.search);
    
    const code = (route.query.code as string) || (searchParams.get('code') as string);
    const state = (route.query.state as string) || (searchParams.get('state') as string);
    const token = computed(() => userStore.getToken);
    
    //路由上没有code的情况下,进行企业微信授权
    if (!code) {
      const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${CORPID}&redirect_uri=${REDIRECT_URI}/index.html&response_type=code&scope=snsapi_base&state=1&agentid=${AGENTID}#wechat_redirect`;
      window.location.href = authUrl;
    }

    //存在code且不存在token的情况下走登录的接口
    if (code && (token.value == null || token.value == 'null')) {
    userStore.resetUserStore();
    login({
    code: code,
    state: state,
    }).then((res) => {
    userStore.setToken(res.token);
    });
    }

相关推荐
垆边人似月.几秒前
预处理与参数调优(让识别率从“能看”到“可用”)
开发语言·python·自然语言处理
小大宇1 分钟前
vue知识点9-标签上的ref
前端·javascript·vue.js
2601_9495758611 分钟前
JSON5 跨端三方库仓颉适配全流程
前端·javascript·flutter
泡泡糖的中文规格书15 分钟前
HDLbits 2.2 学习笔记 · 多路复用器
java·开发语言
John_Hui17 分钟前
第 3 篇:配置 JDK 17 环境
java·开发语言·ubuntu
充值内卷31 分钟前
C++单文件迷宫游戏:TauriCPP 开发全记录
开发语言·c++·游戏
Antruly32 分钟前
C++ Web 开发选型漫谈:从 Drogon 到 libuvcpp + uvp,八个项目的定位、兼容性与务实排名
开发语言·前端·c++
EnCi Zheng36 分钟前
AI Agent工具调用防护层怎么写-一份能直接跑的Python四层拦截实现
大数据·开发语言·python
香蕉大香蕉(06敬畏市场)1 小时前
高频八股 · Java 并发编程(10):异步、ThreadLocal 与虚拟线程(收官)
java·开发语言·网络·jvm·python·ai·实习
念何架构之路1 小时前
Go reflect包值操作 Value 的读写、可设置性与 interface 布局
开发语言·后端·golang