可参考官网：扫码登录第三方网站 - 钉钉开放平台

方式一：网站将钉钉登录二维码内嵌到自己页面中

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

在需要使用钉钉登录的地方实例以下JS对象

/*
* 解释一下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=SuiteKey&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"});

参数说明

参数	说明
goto	goto参数结构：https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=SuiteKey&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI，并且要将goto参数urlencode编码。
style	渲染二维码的区域的样式，可以自定义去除背景颜色和边框。
width	表示显示二维码的区域的宽。 width和height不代表二维码的大小，二维码大小是固定的210px*210px。
height	表示显示二维码的区域的高。 width和height不代表二维码的大小，二维码大小是固定的210px*210px。

加载钉钉API接口以后，获取用户扫描之后将获取的loginTmpCode。通过一下方法获取

var handleMessage = function (event) {var origin = event.origin;console.log("origin", event.origin);if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。var loginTmpCode = event.data; //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了console.log("loginTmpCode", loginTmpCode);}
};
if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', handleMessage, false);
} else if (typeof window.attachEvent != 'undefined') {window.attachEvent('onmessage', handleMessage);
}

在vue项目中，可通过动态创建script标签，加载js库。如：

const loadRemoteScript = (url) => {return new Promise((resolve, reject) => {const script = document.createElement('script');script.src = url;script.onload = resolve;script.onerror = reject;document.head.appendChild(script);});
}const loadRemoteimg = () => {loadRemoteScript('https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js')// loadRemoteScript('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then(() => {console.log("登录");ddLoginInitinfo()}).catch(() => {console.log("外部js加载异常")});
}const ddLoginInitinfo = () => {const url = encodeURIComponent(redirect_uri地址);// console.log(8888, `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${state.baseConfig.app_key}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`);window.DDLogin({id: "ding-login", // 装钉钉二维码的盒子goto: encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appkey值&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}`),style: "border:none;background-color:#FFFFFF;padding-bottom: 24px",width: "250",height: "300",},   )var handleMessage = function (event) {var origin = event.origin;console.log("origin", event.origin);if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。var loginTmpCode = event.data;fetch("https://oapi.dingtalk.com/connect/oauth2/sns_authorize?response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode="+loginTmpCode, {method: 'GET', // 默认就是GET，所以这一行可以省略headers: {'Content-Type': 'application/json',},}).then(response => response.json()) // 将响应解析为JSON.then(res => {console.log(5555, res)// 登录成功操作}).catch((error) => {console.log('Error:', error);});//获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了console.log("loginTmpCode", loginTmpCode);}};if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', handleMessage, false);} else if (typeof window.attachEvent != 'undefined') {window.attachEvent('onmessage', handleMessage);}
}

方式二：使用钉钉提供的扫码登录页

// 相对上面一种方式  更换引入的js库
// https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js'const loadRemoteimg = () => {loadRemoteScript('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then(() => {console.log("登录");ddLoginInitinfo()}).catch(() => {console.log("外部js加载异常")});
}const ddLoginInitinfo = () => {window.DTFrameLogin({id: "ding-login", // 装钉钉二维码的盒子width: 250,height: 270,},{redirect_uri: encodeURIComponent(redirect_uri地址),client_id: app_key地址,scope: "openid",response_type: "code",prompt: "consent",state: "ddd",},(loginResult) => {console.log("loginResult===", loginResult);const { redirectUrl, authCode, state } = loginResult;baseService.get("接口地址").then((res) => {console.log("测试接口", res);});if (res.code === 0) {//成功反馈}},(errorMsg) => {console.log("errorMsg : " + errorMsg);})