chore(client): added code confirmation to automatic login to prevent …

…accidental operations
star-whale · Jan 4, 2024 · 872e6d3 · 872e6d3
1 parent 2ce80aa
commit 872e6d3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/client/starwhale/core/instance/view.py b/client/starwhale/core/instance/view.py
@@ -69,8 +69,16 @@ def login_with_browser(self, instance: str, alias: str) -> None:
 
         @app.on_event("startup")
         async def on_startup() -> None:
+            import random
+
+            # generate 4 digits random number for web confirmation
+            uid = "".join([str(random.randint(0, 9)) for _ in range(4)])
+            console.print(
+                f":point_right: please confirm the random number [bold][green]{uid}[/green][/bold] in your browser"
+            )
+
             nonlocal instance
-            url = f"{instance}/auth/client"
+            url = f"{instance}/auth/client?random={uid}"
             import webbrowser
 
             webbrowser.open(url)

diff --git a/console/src/i18n/locales.ts b/console/src/i18n/locales.ts
@@ -2279,10 +2279,18 @@ const locales0 = {
         en: 'Client Login Success',
         zh: '客户端登录成功',
     },
+    'Client Login Confirm': {
+        en: 'Please confirm the login request from client, request code is: {{0}}, if not your operation, please close this page directly',
+        zh: '请确认来自客户端的登陆请求, 请求code为: {{0}}, 如果非本人操作, 请直接关闭此页面',
+    },
     'Client Login Failed': {
         en: 'Client Login Failed',
         zh: '客户端登录失败',
     },
+    'Allow': {
+        en: 'Allow',
+        zh: '允许',
+    },
     'copyright': {
         en: 'Copyright © 2023 Starwhale, Inc. All rights reserved. ',
         zh: '版权所有 © 2023 Starwhale, Inc. 保留所有权利。',

diff --git a/console/src/pages/Auth/ClientLogin.tsx b/console/src/pages/Auth/ClientLogin.tsx
@@ -5,15 +5,22 @@ import { useAuth } from '@/api/Auth'
 import useTranslation from '@/hooks/useTranslation'
 // eslint-disable-next-line
 import { Spinner } from 'baseui/spinner'
+import { useSearchParam } from 'react-use'
+import Button from '@starwhale/ui/Button'
 
 export default function ClientLogin() {
+    const random = useSearchParam('random')
+
     const [t] = useTranslation()
     const { token } = useAuth()
     const [success, setSuccess] = useState(false)
     const [loading, setLoading] = useState(false)
     const [errMsg, setErrMsg] = useState('')
+
+    const [permited, setPermited] = useState(false)
+
     useEffect(() => {
-        if (!token) {
+        if (!token || !permited) {
             return
         }
         setLoading(true)
@@ -31,6 +38,18 @@ export default function ClientLogin() {
                 setErrMsg(t('Client Login Failed'))
                 setLoading(false)
             })
-    }, [t, token])
-    return <div>{loading ? <Spinner /> : <div>{success ? t('Client Login Success') : errMsg}</div>}</div>
+    }, [permited, t, token])
+    return (
+        <div className='flex justify-center'>
+            {permited ? null : (
+                <div className='flex flex-col items-center'>
+                    <p>{t('Client Login Confirm', [random])}</p>
+                    <div className='m-3'>
+                        <Button onClick={() => setPermited(true)}>{t('Allow')}</Button>
+                    </div>
+                </div>
+            )}
+            {loading ? <Spinner /> : <div>{success ? t('Client Login Success') : errMsg}</div>}
+        </div>
+    )
 }