大致流程
- 在页面构建二维码
- 扫二维码之后,企业微信那边会跳转到redirect_uri你重定向的地址,后面会拼接code参数,一般重定向地址都是本页面
- 在本页面获取url后面拼接的code,用code去请求自己后端写好的鉴权接口
- 接口用access_token和code去获取用户的企业微信号
- 接口请求成功会返回token,页面再将token存入,后续实现和登录后的操作一致
实现步骤
- public/index.html 引入js文件
动态引入:
<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script>
本地静态引入:
先把js文件放在public/utils 文件夹下,然后再本地引入,注意这里要使用<%= BASE_URL %>,否则静态引入会访问不到文件
<script type="text/javascript" src="<%= BASE_URL %>utils/wwLogin-1.0.0.js"></script> -->
- 建一个登陆页面 /pages/login/login.vue,信息填写完整,二维码就出来了
- vue中用watch监听路由变化取code,传到接口做处理
但是,我这里为了解决二维码登录成功后页面会在登录页再停留一下才跳进系统首页的问题,将生成二维码js的所有处理逻辑写在了登录页面。以下是相关代码:
html部分:
<img src="~&#