feat: upgrade Alibaba cloud captcha provider from v1 to v2 (#3879)

web/src/ProviderEditPage.js

@@ -371,11 +371,6 @@ class ProviderEditPage extends React.Component {
           {id: "Third-party", name: i18next.t("provider:Third-party")},
         ]
       );
-    } else if (type === "Aliyun Captcha") {
-      return [
-        {id: "nc", name: i18next.t("provider:Sliding Validation")},
-        {id: "ic", name: i18next.t("provider:Intelligent Validation")},
-      ];
     } else {
       return [];
     }
@@ -674,7 +669,7 @@ class ProviderEditPage extends React.Component {
           </Col>
         </Row>
         {
-          this.state.provider.type !== "WeCom" && this.state.provider.type !== "Infoflow" && this.state.provider.type !== "Aliyun Captcha" ? null : (
+          this.state.provider.type !== "WeCom" && this.state.provider.type !== "Infoflow" ? null : (
             <React.Fragment>
               <Row style={{marginTop: "20px"}} >
                 <Col style={{marginTop: "5px"}} span={2}>

web/src/common/CaptchaWidget.js

@@ -13,6 +13,8 @@
 // limitations under the License.
 
 import React, {useEffect} from "react";
+import {Button} from "antd";
+import i18next from "i18next";
 
 export const CaptchaWidget = (props) => {
   const {captchaType, subType, siteKey, clientSecret, clientId2, clientSecret2, onChange} = props;
@@ -85,23 +87,34 @@ export const CaptchaWidget = (props) => {
       break;
     }
     case "Aliyun Captcha": {
+      window.AliyunCaptchaConfig = {
+        region: "cn",
+        prefix: clientSecret2,
+      };
+
       const AWSCTimer = setInterval(() => {
-        if (!window.AWSC) {
-          loadScript("https://g.alicdn.com/AWSC/AWSC/awsc.js");
+        if (!window.initAliyunCaptcha) {
+          loadScript("https://o.alicdn.com/captcha-frontend/aliyunCaptcha/AliyunCaptcha.js");
         }
 
-        if (window.AWSC) {
+        if (window.initAliyunCaptcha) {
           if (clientSecret2 && clientSecret2 !== "***") {
-            window.AWSC.use(subType, function(state, module) {
-              module.init({
-                appkey: clientSecret2,
-                scene: clientId2,
-                renderTo: "captcha",
-                success: function(data) {
-                  onChange(`SessionId=${data.sessionId}&AccessKeyId=${siteKey}&Scene=${clientId2}&AppKey=${clientSecret2}&Token=${data.token}&Sig=${data.sig}&RemoteIp=192.168.0.1`);
-                },
-              });
+            window.initAliyunCaptcha({
+              SceneId: clientId2,
+              mode: "embed",
+              element: "#captcha",
+              button: "#captcha-button",
+              captchaVerifyCallback: (data) => {
+                onChange(data.toString());
+              },
+              slideStyle: {
+                width: 320,
+                height: 40,
+              },
+              language: "cn",
+              immediate: true,
             });
+
           }
           clearInterval(AWSCTimer);
         }
@@ -154,5 +167,9 @@ export const CaptchaWidget = (props) => {
     }
   }, [captchaType, subType, siteKey, clientSecret, clientId2, clientSecret2]);
 
-  return <div id="captcha" />;
+  return <div id="captcha">
+    {
+      captchaType === "Aliyun Captcha" && window.initAliyunCaptcha ? <Button id="captcha-button">{i18next.t("general:Verifications")}</Button> : null
+    }
+  </div>;
 };

web/src/common/modal/CaptchaModal.js

@@ -44,6 +44,12 @@ export const CaptchaModal = (props) => {
     }
   }, [visible]);
 
+  useEffect(() => {
+    if (captchaToken !== "" && captchaType !== "Default") {
+      handleOk();
+    }
+  }, [captchaToken]);
+
   const handleOk = () => {
     onOk?.(captchaType, captchaToken, clientSecret);
   };
@@ -138,19 +144,18 @@ export const CaptchaModal = (props) => {
       if (!regex.test(captchaToken)) {
         isOkDisabled = true;
       }
-    } else if (captchaToken === "") {
-      isOkDisabled = true;
+      return [
+        null,
+        <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("general:OK")}</Button>,
+      ];
     }
 
-    return [
-      <Button key="cancel" onClick={handleCancel}>{i18next.t("general:Cancel")}</Button>,
-      <Button key="ok" disabled={isOkDisabled} type="primary" onClick={handleOk}>{i18next.t("general:OK")}</Button>,
-    ];
+    return null;
   };
 
   return (
     <Modal
-      closable={false}
+      closable={true}
       maskClosable={false}
       destroyOnClose={true}
       title={i18next.t("general:Captcha")}
@@ -160,6 +165,7 @@ export const CaptchaModal = (props) => {
       width={350}
       footer={renderFooter()}
       onCancel={handleCancel}
+      afterClose={handleCancel}
       onOk={handleOk}
     >
       <div style={{marginTop: "20px", marginBottom: "50px"}}>