对接钉钉扫码登录（终端，光前端）

1. 首先钉钉官方js引入（也可以在线网址引入）用于生成二维码

    function d(a) {
        var e, c = document.createElement("iframe"),
            d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto ;
        d += a.style ? "&style=" + encodeURIComponent(a.style) : "",
            d += a.href ? "&href=" + a.href : "",
            c.src = d,
            c.frameBorder = "0",
            c.allowTransparency = "true",
            c.scrolling = "no",
            c.width =  a.width ? a.width + 'px' : "365px",
            c.height = a.height ? a.height + 'px' : "400px",
            e = document.getElementById(a.id),
            e.innerHTML = "",
            e.appendChild(c)
    }
    window.DDLogin = d
}(window, document);

2.使用参数格式

ding:{
        appid: "", 
        agentid: "", 
        corpid: "", 
        uri: "", 
        redirect_uri: "", 
        code: "", 
        accesstoken: ""
        }

3. 函数调用（生成二维码）

codeLogin() {
       //appid （钉钉申请时有的）和 redirect_uri （扫码后去往的页面路径）由后端提供
      this.ding.appid = "xxxxxxxxx";
      this.ding.redirect_uri = "xxxxxxxxxxx";
      //拼接扫码所获取的页面路径
      this.ding.uri =
        "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" +
        this.ding.appid +
        "&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
        this.ding.redirect_uri;
      // 调用钉钉js文件生成二维码
      DDLogin({
        // 通过id与页面标签绑定
        id: "login_container",
        goto: encodeURIComponent(this.ding.uri),
        style: "border:none;background-color:rgba(150, 150, 150, 0);",
        width: "220",
        height: "280"
      }); 
      // 响应扫码获取数据
      if (typeof window.addEventListener != "undefined") {
        window.addEventListener("message", this.hanndleMessage, false);
      } else if (typeof window.attachEvent != "undefined") {
        window.attachEvent("onmessage", this.hanndleMessage);
      }
    },

4. 扫码后调用的函数

hanndleMessage(event){
      let _self = this;
      let origin = event.origin;
        if (origin == "https://login.dingtalk.com") {
          // 获取钉钉给的loginTmpCode 
          let loginTmpCode = event.data;
          if (loginTmpCode) {
            // 重新拼接 url 跳转（重定向）自己页面
            let url =
              "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=" +
              _self.ding.appid +
              "&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
              _self.ding.redirect_uri +
              "&loginTmpCode=" +
              loginTmpCode;
            // 由于终端不需要跳转页面 仅需要获取页面数据，使用XMLHttpRequest获取页面数据
            let xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
              if (xhr.readyState === 4&& xhr.status == 200) {
                // 获取数据 发送后端提供二维码登录接口即可
                let data = JSON.parse(xhr.responseText)
              }
            };
          }
        }
    },