Global-sales/src/views/DingdingQRCode.jsx

import { Card, Flex, Typography } from 'antd'
import React, { useEffect } from 'react'

const { Title } = Typography
const { Meta } = Card

// 钉钉扫码开发文档：https://open.dingtalk.com/document/orgapp/tutorial-obtaining-user-personal-information#title-qpi-0qv-anm

function DingdingQRCode() {

  useEffect(() => {
    import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then((module) => {
      window.DTFrameLogin(
        {
          id: 'qrCodeContainer',
          width: 300,
          height: 300,
        },
        {
          redirect_uri: encodeURIComponent('https://sales.mycht.cn/dingding/callback'),
          client_id: 'dingwgdx6emlxr3fcrg8',
          scope: 'openid',
          response_type: 'code',
          state: 'state1111',
          prompt: 'consent',
        },
        (loginResult) => {
          const { redirectUrl, authCode, state } = loginResult
          // 这里可以直接进行重定向
          window.location.href = redirectUrl
          // 也可以在不跳转页面的情况下，使用code进行授权
          console.log(authCode)
        },
        (errorMsg) => {
          // 这里一般需要展示登录失败的具体原因
          alert(`Login Error: ${errorMsg}`)
        },
      )
    })
  }, [])

  return (
    <Flex justify='center' align='center' gap='middle' vertical>
      <Title level={4}>使用钉钉扫码</Title>
      <div id='qrCodeContainer' style={{ border: '1px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px' }}></div>
    </Flex>
  )
}

export default DingdingQRCode