钉钉文档
实现登录第三方网站 - 钉钉开放平台 (dingtalk.com)
html页面
将html放在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
// jquery
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
// 钉钉二维码
<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
<style>
/* STEP2：指定这个包裹容器元素的CSS样式，尤其注意宽高的设置 */
.self-defined-classname {
width: 300px;
height: 300px;
/* border: 1px #000 solid; */
}
</style>
</head>
<body>
<!-- STEP1：在HTML中添加包裹容器元素 -->
<div id="self_defined_element" class="self-defined-classname"></div>
</body>
</html>
<script>
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。
window.DTFrameLogin(
{
id: 'self_defined_element',
width: 300,
height: 300,
},
{
// 回调地址：可以理解为用户扫码同意后钉钉会重定向到你指定的地址并把授权码authCode拼接到该地址参数
redirect_uri: encodeURIComponent('http://192.168.11.98:82/index'),
client_id: 'dixxxxxxxxxxxxxx', // 你的企业内部应用appKey
scope: 'dingxxxxxxxxxxxxxxxxxxx', // 保持不变
response_type: 'code', // 保持不变
state: 'pc', // 跟随authCode原样返回
prompt: 'consent', // 值为consent时，会进入授权确认页
},
(loginResult) => {
const { redirectUrl, authCode, state } = loginResult;
// 用户扫码成功后获取到重定向地址以及同意的授权码，这里不做重定向地址。
// 通过拿到的授权码调用我们第三方应用的钉钉授权码登录接口换取用户凭证token
console.log(redirectUrl, authCode, state)
$.ajax({
url: `http://xxxxxxxxxxxxxxx/auth`, // 后端接口
method: 'get',
contentType: 'application/json',
data:{
authCode:authCode
},
dataType: 'json',
success: function (data) {
if (data.code == 200) {
// 获取token并缓存下来
// window.localStorage.setItem('Admin-Token', data.token);
document.cookie = 'Admin-Token='+data.token;
// 重定向到首页
parent.location.href = 'http://xxxxxxxxx/index'
} else {
alert('钉钉扫码登录失败，请再次尝试。');
return;
}
},
error: function (err) {
alert(err);
}
});
},
(errorMsg) => {
// 这里一般需要展示登录失败的具体原因
alert(`Login Error: ${errorMsg}`);
},
);
</script>
将html通过iframe 放在登录页
<div>
<iframe src="/loginpage.html"
ref="iframe"
width="330px"
height="330px"
style="margin: 0px 0px 0px 20px;"
frameborder="no"
border="0"
marginwidth="0"
marginheight="0"
scrolling="no"
allowtransparency="yes">
</iframe>
</div>
