本文主要是介绍vue3接入钉钉登陆成功实践，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果
参考文档
钉钉开放平台
前端接入必要参数
- client_id（appKey&&suiteKey）
- redirect_uri （开发者平台进行配置，扫码成功后会跳转，如下图所示）
代码实现
1. 根目录index.html引入文件
<script src="https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js"></script>
2. login.vue 展示代码
html
// html<div id="self_defined_element" />
javascript
<script lang="ts" setup>
onMounted(() => {
// STEP3：在需要的时候，调用 window.DTFrameLogin 方法构造登录二维码，并处理登录成功或失败的回调。window.DTFrameLogin({id: 'self_defined_element',width: 300,height: 300,},{redirect_uri: encodeURIComponent('http://local.winshangdata.com:9000/auth'), // 刚才配置的重定向地址client_id: 'dingxxxxxxxxxxx', // client_id在创建的应用基本信息->凭证与基础信息中可以找到scope: 'openid', // 固定值response_type: 'code', // 固定值// state: 'xxxxxxxxx', // 这里的state可以不传，如果传了会在loginResult中拿到一样的值prompt: 'consent', // 固定值},(loginResult) => {console.log('登录成功--->', loginResult)const { redirectUrl, authCode, state } = loginResult// 这里可以直接进行重定向window.location.href = redirectUrl// 也可以在不跳转页面的情况下，使用code进行授权// 根据authCode获取用户信息和token 这里可以让你们的后端提供auth接口，也可以参考下面我使用nestjs搭建的一个简单的服务端示例// axios.get('http://localhost:3000/auth', { params: { authCode } }).then((res) => {// console.log(res)// // router.push('/index')// })},(errorMsg) => {// 这里一般需要展示登录失败的具体原因,可以使用toast等轻提示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>这篇关于vue3接入钉钉登陆成功实践的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
