feat: 登录二次验证切换为 tianai

Author: lingting

public/captcha-tianai.png

@@ -1,121 +1,5 @@
 export interface CaptchaProps {
   isSlideShow: boolean;
   close: () => void;
-  success: (captchaVerification: string) => void;
+  success: (params: Record<string, any>) => void;
 }
-
-export interface CaptchaState {
-  mode: string;
-  vSpace: number;
-  imgSize: {
-    width: number;
-    height: number;
-  };
-  barSize: {
-    width: number;
-    height: number;
-  };
-  blockSize: {
-    width: number;
-    height: number;
-  };
-  setSize: {
-    imgHeight: number;
-    imgWidth: number;
-    barHeight: number;
-    barWidth: number;
-  };
-  // 验证码背景图片
-  backImgBase: string;
-  // 验证滑块的背景图片
-  blockBackImgBase: string;
-  // 后端返回的唯一token值
-  backToken: string;
-  // 移动开始的时间
-  startMoveTime: number;
-  // 移动结束的时间
-  endMoveTime: number;
-  // 提示词的背景颜色
-  tipsBackColor: string;
-  // 后端返回的加密秘钥 字段
-  secretKey: string;
-  captchaType: 'blockPuzzle' | 'clickWord';
-  moveBlockBackgroundColor: string;
-  leftBarBorderColor: string;
-  iconColor: string;
-  barAreaLeft: number;
-  barAreaOffsetWidth: number;
-  startLeft: number;
-  moveBlockLeft: any;
-  leftBarWidth: any;
-  // 鼠标状态
-  status: boolean;
-  // 是够验证完成
-  isEnd: boolean;
-  passFlag: boolean;
-  tipWords: string;
-  text: string;
-  finishText: string;
-  transitionWidth?: string;
-  transitionLeft?: string;
-  iconClass: string;
-  move: (e: any) => void;
-  end: () => void;
-}
-
-export const captchaStateInit: CaptchaState = {
-  mode: 'fixed',
-  vSpace: 5,
-  imgSize: {
-    width: 330,
-    height: 155,
-  },
-  barSize: {
-    width: 310,
-    height: 40,
-  },
-  blockSize: {
-    width: 50,
-    height: 50,
-  },
-  setSize: {
-    imgHeight: 155,
-    imgWidth: 330,
-    barHeight: 40,
-    barWidth: 310,
-  },
-  // 验证码背景图片
-  backImgBase: '',
-  // 验证滑块的背景图片
-  blockBackImgBase: '',
-  // 后端返回的唯一token值
-  backToken: '',
-  // 移动开始的时间
-  startMoveTime: 0,
-  // 移动结束的时间
-  endMoveTime: 0,
-  // 提示词的背景颜色
-  tipsBackColor: '',
-  // 后端返回的加密秘钥 字段
-  secretKey: '',
-  captchaType: 'blockPuzzle',
-  moveBlockBackgroundColor: 'rgb(255, 255, 255)',
-  leftBarBorderColor: '',
-  iconColor: '',
-  barAreaLeft: 0,
-  barAreaOffsetWidth: 0,
-  startLeft: 0,
-  moveBlockLeft: null,
-  leftBarWidth: null,
-  // 鼠标状态
-  status: false,
-  // 是够验证完成
-  isEnd: false,
-  passFlag: false,
-  tipWords: '',
-  finishText: '',
-  iconClass: 'icon-right',
-  text: '',
-  move: () => {},
-  end: () => {},
-};

src/components/Captcha/index.css

@@ -1,3 +1,10 @@
+import VerifySlide from '@/components/Captcha';
+import type { LoginParams } from '@/services/ballcat/login';
+import { login } from '@/services/ballcat/login';
+import { User, Token } from '@/utils/Ballcat';
+import { settings } from '@/utils/ConfigUtils';
+import { pwd } from '@/utils/Encrypt';
+import I18n from '@/utils/I18nUtils';
 import {
   AlipayCircleOutlined,
   LockOutlined,
@@ -6,21 +13,14 @@ import {
   UserOutlined,
   WeiboCircleOutlined,
 } from '@ant-design/icons';
-import { Alert, message, Space, Tabs } from 'antd';
-import React, { useState } from 'react';
 import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
+import { Alert, message, Space, Tabs, Modal } from 'antd';
+import React, { useState } from 'react';
+import { useAliveController } from 'react-activation';
 import { history, Link, SelectLang, useIntl, useModel } from 'umi';
-import type { LoginParams } from '@/services/ballcat/login';
-import { login } from '@/services/ballcat/login';
-import { pwd } from '@/utils/Encrypt';
-import VerifySlide from '@/components/Captcha';
-import { User, Token } from '@/utils/Ballcat';
-import { settings } from '@/utils/ConfigUtils';
-import I18n from '@/utils/I18nUtils';
 
 // @ts-ignore
 import styles from './index.less';
-import { useAliveController } from 'react-activation';
 
 const LoginMessage: React.FC<{
   content: string;
@@ -46,7 +46,7 @@ const Login: React.FC = () => {
   const [type, setType] = useState<string>('account');
   // 是否使用登录验证码
   const [captcha] = useState<boolean>(true);
-  const [captchaSow, setCaptchaSow] = useState<boolean>(false);
+  const [captchaShow, setCaptchaShow] = useState<boolean>(false);
   const [loginParams, setLoginParams] = useState<LoginParams>({});
   const [vs, setVs] = useState<VerifySlide | null>(null);
 
@@ -95,7 +95,7 @@ const Login: React.FC = () => {
         return;
       }
       // 弹出验证码框
-      setCaptchaSow(true);
+      setCaptchaShow(true);
       vs.refresh();
     } else {
       await loginHandler(values);
@@ -109,20 +109,27 @@ const Login: React.FC = () => {
       <div hidden={!settings.i18n} className={styles.lang} data-lang>
         {SelectLang && <SelectLang />}
       </div>
-      {captcha && (
+
+      <Modal
+        closable={false}
+        visible={captcha && captchaShow}
+        forceRender={true}
+        footer={false}
+        onCancel={() => setCaptchaShow(false)}
+        width={278}
+        bodyStyle={{ padding: 0 }}
+      >
         <VerifySlide
-          ref={(ref) => {
-            setVs(ref);
-          }}
-          isSlideShow={captchaSow}
+          ref={setVs}
+          isSlideShow={captchaShow}
           close={() => {
-            setCaptchaSow(false);
+            setCaptchaShow(false);
           }}
-          success={async (captchaVerification) => {
-            loginHandler({ ...loginParams, captchaVerification });
+          success={async (params) => {
+            loginHandler({ ...loginParams, ...params });
           }}
         />
-      )}
+      </Modal>
       <div className={styles.content}>
         <div className={styles.top}>
           <div className={styles.header}>

src/components/Captcha/index.tsx

@@ -5,4 +5,5 @@ export type LoginParams = {
   type?: string;
   grant_type?: string;
   captchaVerification?: string;
+  captchaId?: string;
 };

src/components/Captcha/typings.ts

@@ -3,19 +3,20 @@ import { request } from 'umi';
 /**
  * 获取验证码
  */
-export async function get(body: CAPTCHA.GetParams) {
-  return request<CAPTCHA.Info>('captcha/get', {
-    method: 'POST',
-    data: body,
+export async function captchaGet(body: any) {
+  return request<any>('captcha/tianai/gen', {
+    method: 'GET',
+    params: body,
   });
 }
 
 /**
  * 校验
  */
-export async function valid(body: CAPTCHA.ValidParams) {
-  return request<CAPTCHA.ValidRes>('captcha/check', {
+export async function captchaValid(params: any, body: any) {
+  return request<any>('captcha/tianai/check', {
     method: 'POST',
+    params,
     data: body,
   });
 }

src/pages/user/Login/index.tsx

@@ -53,7 +53,7 @@ const customerResponseInterceptor: ResponseInterceptor = async (res, option) =>
 
           if (option.url) {
             // 部分接口特殊处理
-            if (option.url === 'captcha/get' || option.url === 'captcha/check') {
+            if (option.url.startsWith('captcha/')) {
               return response;
             }
           }