钉钉第三方扫码登录

Hello大家周末好，今天有时间给大家讲下钉钉第三方扫码登录的实现。

1：第一步也是最基础的一步咱们先把二维码展现出来对吧

      let goto =
      "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoazo7mhh2ms71zwtm6&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
     www.baidu.com;
    var obj = DDLogin({
      id: "login_container",
      goto: encodeURIComponent(goto),     //这里是咱们扫码以后点击确定扫码登录的一个回调地址钉钉那边会调转到这个地址并且待上用户的唯一标识code码
      style: "border:none;background-color:#FFFFFF;",
      width: "300",
      height: "315"
    });:

2：第一步咱们怎么判断这个扫码的操作是不是来自钉钉api来扫码的呢？？那万一是微信或者手机自带的扫码功能呀，这里官方提供了一下方法来看当前的扫码操作是不是来自钉钉

   var hanndleMessage = function(event) {
      var origin = event.origin;
      // console.log("origin", event.origin);
      if (origin == "https://login.dingtalk.com") {
        //判断是否来自ddLogin扫码事件。
        var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
        // console.log("loginTmpCode", loginTmpCode);
        if (loginTmpCode) {
          let url =
            "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoazo7mhh2ms71zwtm6&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
            that.url +
            "&loginTmpCode=" +
            loginTmpCode;
          window.location.href = url;  //这里的loginTmpCode就是用户的标识了，跳转到当前地址那么根据项目场景的话也就是在跳转到扫码页面这时候的url上面回带上用户唯一标识
        }
      }
    };
    if (typeof window.addEventListener != "undefined") {
      window.addEventListener("message", hanndleMessage, false);
    } else if (typeof window.attachEvent != "undefined") {
      window.attachEvent("onmessage", hanndleMessage);
    }

3：用户点击确定登录以后怎么来进入网站（我觉得还是上代码比较清楚）

       ddLogin() {
  const that = this;
  var ddCode = getUrlParms("state");   //查看当前Url中有没有state的这个参数，如果有这个参数证明扫码登录成功重定向地址已经调转完成
  if (ddCode) {
    let code = window.location.href;
    code = code.split("?")[1];
    code = code.split("=")[1];
    code = code.split("&")[0];
    let state = window.location.href;
    state = state.split("&")[1];
    state = state.split("#")[0];
    state = state.split("=")[0];
    this.axios
      .get("/xxxxx/?code=" + code + "&state=" + state)           //到了这里就是需要做你们自己的验证了看这个人是否权限登录系统（这里看和后台是怎么约定了）
      .then(res => {
        if (res.data.code == 0) {
          localStorage.setItem("staff_token", res.headers.staff_token);
          localStorage.admin_login = JSON.stringify(res.data.staff_info);
          this.$router.push({
            path: "/dashboard"
          });
        } else if (res.data.code == 3) {
          this.isinvite = true;
          this.isinviteArr = res.data;
        }
      });
  } else {   //默认二维码的显示
    let goto =
      "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoazo7mhh2ms71zwtm6&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
      that.url;
    var obj = DDLogin({
      id: "login_container",
      goto: encodeURIComponent(goto),  //重定向地址
      style: "border:none;background-color:#FFFFFF;",
      width: "300",
      height: "315"
    });
    var hanndleMessage = function(event) {
      var origin = event.origin;
      // console.log("origin", event.origin);
      if (origin == "https://login.dingtalk.com") {
        //判断是否来自ddLogin扫码事件。
        var loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
        // console.log("loginTmpCode", loginTmpCode);
        if (loginTmpCode) {
          let url =
            "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingoazo7mhh2ms71zwtm6&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" +
            that.url +
            "&loginTmpCode=" +
            loginTmpCode;
          // alert(url);
          window.location.href = url;  //拿到用户唯一标示然后在进行当前页面的调转，注意这里跳转以后还是会在当前页面只不过Url上带了参数了这时候咱们去看上面的条件
        }
      }
    };
    if (typeof window.addEventListener != "undefined") {
      window.addEventListener("message", hanndleMessage, false);
    } else if (typeof window.attachEvent != "undefined") {
      window.attachEvent("onmessage", hanndleMessage);
    }
  }
},

只用三步就可以实现钉钉第三方扫码登录，其他我个人感觉所有的第三方扫码登录都是一个套路可能是哪些规范在里面吧像咱们大家都知道的微信第三方登录，也是和钉钉几乎一样也是有一个重定向地址然后跳转获取用户唯一标识code码然后来进行自己系统的验证。好了这篇文章就到这里 谢谢大家