钉钉文档
实现登录第三方网站 - 钉钉开放平台 (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', // 你的企业内部应用appKeyscope: 'dingxxxxxxxxxxxxxxxxxxx', // 保持不变 response_type: 'code', // 保持不变state: 'pc', // 跟随authCode原样返回prompt: 'consent', // 值为consent时，会进入授权确认页},(loginResult) => {const { redirectUrl, authCode, state } = loginResult;// 用户扫码成功后获取到重定向地址以及同意的授权码，这里不做重定向地址。// 通过拿到的授权码调用我们第三方应用的钉钉授权码登录接口换取用户凭证tokenconsole.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>
