vue钉钉授权第三方网页登录，扫码登录，vue hash模式下回调地址错误踩坑

---

前言

vue接入钉钉登录及遇到的问题

---

一、引入钉钉扫码登录JSSDK

在index.html中引入

<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>

二、使用步骤

1.通过打开授权页面的方式

钉钉的配置使用后端配置好的，通过接口返回，参数主要是重定向的url地址（需要encode），和client_id。
代码如下：

// 跳转链接钉钉操作
    ddHrefLogin() {
      const { agentId, url } = this.ddConfig;
      const cloneUrl = encodeURIComponent(url);
      const hrefUrl = `https://login.dingtalk.com/oauth2/auth?redirect_uri=${cloneUrl}&response_type=code&client_id=${agentId}&scope=openid&state=dddd&prompt=consent`;
      window.open(hrefUrl, '_self');
    },

扫码完成之后，页面会重定向到配置的地址上，附带authCode就是需要这个参数
在created生命周期中使用自己项目的登录接口

// 获取到钉钉返回的code就请求登录接口
    if (this.$route.query.authCode) {
      this.handleCodeLogin(this.$route.query.authCode);
    }

2.通过扫描二维码的方式登录

代码如下：

ddLoginInit() {
      const _this = this;
      window.DTFrameLogin(
        {
          id: "qr-code-scan", // 装钉钉二维码的盒子
          width: 300,
          height: 300,
        },
        {
          redirect_uri: encodeURIComponent(_this.ddConfig.url),
          client_id: _this.ddConfig.agentId,
          scope: "openid",
          response_type: "code",
          prompt: "consent",
          state: "ddd",
        },
        (loginResult) => {
          const { redirectUrl, authCode, state } = loginResult;
          console.log("loginResult", loginResult);
          console.log("_this.ddConfig", _this.ddConfig);
          // 这里可以直接进行重定向
          window.location.href = redirectUrl;
          // 也可以在不跳转页面的情况下，使用code进行授权
          console.log(authCode);
        },
        (errorMsg) => {
          // 这里一般需要展示登录失败的具体原因
          alert(`Login Error: ${errorMsg}`);
          console.log("_this.ddConfig", _this.ddConfig);
        }
      );
    },

取到authCode之后做自己的操作

三、踩坑

vue的hash模式，钉钉重定向回来的地址有误，路径错误无法获取到$route.query.authCode

期望得到的回调地址:

https://xxxx/#/login?authCode=faf0517xxxxxxxxxxxxxxx96373&state=dddd

实际在hash模式下得到的回调地址:

https://xxxx/?authCode=faf0517xxxxxxxxxxxxxxx96373&state=dddd#/login

四、解决方法

重新组装回调之后的路径

created() {
    //code是登录所需最终参数
    let url = new URL(window.document.URL); // 获取路径
    const code = this.$utils.string.getUrlKeyVal("authCode"); // 通过路径获取authCode
    if (url.search && code) { // 钉钉重定向地址错误 重新组装路径
      window.open(`${url.origin}${url.hash}&authCode=${code}`, '_self')
    }
    // 获取到钉钉返回的code就请求登录接口
    if (this.$route.query.authCode) {
      this.handleCodeLogin(this.$route.query.authCode);
    }
  },

获取路径中对应key的值方法

const getUrlKeyVal = (key) => {
  var value = "";
  ///获取当前页面的URL
  var sURL = window.document.URL;
  ///URL中是否包含查询字符串
  if (sURL.indexOf("?") > 0) {
    //分解URL,第二的元素为完整的查询字符串
    //即arrayParams[1]的值为【id=1&action=2】
    var arrayParams = sURL.split("?");
    //分解查询字符串
    //arrayURLParams[0]的值为【id=1 】
    //arrayURLParams[2]的值为【action=add】
    var arrayURLParams = arrayParams[1].split("&");
    //遍历分解后的键值对
    for (var i = 0; i < arrayURLParams.length; i++) {
      //分解一个键值对
      var sParam = arrayURLParams[i].split("=");
      if (sParam[0] == key && sParam[1] != "") {
        //找到匹配的的键,且值不为空

        value = sParam[1];

        break;
      }
    }
  }
  return value;
},

总结

以上就是vue钉钉登录的内容，主要就是vue hash模式下的坑，导致回调地址错误。