vue项目登录接入企业微信的两种方式(网页授权登录，扫码授权登录)

这是企业微信api文档。身份验证有两种方式：①网页授权登录 ②扫码授权登录

一：扫码授权登录:

1.参数

image.png

<script src="https://rescdn.qqmail.com/node/ww/wwopenmng/js/sso/wwLogin-1.0.0.js" type="text/javascript"></script>

3.登录页面

1.html:创建容器
<div id="wx_qrcode"></div>

2.mounted:
window.WwLogin({
                id:企业页面显示二维码的DOM id,
                appid: 企业微信的CorpID，在企业微信管理端查看,
                agentid: 授权方的网页应用ID，在具体的网页应用中查看,
                redirect_uri: 重定向地址，需要进行UrlEncode(例如：encodeURIComponent(`${'https://xxxx/#/login'}`)),
            })

3.Watch:
$route: {
          handler(to) {
                         // query获取url中code
                         if (to.query.code) {
                            this.scancodeLogin(to.query.code)
                         }
                       },
           immediate: true,
           deep: true
         },
       }

4.methods:
async scancodeLogin(code) {
                              // scancodeLoginApi后端提供的接口
                              const { data } = await scancodeLoginApi({
                                  code,
                                  corpId: 'wwd67f1cfeddfa9159',
                                  agentId: '1000013',
                              })
                              if (data.ret === 1) {
                                  // 拿到登录数据做对应逻辑处理
                                  ......
                              } else {
                                    this.$message.error(data.msg)
                              }
                          },

二：网页授权登录（企业微信内置浏览器登录）:

1.参数

image.png

vue的hash模式(#)会导致识别错误（#login跑到最后面了）。因为参数说明里有#wechat_redirect:终端使用此参数判断是否需要带上身份信息，这个会将hash路径错误识别，导致出错。所以建议将hash模式改为history模式。详情参考我另一篇文章：vue项目改history模式。

2.后台配置好，redirect_uri用urlencode(网页搜)编码(见企业微信后台配置)。前端获取到code值后，走的逻辑跟扫码登录的逻辑类似了，不再赘述。