|
|
import { Result, Spin, Flex, Typography } from 'antd'
|
|
|
import React, { useEffect, useState } from 'react'
|
|
|
import { useNavigate } from 'react-router-dom'
|
|
|
import useAuthStore from '@/stores/AuthStore'
|
|
|
|
|
|
const { Title } = Typography
|
|
|
|
|
|
// 钉钉扫码开发文档：https://open.dingtalk.com/document/orgapp/tutorial-obtaining-user-personal-information#title-qpi-0qv-anm
|
|
|
|
|
|
function DingdingQRCode() {
|
|
|
|
|
|
const navigate = useNavigate()
|
|
|
// const { loginUser } = useAuthContext()
|
|
|
const { loginStatus, fetchUser } = useAuthStore()
|
|
|
|
|
|
useEffect(() => {
|
|
|
import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then(() => {
|
|
|
window.DTFrameLogin(
|
|
|
{
|
|
|
id: 'qrCodeContainer',
|
|
|
width: 300,
|
|
|
height: 300,
|
|
|
},
|
|
|
{
|
|
|
redirect_uri: encodeURIComponent('https://sales.mycht.cn/p/dingding/callback'),
|
|
|
client_id: 'dingwgdx6emlxr3fcrg8',
|
|
|
scope: 'openid',
|
|
|
response_type: 'code',
|
|
|
state: 'global-sales',
|
|
|
prompt: 'consent',
|
|
|
},
|
|
|
(loginResult) => {
|
|
|
const { authCode } = loginResult
|
|
|
fetchUser(authCode)
|
|
|
},
|
|
|
(errorMsg) => {
|
|
|
console.error(`Login Error: ${errorMsg}`)
|
|
|
},
|
|
|
)
|
|
|
})
|
|
|
}, [])
|
|
|
|
|
|
if (loginStatus === 200) {
|
|
|
return (
|
|
|
<Flex justify='center' align='center' gap='middle' vertical>
|
|
|
<Result
|
|
|
status='success'
|
|
|
title='扫码成功'
|
|
|
subTitle='正在获取你的权限'
|
|
|
extra={[
|
|
|
<Spin size='small' />
|
|
|
]}
|
|
|
/>
|
|
|
</Flex>
|
|
|
)
|
|
|
} else if (loginStatus === 302) {
|
|
|
navigate('/account/profile')
|
|
|
} else if (loginStatus === 403) {
|
|
|
return (
|
|
|
<Flex justify='center' align='center' gap='middle' vertical>
|
|
|
<Result
|
|
|
status='403'
|
|
|
title='403'
|
|
|
subTitle='你没有绑定钉钉账号，无法登陆。'
|
|
|
/>
|
|
|
</Flex>
|
|
|
)
|
|
|
} else {
|
|
|
return (
|
|
|
<Flex justify='center' align='center' gap='middle' vertical>
|
|
|
<Title level={4}>使用钉钉扫码</Title>
|
|
|
<div id='qrCodeContainer' style={{ border: '12px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px' }}></div>
|
|
|
</Flex>
|
|
|
)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default DingdingQRCode |