因为项目的原因,现在需要实现通过手机钉钉扫码登录内部系统,钉钉提供了这样的一种扫码登录的方式,下面我们一起来看一下实现过程。
这是钉钉开放平台对应技术文档的地址: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获取到扫码用户的信息,再通过该信息进行内部系统的鉴权,大概的流程就是这样了。