packages/console-utils/xconsole-service/src/interceptors/riskInterceptor/dialog.tsx

@@ -0,0 +1,119 @@
+import ReactDOM from 'react-dom'
+import React, { Component } from 'react';
+import { Dialog, ConfigProvider } from '@alicloud/console-components';
+
+import Form from './form';
+import messages from './messages';
+import { RiskDialogProps, RiskDialogOptions, IVerifyInfo } from './type';
+
+class RiskDialog extends Component<RiskDialogProps> {
+  state = {
+    visible: true,
+    verifyCode: '',
+    requestId: '',
+  };
+
+  constructor(props: RiskDialogProps) {
+    super(props)
+    this.state.requestId = props.formProps?.requestId;
+  }
+
+  close = () => {
+    this.setState({ visible: false });
+  };
+
+  render = () => {
+    const { onConfirm, onCancel, onClose, formProps, ...others } = this.props;
+    const { visible, verifyCode, requestId } = this.state;
+
+    return (
+      <Dialog
+        title={messages[formProps.verifyType].title}
+        role="alertdialog"
+        style={{ width: 500 }}
+        {...others}
+        visible={visible}
+        okProps={{
+          disabled: !verifyCode
+        }}
+        onCancel={(e) => {
+          this.close();
+          onCancel(e);
+        }}
+        onOk={() => {
+          this.close();
+          onConfirm({ verifyCode, requestId })
+        }}
+        onClose={(...args) => {
+          this.close();
+          onClose(...args);
+        }}
+      >
+        <Form
+          {...formProps}
+          setRequestId={
+            (requestId) => {
+              this.setState({requestId})
+            }
+          }
+          setVerifyCode={
+            (verifyCode) => {
+              this.setState({verifyCode})
+            }
+          }
+        />
+      </Dialog>
+    )
+  }
+}
+
+export const show = (config: RiskDialogOptions) => {
+  return new window.Promise<IVerifyInfo>((resolve, reject) => {
+    const container = document.createElement('div');
+    const unmount = () => {
+      ReactDOM.unmountComponentAtNode(container);
+      container.parentNode.removeChild(container);
+    };
+    document.body.appendChild(container);
+    // @ts-ignore
+    const newContext = ConfigProvider.getContext();
+    const { verifyType } = config;
+
+    const handleVerifyCodeConfirm = () => {
+      ({ verifyCode, requestId }) => {
+        if (verifyType === 'ga' && verifyCode) {
+          resolve({ vCode: verifyCode });
+        }
+        if (requestId && verifyCode) {
+          resolve({
+            reqId: requestId,
+            vCode: verifyCode,
+          });
+        }
+        console.warn('[getVerifyInformation] failed: ', requestId, verifyCode );
+      }
+    }
+
+    ReactDOM.render(
+      <ConfigProvider {...newContext}>
+        <RiskDialog
+          {...config}
+          onConfirm={handleVerifyCodeConfirm}
+          onCancel={() => {
+            reject(new Error('Verification has been canceled!'));
+          }}
+          onClose={() => {
+            reject(new Error('Verification has been canceled!'));
+          }}
+          formProps={{ ...config }}
+          afterClose={unmount}
+        />
+      </ConfigProvider>,
+      container
+    );
+  });
+};
+
+export default {
+  show
+};

packages/console-utils/xconsole-service/src/interceptors/riskInterceptor/form.tsx

@@ -4,6 +4,7 @@ import { Button, Input, Grid, Form } from '@alicloud/console-components';
 import { getSecToken, getUmid, getCollina } from '../../utils/index';
 import searchParamsInterceptor from '../paramsInterceptor/index';
 import messages from './messages';
+import { RiskOption, RiskUrlOption } from './type';
 
 const { Col, Row } = Grid;
 const ItemLayout = {
@@ -14,17 +15,16 @@ const axiosInstance = axios.create();
 
 axiosInstance.interceptors.request.use(searchParamsInterceptor);
 
-interface IProps {
-  options?: {
-    codeType?: string;
-    verifyType?: string;
-    verifyDetail?: any;
-    isVerifyCodeValid?: any;
-  };
+export interface IProps {
+  codeType?: string;
+  verifyType?: string;
+  verifyDetail?: any;
+  isVerifyCodeValid?: boolean;
+  requestId?: string;
   setVerifyCode?: (value: string) => void;
   setRequestId?: (id: any) => void;
   onError?: (value: any) => void;
-  risk: any;
+  riskConfig: RiskOption;
 }
 
 interface IState {
@@ -35,7 +35,7 @@ interface IState {
 class VerifyForm extends Component<IProps, IState> {
   timer: number | null;
 
-  verifyUrl: { [key: string]: string };
+  verifyUrl: RiskUrlOption;
 
   constructor(props: IProps) {
     super(props);
@@ -44,7 +44,7 @@ class VerifyForm extends Component<IProps, IState> {
       isCountdownStarted: false,
       countdown: 0,
     };
-    this.verifyUrl = props.risk.url;
+    this.verifyUrl = props.riskConfig.url;
     this.onInputChange = this.onInputChange.bind(this);
     this.onGenerateVerifyCode = this.onGenerateVerifyCode.bind(this);
     this.startCountdownTimer = this.startCountdownTimer.bind(this);
@@ -64,7 +64,7 @@ class VerifyForm extends Component<IProps, IState> {
   async onGenerateVerifyCode(): Promise<void> {
     this.startCountdownTimer();
 
-    const { options: { codeType, verifyType } = {}, setRequestId } = this.props;
+    const { codeType, verifyType, setRequestId } = this.props;
     const reqData = {
       codeType,
       verifyType,
@@ -91,10 +91,7 @@ class VerifyForm extends Component<IProps, IState> {
 
       setRequestId?.(resData.requestId); // 保存发送验证码请求的 requestId
     } catch (e) {
-      // eslint-disable-next-line no-console
       console.error('[onGenerateVerifyCode] failed: ', e.message);
-      // this.props.onError(e)
-      // setRequestId('Fake requestId')
     }
   }
 
@@ -123,7 +120,7 @@ class VerifyForm extends Component<IProps, IState> {
 
   render(): JSX.Element {
     const {
-      options: { verifyType = '', verifyDetail, isVerifyCodeValid } = {},
+      verifyType = '', verifyDetail, isVerifyCodeValid
     } = this.props;
 
     const verifyMessages = {
@@ -132,7 +129,6 @@ class VerifyForm extends Component<IProps, IState> {
     };
 
     const { isCountdownStarted, countdown } = this.state;
-
     return (
       <Form style={{ width: '400px' }}>
         <Form.Item label={verifyMessages.detailDescription} {...ItemLayout}>

packages/console-utils/xconsole-service/src/interceptors/riskInterceptor/handleDoubleConfirm.tsx

@@ -1,6 +1,6 @@
 import axios, { AxiosResponse } from 'axios';
 import { URLSearchParams } from '../paramsInterceptor/index';
-import getVerifyInformation from './getVerifyInformation';
+import RiskDialog from './dialog';
 import {
   guideToVerificationMethodSetting,
   guideToVerificationDetailSetting,
@@ -58,11 +58,11 @@ async function handleDoubleConfirm(
       verifyType,
       verifyDetail,
       codeType,
-      lastRequestId,
-      risk,
+      requestId: lastRequestId,
+      riskConfig: risk,
     };
     try {
-      const { reqId, vCode } = await getVerifyInformation(options);
+      const { reqId, vCode } = await RiskDialog.show(options);
       requestId = reqId;
       verifyCode = vCode;
       lastRequestId = requestId;

packages/console-utils/xconsole-service/src/interceptors/riskInterceptor/type.ts

@@ -0,0 +1,47 @@
+import { IProps as FormProps } from './form';
+import { DialogProps } from '@alifd/next/lib/dialog';
+
+export interface IVerifyInfo {
+  reqId?: string;
+  vCode?: string;
+}
+
+export interface RiskUrlOption {
+  generateVerificationCode: string;
+  setVerificationMethod: string;
+  changeVerificationMethod: string;
+  bindMobileHelp: string;
+}
+
+export interface RiskOption {
+  code: {
+    success: string;
+    doubleConfirm: string;
+    forbidden: string;
+    verifyCodeInvalid: string;
+  };
+  url: RiskUrlOption;
+}
+
+export interface RiskDialogOptions {
+  requestId?: string;
+  // 风控码
+  codeType: string;
+  //
+  mteeCode: "aliyun_console";
+  // 验证详情提示
+  verifyDetail: string;
+  // 风控类型
+  verifyType: "sms" | 'ga' | 'mfa';
+
+  // 是否为正确的风控错误码
+  isVerifyCodeValid: boolean;
+
+  // Risk 的配置
+  riskConfig: RiskOption;
+}
+
+export interface RiskDialogProps extends DialogProps {
+  onConfirm: ({ verifyCode, requestId }) => void;
+  formProps?: FormProps;
+}

packages/console-utils/xconsole-service/stories/demo/riskDialog.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import Dialog from '../../src/interceptors/riskInterceptor/dialog';
+
+
+export default () => {
+  useEffect(() => {
+    Dialog.show({
+      codeType: "ims_user_delete",
+      mteeCode: "aliyun_console",
+      verifyDetail: "180****5420",
+      verifyType: "sms",
+      isVerifyCodeValid: true,
+      riskConfig: {
+        code: {
+          success: '200',
+          doubleConfirm: 'FoundRiskAndDoubleConfirm',
+          forbidden: 'FoundRiskAndTip',
+          verifyCodeInvalid: 'verifyCodeInvalid',
+        },
+        url: {
+          generateVerificationCode: '/risk/sendVerifyMessage.json',
+          setVerificationMethod: 'https://account.console.aliyun.com/#/secure',
+          changeVerificationMethod: 'https://account.console.aliyun.com/#/secure',
+          bindMobileHelp: 'https://account.console.aliyun.com',
+        },
+      },
+    })
+  }, [])
+  return null;
+}