实现钉钉开放平台扫码登录内部应用

因为项目的原因，现在需要实现通过手机钉钉扫码登录内部系统，钉钉提供了这样的一种扫码登录的方式，下面我们一起来看一下实现过程。

这是钉钉开放平台对应技术文档的地址：https://open-doc.dingtalk.com/microapp/serverapi2/kymkv6

实现功能之前要有一个开发者平台账号，怎么开通这里我就不一一阐述了，很简单，自己去申请一个即可。

1、创建扫码登录应用授权

首先进入到【钉钉开放平台-应用开发-移动接入应用-登录-创建扫码登录应用授权】，创建扫码登录应用授权，

完成之后我们就可以拿到appId和appSecret了

2、构造扫码登录页面

钉钉开放平台提供了两种构建方法，第一种是跳转到钉钉提供的页面进行扫码登录，第二种是将二维码嵌入自己的系统中实现扫码登录，这里我是使用的第二种方法。

因为扫码这个功能的实现主要是在前端，我是使用vue进行的开发，所以这里我先搭建一个小的vue的demo，结构很简单，就只有两个页面

然后将Login.vue作为默认路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from "@/components/Login"
import Home from "@/components/Home"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      component: Login
    },
    {
      path: "/login",
      name: "login",
      component: Login
    },
    {
      path: "/home",
      name: "home",
      component: Home
    }
  ], mode: "history"
})

基础工作做完之后，进行钉钉的相关开发，首先在index.html引入钉钉的js

<script src="//g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

然后在mounted()中加入如下代码

/*
* 解释一下goto参数，参考以下例子：
* var url = encodeURIComponent('http://localhost.me/index.php?test=1&aa=2');
* var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+url)
*/
var obj = DDLogin({
     id:"login_container",//这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
     goto: "", //请参考注释里的方式
     style: "border:none;background-color:#FFFFFF;",
     width : "365",
     height: "400"
 });

这段代码的意思就是在你id定义的DOM中生成二维码，扫码成功之后会给你当前页面(/login)返回一个临时授权码，通过如下代码接收临时授权码，然后构造需要跳转的地址(/home)带上临时授权码。

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后就可以在这里构造跳转链接进行跳转了
        window.location.href =
          "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=你的&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://localhost:8080/home&loginTmpCode=" +
          loginTmpCode;
      }
    };

Login.vue

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

<script>
export default {
  name: "login",
  mounted() {
    let _this = this;
    let url = encodeURIComponent("http://localhost:8080/home");
    let goto = encodeURIComponent("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=你的appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=" + url);
    var obj = DDLogin({
      id: "login_container",
      goto: goto,
      style: "border:none;background-color:#FFFFFF;",
      width: "365",
      height: "400"
    });
    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后就可以在这里构造跳转链接进行跳转了
        window.location.href =
          "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=你的appid&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=跳转url&loginTmpCode=" +
          loginTmpCode;
      }
    };
    if (typeof window.addEventListener != "undefined") {
      window.addEventListener("message", hanndleMessage, false);
    } else if (typeof window.attachEvent != "undefined") {
      window.attachEvent("onmessage", hanndleMessage);
    }
  }
};
</script>

<style scoped>
</style>

然后在/home中获取url中的临时授权码，通过临时授权码和appId以及AppSecret获取到扫码用户的信息，再通过该信息进行内部系统的鉴权，大概的流程就是这样了。