fix: 添加短信接口对外国手机号的验证处理

fix #88
duan602728596 · Sep 6, 2023 · 1056e29 · 1056e29
1 parent 4a7f19a
commit 1056e29
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 14 deletions.
diff --git a/packages/48tools/src/functionalComponents/Pocket48Login/LoginForm/LoginForm.tsx b/packages/48tools/src/functionalComponents/Pocket48Login/LoginForm/LoginForm.tsx
@@ -1,7 +1,23 @@
-import { Fragment, useSyncExternalStore, type ReactElement, type MouseEvent } from 'react';
-import { Button, Form, Input, message, type FormInstance } from 'antd';
+import {
+  Fragment,
+  useState,
+  useSyncExternalStore,
+  type ReactElement,
+  type Dispatch as D,
+  type SetStateAction as S,
+  type MouseEvent
+} from 'react';
+import { Button, Form, Input, message, Select, type FormInstance } from 'antd';
+import type { DefaultOptionType } from 'rc-select/es/Select';
 import type { UseMessageReturnType } from '@48tools-types/antd';
-import { requestSMS, type SMSResult } from '@48tools-api/48/login';
+import * as classNames from 'classnames';
+import {
+  requestSMS,
+  type SMSResult,
+  type ForeignVerificationMessage,
+  type ForeignVerificationAnswerItem
+} from '@48tools-api/48/login';
+import commonStyle from '../../../common.sass';
 import style from './loginForm.sass';
 import { smsStore } from '../function/SMSStore';
 
@@ -10,26 +26,47 @@ function LoginForm(props: { form: FormInstance }): ReactElement {
   const form: FormInstance = props.form;
   const [messageApi, messageContextHolder]: UseMessageReturnType = message.useMessage();
   const smsTime: number = useSyncExternalStore(smsStore.subscribe, smsStore.getSnapshot);
+  const [foreignVerificationQuestion, setForeignVerificationQuestion]: [string | null, D<S<string | null>>] = useState(null);
+  const [foreignVerificationOptions, setForeignVerificationOptions]: [
+    Array<DefaultOptionType> | null,
+    D<S<Array<DefaultOptionType> | null>>
+  ] = useState(null);
 
   // 发送验证码
   async function handleSendSMSCodeClick(event: MouseEvent): Promise<void> {
-    let value: { area: string; mobile: string };
+    let value: { area: string; mobile: string; answer?: string };
 
     try {
-      value = await form.validateFields(['area', 'mobile']);
+      value = await form.validateFields(['area', 'mobile', 'answer']);
     } catch {
       return;
     }
 
-    smsStore.start();
-
     try {
-      const res: SMSResult = await requestSMS(value.mobile, value.area);
+      const res: SMSResult = await requestSMS({
+        mobile: value.mobile,
+        area: value.area,
+        answer: value.answer
+      });
+
+      if (res.status === 2001) {
+        const answer: ForeignVerificationMessage = JSON.parse(res.message);
 
-      if (!res.success) {
-        messageApi.error('验证码发送失败！');
+        setForeignVerificationQuestion(answer.question);
+        setForeignVerificationOptions(
+          answer.answer.map((o: ForeignVerificationAnswerItem): DefaultOptionType => ({
+            value: o.option.toString(),
+            label: o.value
+          }))
+        );
+      } else {
+        smsStore.start();
+        setForeignVerificationQuestion(null);
+        setForeignVerificationOptions(null);
 
-        return;
+        if (!res.success) {
+          messageApi.error('验证码发送失败！');
+        }
       }
     } catch (err) {
       console.error(err);
@@ -66,6 +103,17 @@ function LoginForm(props: { form: FormInstance }): ReactElement {
             </Button>
           </div>
         </Form.Item>
+        {
+          foreignVerificationOptions && foreignVerificationQuestion ? (
+            <Form.Item className={ style.formItem } label="问题验证" required={ true }>
+              <p className="m-0 leading-[32px]">{ foreignVerificationQuestion }</p>
+              <p className={ classNames('mb-[6px] leading-[32px]', commonStyle.tips) }>选择答案后请重新发送验证码！</p>
+              <Form.Item name="answer" required={ true } noStyle={ true }>
+                <Select options={ foreignVerificationOptions } />
+              </Form.Item>
+            </Form.Item>
+          ) : null
+        }
       </Form>
       { messageContextHolder }
     </Fragment>

diff --git a/packages/48tools/src/functionalComponents/Pocket48Login/Pocket48Login.tsx b/packages/48tools/src/functionalComponents/Pocket48Login/Pocket48Login.tsx
@@ -368,7 +368,7 @@ function Pocket48Login(props: {}): ReactElement {
         onOk={ tabsKey === 'tokenForm' ? handleSaveTokenClick : handleLoginClick }
         onCancel={ (event: MouseEvent): void => setOpen(false) }
       >
-        <div className="h-[200px]">
+        <div className="h-[300px]">
           <Tabs type="card" activeKey={ tabsKey } items={ tabsItem } onChange={ (key: string): void => setTabsKey(key) } />
         </div>
       </Modal>

diff --git a/packages/48tools/src/services/48/login/index.ts b/packages/48tools/src/services/48/login/index.ts
@@ -4,17 +4,28 @@ import type { SMSResult, LoginUserInfo, IMUserInfo, UserInfoReloadOrSwitch } fro
 
 export type * from './interface';
 
+interface RequestSMSArguments {
+  mobile: string;
+  area?: string;
+  answer?: string;
+}
+
 /**
  * 发送验证码
  * @param { string } mobile: 手机号
  * @param { string } area: 区号
+ * @param { string } answer: 国外手机号可能会有的验证
  */
-export async function requestSMS(mobile: string, area: string = '86'): Promise<SMSResult> {
+export async function requestSMS({ mobile, area = '86', answer }: RequestSMSArguments): Promise<SMSResult> {
+  const object: Record<string, string> = { mobile, area };
+
+  if (answer) object.answer = answer;
+
   const res: GotResponse<SMSResult> = await got('https://pocketapi.48.cn/user/api/v1/sms/send2', {
     method: 'POST',
     headers: createHeaders(),
     responseType: 'json',
-    json: { mobile, area }
+    json: object
   });
 
   return res.body;