前言

vue接入釘釘?shù)卿浖坝龅降膯栴}

一、引入釘釘掃碼登錄JSSDK

在index.html中引入

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

二、使用步驟

1.通過打開授權(quán)頁面的方式

釘釘?shù)呐渲檬褂煤蠖伺渲煤玫模ㄟ^接口返回，參數(shù)主要是重定向的url地址（需要encode），和client_id。
代碼如下：

// 跳轉(zhuǎn)鏈接釘釘操作
    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就是需要這個參數(shù)
在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;
          // 也可以在不跳轉(zhuǎn)頁面的情況下，使用code進行授權(quán)
          console.log(authCode);
        },
        (errorMsg) => {
          // 這里一般需要展示登錄失敗的具體原因
          alert(`Login Error: ${errorMsg}`);
          console.log("_this.ddConfig", _this.ddConfig);
        }
      );
    },

取到authCode之后做自己的操作

三、踩坑

vue的hash模式，釘釘重定向回來的地址有誤，路徑錯誤無法獲取到$route.query.authCode

期望得到的回調(diào)地址:

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

實際在hash模式下得到的回調(diào)地址:

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

四、解決方法

重新組裝回調(diào)之后的路徑

created() {
    //code是登錄所需最終參數(shù)
    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);
    }
  },

獲取路徑中對應(yīng)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;
},

總結(jié)

以上就是vue釘釘?shù)卿浀膬?nèi)容，主要就是vue hash模式下的坑，導(dǎo)致回調(diào)地址錯誤。文章來源地址http://www.zghlxwxcb.cn/news/detail-643074.html

到了這里，關(guān)于vue釘釘授權(quán)第三方網(wǎng)頁登錄，掃碼登錄，vue hash模式下回調(diào)地址錯誤踩坑的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！