verify captcha at server side

src/pages/authentication/BusRegister.js

@@ -21,7 +21,7 @@ import { notifyActionError } from 'utils/CommonFunction';
 const CustomFormWizard = Loadable(lazy(() => import('./auth-forms/BusCustomFormWizard')));
 const AuthWrapper = Loadable(lazy(() => import('./AuthWrapperCustom')));
 import axios from "axios";
-import { GET_USERNAME } from "utils/ApiPathConst";
+import { GET_USERNAME, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
 // import CustomFormWizard from './auth-forms/BusCustomFormWizard';
 // import AuthWrapper from './AuthWrapperCustom';
 
@@ -57,6 +57,8 @@ const BusRegister = () => {
   const [completed, setCompleted] = useState([false]);
   const [updateValid, setUpdateValid] = useState(false);
   const [username, setUsername] = useState("")
+  const [base64Url, setBase64Url] = useState("")
+  const [checkCode, setCheckCode] = useState("")
 
   const totalSteps = () => {
     return steps.length;
@@ -83,7 +85,21 @@ const BusRegister = () => {
     return Number(response.data[0]) === 1
   }
 
+  const handleCaptcha = async () => {
+    const response = await axios.post(`${POST_VERIFY_CAPTCHA}`, {
+        captcha: base64Url,
+        checkCode: checkCode,
+    })
+    return Boolean(response.data["success"]);
+  }
+
   const handleNext = async () => {
+    const captchaTest = await handleCaptcha();
+    if (!captchaTest) {
+      notifyActionError("請輸入有效驗證")
+      return;
+    }
+
     const test = await handleCheckUsername()
     if (test) {
       notifyActionError("此用戶登入名稱已被注冊，請使用其他用戶登入名稱")
@@ -151,7 +167,13 @@ const BusRegister = () => {
       ) : (
         <React.Fragment>
           <AuthWrapper>
-            <CustomFormWizard setUpdateValid={setUpdateValid} step={activeStep} setUsername={setUsername} />
+            <CustomFormWizard
+              setUpdateValid={setUpdateValid}
+              step={activeStep}
+              setUsername={setUsername}
+              setBase64Url={setBase64Url}
+              setCheckCode={setCheckCode}
+            />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>
           <Stack direction="row" sx={{ pb: 2 }}>

src/pages/authentication/IAmSmartRegister.js

@@ -15,7 +15,7 @@ import {
   Button,
 } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import { GET_ID } from "utils/ApiPathConst";
+import { GET_ID, POST_VERIFY_CAPTCHA } from "utils/ApiPathConst";
 
 // project import
 import Loadable from 'components/Loadable';
@@ -82,11 +82,24 @@ const Register = () => {
     return Number(response.data[0]) === 1
   }
 
+  const handleCaptcha = async () => {
+    const response = await axios.post(`${POST_VERIFY_CAPTCHA}`, {
+        captcha: base64Url,
+        checkCode: checkCode,
+    })
+    return Boolean(response.data["success"]);
+  }
+
   const handleNext = async () => {
-    if(!idNo){
+    if (!idNo) {
       notifyActionError("資料，請返回注冊頁面。")
       return;
     }
+    const captchaTest = await handleCaptcha();
+    if (!captchaTest) {
+      notifyActionError("請輸入有效驗證")
+      return;
+    }
     const test = await handleCheckID()
     if (test) {
       notifyActionError("此用戶已注冊，請返回登入頁面並進行登入流程。")
@@ -154,7 +167,13 @@ const Register = () => {
       ) : (
         <React.Fragment>
           <AuthWrapper>
-            <CustomFormWizard setUpdateValid={setUpdateValid} step={activeStep} setIdNo={setIdNo}/>
+            <CustomFormWizard
+              setUpdateValid={setUpdateValid}
+              step={activeStep}
+              setIdNo={setIdNo}
+              setBase64Url={setBase64Url}
+              setCheckCode={setCheckCode}
+            />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>
           <Stack direction="row" sx={{ pb: 2 }}>

src/pages/authentication/Register.js

@@ -15,7 +15,7 @@ import {
   Button,
 } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
-import { GET_USERNAME } from "utils/ApiPathConst";
+import { GET_USERNAME, POST_VERIFY_CAPTCHA  } from "utils/ApiPathConst";
 
 // project import
 import Loadable from 'components/Loadable';
@@ -56,6 +56,8 @@ const Register = () => {
   const [completed, setCompleted] = useState([false]);
   const [updateValid, setUpdateValid] = useState(false);
   const [username, setUsername] = useState("");
+  const [base64Url, setBase64Url] = useState("")
+  const [checkCode, setCheckCode] = useState("")
 
   const totalSteps = () => {
     return steps.length;
@@ -82,7 +84,23 @@ const Register = () => {
     return Number(response.data[0]) === 1
   }
 
+  const handleCaptcha = async () => {
+    const response = await axios.post(`${POST_VERIFY_CAPTCHA}`, {
+        captcha: base64Url,
+        checkCode: checkCode,
+    })
+    return Boolean(response.data["success"]);
+  }
+
+
   const handleNext = async () => {
+
+    const captchaTest = await handleCaptcha();
+    if (!captchaTest) {
+      notifyActionError("請輸入有效驗證")
+      return;
+    }
+
     const test = await handleCheckUsername()
     if (test) {
       notifyActionError("此用戶登入名稱已被注冊，請使用其他用戶登入名稱")
@@ -150,7 +168,13 @@ const Register = () => {
       ) : (
         <React.Fragment>
           <AuthWrapper>
-            <CustomFormWizard setUpdateValid={setUpdateValid} step={activeStep} setUsername={setUsername}/>
+            <CustomFormWizard
+              setUpdateValid={setUpdateValid}
+              step={activeStep}
+              setUsername={setUsername}
+              setBase64Url={setBase64Url}
+              setCheckCode={setCheckCode}
+            />
             {/* <CustomFormWizard step={activeStep} /> */}
           </AuthWrapper>
           <Stack direction="row" sx={{ pb: 2 }}>

src/pages/authentication/RegisterCustom.js

@@ -25,7 +25,7 @@ const RegisterCustom = () => {
   }
 
   const getQRWithIAmSmart = () => {
-    let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/authcallback";
+    let callbackUrl = "https://"+iAmSmartCallbackPath()+"/iamsmart/registrycallback";
     let url = iAmSmartPath + "/api/v1/auth/getQR"
       + "?clientID=" + clientId
       + "&responseType=code"

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -67,8 +67,7 @@ const BusCustomFormWizard = (props) => {
     const [updateRows, setUpdateRows] = useState([]);
     // const [userNameList, setUserNameList] = useState([]);
 
-    const [captcha, setCaptcha] = useState([]);
-    const [captchaImg, setCaptchaImage] = useState([]);
+    const [captchaImg, setCaptchaImage] = useState("");
 
     const handleClickShowPassword = () => {
         setShowPassword(!showPassword);
@@ -113,26 +112,6 @@ const BusCustomFormWizard = (props) => {
 
     useEffect(() => {
         changePassword('');
-
-        // if (localStorage.getItem('checkCode') != null){
-        //     setCaptcha(localStorage.getItem('checkCode'));
-        //     setCaptchaImage(localStorage.getItem('base64Url'));
-        //     localStorage.setItem("checkCode",null);
-        //     localStorage.setItem("base64Url",null);
-        // }else{
-        // onCaptchaChange();
-        // // }
-        // axios.get(`${GET_USERNAME}`)
-        //     .then((response) => {
-        //         if (response.status === 200) {
-        //             setUserNameList(response.data);
-        //         }
-
-        //     })
-        //     .catch(error => {
-        //         console.log(error);
-        //         return false;
-        //     });
     }, []);
 
     const handleCheckUsername = async () => {
@@ -192,11 +171,10 @@ const BusCustomFormWizard = (props) => {
     const onCaptchaChange = () => {
         HttpUtils.post({
             url: POST_CAPTCHA,
-            params: { width: 130, height: 40 },
+            params: { width: 130, height: 40,  captcha: captchaImg},
             onSuccess: (responseData) => {
-                localStorage.setItem("checkCode", responseData.checkCode);
+                props.setBase64Url(responseData.base64Url)
                 localStorage.setItem("base64Url", responseData.base64Url);
-                setCaptcha(localStorage.getItem('checkCode'));
                 setCaptchaImage(localStorage.getItem('base64Url'));
             }
         });
@@ -335,6 +313,7 @@ const BusCustomFormWizard = (props) => {
 
     useEffect(() => {
         props.step == 2 ? _onSubmit() : null;
+        if(captchaImg=="")
         onCaptchaChange();
         checkDataField(values)
     }, [props.step])
@@ -447,7 +426,7 @@ const BusCustomFormWizard = (props) => {
     }
 
     function handleCaptcha(captchaField) {
-        return captchaField == captcha;
+        return captchaField;
     }
 
     function handlePassword(password) {
@@ -554,7 +533,7 @@ const BusCustomFormWizard = (props) => {
                     }
                 }
             }),
-            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證'))
         }, ['enCompanyName', 'chCompanyName']),
 
     });
@@ -1397,6 +1376,7 @@ const BusCustomFormWizard = (props) => {
                                                     name="captchaField"
                                                     onChange={(event) => {
                                                         const value = event.target.value;
+                                                        props.setCheckCode(event.target.value);
                                                         formik.setFieldValue("captchaField", value);
                                                     }}
                                                     sx={{ width: '75%' }}

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -64,9 +64,7 @@ const CustomFormWizard = (props) => {
     const [checkUpload, setCheckUpload] = useState(false);
     const [isLoading, setLoding] = useState(true);
     const [updateRows, setUpdateRows] = useState([]);
-
-    const [captcha, setCaptcha] = useState([]);
-    const [captchaImg, setCaptchaImage] = useState([]);
+    const [captchaImg, setCaptchaImage] = useState("");
 
     const handleClickShowPassword = () => {
         setShowPassword(!showPassword);
@@ -115,7 +113,8 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         changePassword('');
-        onCaptchaChange();
+        if(captchaImg=="")
+            onCaptchaChange();
     }, []);
 
     const handleCheckUsername = async () => {
@@ -175,11 +174,10 @@ const CustomFormWizard = (props) => {
     const onCaptchaChange = () => {
         HttpUtils.post({
             url: POST_CAPTCHA,
-            params: { width: 130, height: 40 },
+            params: { width: 130, height: 40,  captcha: captchaImg},
             onSuccess: (responseData) => {
-                localStorage.setItem("checkCode", responseData.checkCode);
+                props.setBase64Url(responseData.base64Url)
                 localStorage.setItem("base64Url", responseData.base64Url);
-                setCaptcha(localStorage.getItem('checkCode'));
                 setCaptchaImage(localStorage.getItem('base64Url'));
             }
         });
@@ -305,7 +303,8 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         props.step == 2 ? _onSubmit() : null;
-        onCaptchaChange();
+        if(captchaImg=="")
+            onCaptchaChange();
         checkDataField(values)
     }, [props.step])
 
@@ -422,7 +421,7 @@ const CustomFormWizard = (props) => {
     }
 
     function handleCaptcha(captchaField) {
-        return captchaField == captcha;
+        return captchaField;
     }
 
     function handleIdNo(idNo, selectedIdDocType, checkDigit) {
@@ -629,7 +628,7 @@ const CustomFormWizard = (props) => {
             // faxCountryCode: yup.string().min(3,'請輸入3位數字'),
             phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
             // fax: yup.string().min(8,'請輸入8位數字'),
-            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
         }),
     });
 
@@ -1539,6 +1538,7 @@ const CustomFormWizard = (props) => {
                                                     name="captchaField"
                                                     onChange={(event) => {
                                                         const value = event.target.value;
+                                                        props.setCheckCode(event.target.value);
                                                         formik.setFieldValue("captchaField", value);
                                                     }}
                                                     sx={{ width: '75%' }}

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -50,7 +50,6 @@ const CustomFormWizard = (props) => {
     const [checkUpload, setCheckUpload] = useState(false);
     const [isLoading, setLoding] = useState(true);
 
-    const [captcha, setCaptcha] = useState([]);
     const [captchaImg, setCaptchaImage] = useState([]);
 
     const [selectedAddress4, setSelectedAddress4] = useState(null);
@@ -77,6 +76,7 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         location.state?.responseData ?? {}
+        if(captchaImg=="")
         onCaptchaChange();
         responseToData();
     }, []);
@@ -193,16 +193,16 @@ const CustomFormWizard = (props) => {
     const onCaptchaChange = () => {
         HttpUtils.post({
             url: POST_CAPTCHA,
-            params: { width: 130, height: 40 },
+            params: { width: 130, height: 40,  captcha: captchaImg},
             onSuccess: (responseData) => {
-                localStorage.setItem("checkCode", responseData.checkCode);
+                props.setBase64Url(responseData.base64Url)
                 localStorage.setItem("base64Url", responseData.base64Url);
-                setCaptcha(localStorage.getItem('checkCode'));
                 setCaptchaImage(localStorage.getItem('base64Url'));
             }
         });
     }
 
+
     const checkDataField = (data) => {
         if (data.address1 !== "" &&
             data.email !== "" &&
@@ -248,6 +248,7 @@ const CustomFormWizard = (props) => {
 
     useEffect(() => {
         props.step == 2 ? _onSubmit() : null;
+        if(captchaImg=="")
         onCaptchaChange();
         checkDataField(values)
     }, [props.step])
@@ -329,7 +330,7 @@ const CustomFormWizard = (props) => {
     }
 
     function handleCaptcha(captchaField) {
-        return captchaField == captcha;
+        return captchaField;
     }
 
     function handleEmail(email) {
@@ -367,7 +368,7 @@ const CustomFormWizard = (props) => {
             emailConfirm: yup.string().email(displayErrorMsg('請輸入電郵格式')).max(255).required(displayErrorMsg('請輸入電郵')).oneOf([yup.ref('email'), null], displayErrorMsg('請輸入相同電郵')),
             phoneCountryCode: yup.string().min(2, displayErrorMsg('請輸入最少2位數字')).required(displayErrorMsg('請輸入國際區號')),
             phone: yup.string().min(8, displayErrorMsg('請輸入最少8位數字')).required(displayErrorMsg('請輸入聯絡電話')),
-            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')).oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
+            captchaField: yup.string().required(displayErrorMsg('請輸入驗證')),//.oneOf([captcha], displayErrorMsg('請輸入有效驗證')),
         }),
     });
 
@@ -851,6 +852,7 @@ const CustomFormWizard = (props) => {
                                                     name="captchaField"
                                                     onChange={(event) => {
                                                         const value = event.target.value;
+                                                        props.setCheckCode(event.target.value);
                                                         formik.setFieldValue("captchaField", value);
                                                     }}
                                                     sx={{ width: '75%' }}

src/utils/ApiPathConst.js

@@ -40,6 +40,7 @@ export const GET_FILE_DELETE = apiPath+'/file/delete';
 //Login
 export const POST_LOGIN = '/login';
 export const POST_CAPTCHA = apiPath+'/captcha';
+export const POST_VERIFY_CAPTCHA = apiPath+'/verifyCaptcha';
 
 //register
 export const POST_PUBLIC_USER_REGISTER = apiPath+'/user/register';
@@ -106,5 +107,5 @@ export const POST_EMAIL_SAVE = apiPath+'/email/save';
 export const DELETE_EMAIL = apiPath+'/email/delete';
 
 //iAmSmart
-export const GET_SMART_PROFILE = apiPath+'smart/getProfile'; //POST
-export const GET_SMART_LOGIN = apiPath+'smart/login'; //POST
+export const GET_SMART_PROFILE = apiPath+'/smart/getProfile'; //POST
+export const GET_SMART_LOGIN = apiPath+'/smart/login'; //POST