完成钉钉扫码和重定向

1 year ago · d78e0caac0
parent 1c87d69736
commit d78e0caac0
4 changed files with 81 additions and 12 deletions
--- a/index.html
+++ b/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>聊天式销售平台需求文档</title>
+    <title>聊天式销售平台</title>
  </head>
  <body>
    <div id="root"></div>
--- a/src/main.jsx
+++ b/src/main.jsx
@ -11,6 +11,7 @@ import App from '@/views/App'
 import Standlone from '@/views/Standlone'
 import OrderFollow from '@/views/OrderFollow'
 import DingdingQRCode from '@/views/DingdingQRCode'
+import DingdingCallbak from '@/views/DingdingCallbak'

 configure({
  useProxies: 'ifavailable',
@ -29,10 +30,19 @@ const router = createBrowserRouter([
      { index: true, element: <OrderFollow /> },
    ]
  },
+  {
+    path: '/s',
+    element: <App />,
+    children: [      
+      { index: true, element: <OrderFollow /> },
+      { path: 'order/follow', element: <OrderFollow />},
+    ]
+  },
  {
    element: <Standlone />,
    children: [
-      { path: "/public/dingding", element: <DingdingQRCode /> },
+      { path: "/dingding/qrcode", element: <DingdingQRCode /> },
+      { path: "/dingding/callback", element: <DingdingCallbak /> },
    ]
  }
 ])
--- a/src/views/DingdingCallbak.jsx
+++ b/src/views/DingdingCallbak.jsx
@ -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;
--- a/src/views/DingdingQRCode.jsx
+++ b/src/views/DingdingQRCode.jsx
@ -1,16 +1,48 @@
-import React from 'react';
-import { QRCode, Result, Flex, Button } from 'antd';
+import React, { useEffect } from 'react'
+import { Card, Typography, Flex, Button } from 'antd'
+
+const { Title } = Typography
+const { Meta } = Card

 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 (
-    <Flex justify='center' align='center'>
-      <QRCode
-        errorLevel="H"
-        size={300}
-        iconSize={300 / 4}
-        value="https://www.globalhighlights.com/"
-        icon="https://data.chinahighlights.com/image/aboutus/logo-gh.png"
-      />
+    <Flex justify='center' align='center' gap="middle" vertical>
+    <Title level={4}>使用钉钉扫码</Title>
+    <div id="dingdingContainer" style={{border: '1px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px'}}></div>
    </Flex>
  )
 }