在企业微信里面添加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);
    });
    }

相关推荐
xyq20246 分钟前
Memcached stats items 命令详解
开发语言
非科班Java出身GISer7 分钟前
ArcGIS Maps SDK for JavaScript 5.0 组件化开发指南
javascript·arcgis·components·arcgis js 组件化·arcgis js5.0·arcgis js5.0初始化
Evand J7 分钟前
【MATLAB例程】多传感器协同DOA目标跟踪与EKF滤波,输出动态目标轨迹、轨迹误差对比分析
开发语言·matlab·目标跟踪·滤波·定位·导航
csbysj20208 分钟前
《jEasyUI 自定义分页》
开发语言
初心未改HD10 分钟前
Go语言Context深度解析与工程实践
开发语言·golang
SilentSamsara14 分钟前
Python 内存管理:引用计数、循环垃圾回收与内存泄漏排查
开发语言·vscode·python·青少年编程·pycharm
傻啦嘿哟2 小时前
如何在 Python 中使用 colorama 库来给输出添加颜色
开发语言·python
geovindu3 小时前
go: Visitor Pattern
开发语言·设计模式·golang·访问者模式
宣宣猪的小花园.3 小时前
C语言重难点全解析:内存管理到位运算
c语言·开发语言·单片机