效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/5435535f24a74548ae1b0e1c5392b0b2.png)
参考文档
钉钉开放平台
前端接入必要参数
- client_id(appKey&&suiteKey)
- redirect_uri (开发者平台进行配置,扫码成功后会跳转,如下图所示)
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1a2001f825f5413dab518406f6813c6f.png)
代码实现
1. 根目录index.html引入文件
<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
2. login.vue 展示代码
html
<div id="self_defined_element" />
javascript
<script lang="ts" setup>
onMounted(() => {
window.DTFrameLogin(
{
id: 'self_defined_element',
width: 300,
height: 300,
},
{
redirect_uri: encodeURIComponent('http://local.winshangdata.com:9000/auth'),
client_id: 'dingxxxxxxxxxxx',
scope: 'openid',
response_type: 'code',
prompt: 'consent',
},
(loginResult) => {
console.log('登录成功--->', loginResult)
const { redirectUrl, authCode, state } = loginResult
window.location.href = redirectUrl
},
(errorMsg) => {
console.error(`errorMsg of errorCbk: ${errorMsg}`)
},
)
})
</script>
3. 新建/auth路由处理authCode获取业务系统token
<template>
dd login
</template>
<script lang="ts" setup>
const route = useRoute()
console.log('route', route.query.authCode)
</script>