vue 钉钉授权第三方WEB网站扫码登录功能

1. 钉钉扫码登录开发文档

首先阅读 钉钉官方的开发文档 ，扫码登录其实用的是官方文档描述的第二种方式，即将钉钉登录二维码内嵌到自己页面中，用户使用钉钉扫码登录第三方网站，网站可以拿到钉钉的用户信息。

钉钉扫码登录比微信扫码登录坑少很多。可以看下我的微信扫码登录实现 vue 微信扫码登录嵌入方式及开发踩的坑点

2. 注册钉钉账号（已经注册了直接跳过）

需要一个 注册钉钉的账号 ，用来获取APPID

3 获取APPID和appSecret

3.1 登录钉钉开发者后台

1. 点击登录后台：开发者后台
2. 注意： 只有管理员和子管理员可登录开发者后台。否则你会看下如果提示 没有权限需要去联系你的上级给你开通

3.2 创建应用

①：在开发者后台页面应用开发，选择企业内部开发，然后单击创建应用。

②：在弹出的创建应用页面中填写基本信息，然后单击确定创建。

1. 应用类型：选择H5微应用。
2. 开发方式：选择企业自助开发。
3. 还需要你要登录的第三方网站的网址，以及一张网站logo图片的地址。
   

③：应用创建完成后，在基础信息页面，复制应用的AppKey和AppSecret备用。先放着。appSecret后面拿取钉钉的用户信息会用到

4. vue实现扫码登录

4.1 html 代码

创建一个div，设置id为 login_container

<template>
  <div id="app">
    <div id="login_container"></div>
  </div>
</template>

4.2 js代码

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      appid: "dingoajfp9uov6uonxxxxxx",//自己申请的appid
      appsecret:"V6m2FeU_Ex0HMKmCfA5hV2edZCO_MMsWfWP8ZoCdH4-cTTqkoOIElwhxxxxxxxx",//自己申请的appsecret
      redirectUrl: "http://192.168.1.76:8080/#/login",//这里是扫码成功后跳转的回调地址
      dingCodeConfig: {
        id: "login_container",//匹配到设置的html的id
        style: "border:none;background-color:#FFFFFF;",
        width: "400",
        height: "400",
      },//生成二维码样式的配置
    };
  },
  computed: {
    getRedirectUrl() {
      return encodeURIComponent(this.redirectUrl);
    },
    getAuthUrl() {
      return `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.getRedirectUrl}`;
    },
    getGoto() {
      return encodeURIComponent(this.getAuthUrl);
    },
    getDingCodeConfig() {
      return { ...this.dingCodeConfig, goto: this.getGoto };
    },
  },
  created() {
  	// 初始化钉钉的二维码加载
    this.initDingJs();
  },
  mounted() {
    this.addDingListener();
    this.initDingLogin();
  },
  methods: {
    initDingJs() {
      !(function (window, document) {
        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" : "400px"),
            (c.height = a.height ? a.height + "px" : "400px"),
            (e = document.getElementById(a.id)),
            (e.innerHTML = ""),
            e.appendChild(c);
        }
        window.DDLogin = d;
      })(window, document);
    },
    addDingListener() {
      let self = this;
      let handleLoginTmpCode = (loginTmpCode) => {
        window.location.href =
          self.getAuthUrl + `&loginTmpCode=${loginTmpCode}`;
      };
      let handleMessage = (event) => {
        if (event.origin == "https://login.dingtalk.com") {
          handleLoginTmpCode(event.data);
        }
      };

      if (typeof window.addEventListener != "undefined") {
        window.addEventListener("message", handleMessage, false);
      } else if (typeof window.attachEvent != "undefined") {
        window.attachEvent("onmessage", handleMessage);
      }
    },
    initDingLogin() {
      window.DDLogin(this.getDingCodeConfig);
    },
  },
  async mounted() {
    if (this.$route.query.code) {
      let code = this.$route.query.code
      console.log("扫码登录成功后请求后返回的code：" + code) //
      if (code !== null) {
      	// 执行下一步操作
      }
    }
  }
};
</script>
 

4.3 操作扫码效果

1. 电脑端url的变化：可以看到扫码之前是 http://192.168.1.76:8080/#/login 的地址（默认访问登录页面的地址）
2. 回调地址设置的地址：http://192.168.1.76:8080/#/login。
3. 通过扫码成功后，返回的回调地址
   http://192.168.1.76:8080/#/login?code=d06e0c4255c93213ab425aac556e563a&state=STATE（返回了code和state参数键值回来）

手机钉钉扫码确认截图

5. 获取钉钉的用户信息

5.1 通过后端提供的接口获取信息

一般情况走到这一步了，可以直接把回调返回的 code 给后端，后端去写接口返回钉钉的用户信息。比下(我们后端提供的)：

根据钉钉回调返回的code，调用后端的接口拿取钉钉的用户信息。

async mounted() {
  if (this.$route.query.code) {
    let code = this.$route.query.code
    console.log('扫码登录成功后请求后返回的code：' + code)
    let res = await base.thirdPartyLoginCheck({
      code,
      linkType: 1
    })
    console.log(res)
  }
}

5.2 通过前端调用钉钉的API查询信息

这种情况就是前端去调用api，然后获取钉钉用户信息，调用的api比较繁琐，建议还是让后端提供接口，当前这种也是可以的。下面是具体的步骤

1.get请求的方式，请求这个地址。

get 请求方式
https://oapi.dingtalk.com/sns/gettoken?appid=APPID&appsecret=APPSECRET

2.请求成功时应该返回如下，access_token 的值放好，我们会拿它接着获取永久授权码。还记得我们扫码成功后，跳转登录到第三方网站的url吗，它后面追加了临时授权码code，这个code和access_token 一起就可以获得永久的授权码了。

{
    "errcode": 0,
    "access_token": "7155d0dca6fa3a489462e4407699c339",
    "errmsg": "ok"
}

3.获取永久授权码。以post请求，请求这个地址

post 请求方式
https://oapi.dingtalk.com/sns/get_persistent_code?access_token=ACCESS_TOKEN
参数如下：
{
“tmp_auth_code”: “9282c00fed0a3e2a88fea069a9fe5be4”
}

请求成功返回如下，拿到tmp_auth_code 的值，就是追加到url上的code参数的值。请求成功返回如下

{
    "errcode": 0,
    "errmsg": "ok",
    "unionid": "0wiiEFPtAF09FWcBg2iiygPwiEiE",
    "openid": "EmuvN1jpiPwiipLtiSHBUmvcwiEiE" ,
    "persistent_code": "oMOoqK0PEfTXvJSMlZIp8yU-IagK8-kJIVY5od8-8Y2ijlX367M9uRNUvisDAPtX"
}

请求成功返回如下，拿到openid和persistent_code的值，接下来要用来去获取用户授权的SNS_TOKEN

4.获取用户授权的SNS_TOKEN。以post请求，请求这个地址，这个 ACCESS_TOKEN 第一步的时候已经取到过了

post 请求方式
https://oapi.dingtalk.com/sns/get_sns_token?access_token=ACCESS_TOKEN
参数如下：
{
“openid”: “EmuvN1jpiPwiipLtiSHBUmvcwiEiE”,
“persistent_code”: “oMOoqK0PEfTXvJSMlZIp8yU-IagK8-kJIVY5od8-8Y2ijlX367M9uRNUvisDAPtX”
}

请求成功返回如下，拿到 sns_token

{
    "errcode": 0,
    "errmsg": "ok",
    "sns_token": "ea1e12af6ac23a2080178bb9a452b312",
    "expires_in": 7200
}

5.最后一步了，用获取到的 sns_token 去拿用户信息，鸡冻~

get 方式请求
https://oapi.dingtalk.com/sns/getuserinfo?sns_token=SNS_TOKEN

请求成功返回如下，拿到用户信息

{
	"errcode": 0,
    "errmsg": "ok",
    "user_info":{
		"nike":"张三",
		"unionid":".......................",
		"dingId":".......................",
		"openid":".......................",
		"......":"....."
	}
}