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>