Haina
/
Global-sales
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成钉钉扫码和重定向

Browse Source
dev/mobile
Jimmy Liow 2 years ago
parent 1c87d69736
commit d78e0caac0
4 changed files with 81 additions and 12 deletions
Show Stats Download Patch File Download Diff File

2
index.html
Unescape Escape View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>聊天式销售平台需求文档</title> <title>聊天式销售平台</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

12
src/main.jsx
Unescape Escape View File

@ -11,6 +11,7 @@ import App from '@/views/App'
import Standlone from '@/views/Standlone' import Standlone from '@/views/Standlone'
import OrderFollow from '@/views/OrderFollow' import OrderFollow from '@/views/OrderFollow'
import DingdingQRCode from '@/views/DingdingQRCode' import DingdingQRCode from '@/views/DingdingQRCode'
import DingdingCallbak from '@/views/DingdingCallbak'
configure({ configure({
useProxies: 'ifavailable', useProxies: 'ifavailable',
@ -29,10 +30,19 @@ const router = createBrowserRouter([
{ index: true, element: <OrderFollow /> }, { index: true, element: <OrderFollow /> },
] ]
}, },
{
path: '/s',
element: <App />,
children: [
{ index: true, element: <OrderFollow /> },
{ path: 'order/follow', element: <OrderFollow />},
]
},
{ {
element: <Standlone />, element: <Standlone />,
children: [ children: [
{ path: "/public/dingding", element: <DingdingQRCode /> }, { path: "/dingding/qrcode", element: <DingdingQRCode /> },
{ path: "/dingding/callback", element: <DingdingCallbak /> },
] ]
} }
]) ])

27
src/views/DingdingCallbak.jsx
Unescape Escape View File

@ -0,0 +1,27 @@
import React, { useEffect } from 'react'
import { useParams, useNavigate } from "react-router-dom"
import { Card, Typography, Flex, Button } from 'antd'
const { Title } = Typography
const { Meta } = Card
function DingdingCallbak() {
const params = new URLSearchParams(window.location.search)
const code = params.get('code')
const state = params.get('state')
console.info('code: ' + code)
console.info('state: ' + state)
useEffect(() => {
}, [])
return (
<Flex justify='center' align='center' gap="middle" vertical>
<Title level={4}>钉钉 Callbak</Title>
</Flex>
)
}
export default DingdingCallbak;

52
src/views/DingdingQRCode.jsx
Unescape Escape View File

@ -1,16 +1,48 @@
import React from 'react'; import React, { useEffect } from 'react'
import { QRCode, Result, Flex, Button } from 'antd'; import { Card, Typography, Flex, Button } from 'antd'
const { Title } = Typography
const { Meta } = Card
function DingdingQRCode() { function DingdingQRCode() {
useEffect(() => {
import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then((module) => {
console.info(module);
window.DTFrameLogin(
{
id: 'dingdingContainer',
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 ( return (
<Flex justify='center' align='center'> <Flex justify='center' align='center' gap="middle" vertical>
<QRCode <Title level={4}>使用钉钉扫码</Title>
errorLevel="H" <div id="dingdingContainer" style={{border: '1px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px'}}></div>
size={300}
iconSize={300 / 4}
value="https://www.globalhighlights.com/"
icon="https://data.chinahighlights.com/image/aboutus/logo-gh.png"
/>
</Flex> </Flex>
) )
} }

Write Preview
Loading…
Cancel
Save