(1)### 登录钉钉开放平台,进入应用开发页面,此页面需要管理员开放权限才能进入
(2)### 点击【创建应用】,圈出的三部分填写完之后点击【确定创建】
(3)### 切换到新版,钉钉登录与分享中填写回调域名(回调域名就是扫码成功要跳转的页面),点击【添加】
(4)### 切换旧版登录模块内,点击【创建扫码登录应用授权】
具体信息如下:
整体开发流程
官网教程:https://developers.dingtalk.com/document/app/enterprise-internal-application-logon-free?spm=ding_open_doc.document.0.0.28f72f17JgEdc7#topic-2021731
1、获取免登授权码
<template>
<div class="dd-scan-login">
<div id="dd-login"></div>
</div>
</template>
<script>
/** 钉钉扫码登录 */
const appid = "dingoarzxwx984vesoq0m";
const url = encodeURIComponent("http://localhost:9000/#/home");
const goto = encodeURIComponent(
`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`
);
// code = 14c29b40012931b2b26d786cf3ed3541
export default {
data() {
return {
articleContent: "", //文章内容
};
},
created() {
window.addEventListener("message", this.DDMessage, false);
},
mounted() {
this.ddInit();
},
methods: {
/** 初始化钉钉登录 */
ddInit() {
window.DDLogin({
id: "dd-login",
goto, //请参考注释里的方式
style: "border:none;background-color:#FFFFFF;",
width: "365",
height: "400",
});
},
DDMessage(event) {
const origin = event.origin;
if (origin === "https://login.dingtalk.com") {
//判断是否来自ddLogin扫码事件。
const loginTmpCode = event.data;
//获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
console.log("loginTmpCode", 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}`;
}
},
},
};
</script>
扫码成功之后跳转到首页,可以看到路由上有code值,也就是扫描之后获取到的loginTmpCode
2、获取access_token
这块的操作需要 在服务端进行,可以使用java、php或者node实现,我在项目中使用的是strapi提供的接口,所以需要在strapi中自定义一个接口,然后自定义返回数据
参考官网地址:https://strapi.io/documentation/developer-docs/latest/guides/custom-data-response.html#get-the-data-back
(1)首先创建一个接口
可在文档中查看接口
在路径./api/gettoken/controller/gettoken.js下,自定义接口返回数据
添加如下代码
const axios = require("axios");
module.exports = {
async find(ctx){
let url = "https://oapi.dingtalk.com/gettoken"
let data = {
appkey:"dinguv1oamjpzojhc0rq",
appsecret:"0mAwW5Y0p-66xWYdqz24EAfiyB1H1NU5fN6_KjsXHbWMF-japsDKp_EgWkZrx9p0"
}
let response = await axios({
method: "get",
url: url,
params: data
})
return response.data
}
};
参数appkey和appsecret可以在开发者后台中查看
调用接口获取数据成功