feat: add aliyun captcha (#833)

* feat: add aliyun captcha provider

* Rename App key

* fix typo

* Rename HMACSHA1 & Reused clientId2 and clientSecret2

* Update ProviderEditPage.js

* Delete unused import

Co-authored-by: Gucheng <85475922+nomeguy@users.noreply.github.com>

web/src/common/CaptchaPreview.js

@@ -20,18 +20,27 @@ import * as ProviderBackend from "../backend/ProviderBackend";
 import { SafetyOutlined } from "@ant-design/icons";
 import { CaptchaWidget } from "./CaptchaWidget";
 
-export const CaptchaPreview = ({ provider, providerName, clientSecret, captchaType, owner, clientId, name, providerUrl }) => {
+export const CaptchaPreview = ({
+  provider,
+  providerName,
+  clientSecret,
+  captchaType,
+  subType,
+  owner,
+  clientId,
+  name,
+  providerUrl,
+  clientId2,
+  clientSecret2,
+}) => {
   const [visible, setVisible] = React.useState(false);
   const [captchaImg, setCaptchaImg] = React.useState("");
   const [captchaToken, setCaptchaToken] = React.useState("");
   const [secret, setSecret] = React.useState(clientSecret);
+  const [secret2, setSecret2] = React.useState(clientSecret2);
 
   const handleOk = () => {
-    UserBackend.verifyCaptcha(
-      captchaType,
-      captchaToken,
-      secret
-    ).then(() => {
+    UserBackend.verifyCaptcha(captchaType, captchaToken, secret).then(() => {
       setCaptchaToken("");
       setVisible(false);
     });
@@ -48,9 +57,10 @@ export const CaptchaPreview = ({ provider, providerName, clientSecret, captchaTy
         setCaptchaImg(res.captchaImage);
       } else {
         setSecret(res.clientSecret);
+        setSecret2(res.clientSecret2);
       }
     });
-  }
+  };
 
   const clickPreview = () => {
     setVisible(true);
@@ -100,24 +110,50 @@ export const CaptchaPreview = ({ provider, providerName, clientSecret, captchaTy
     setCaptchaToken(token);
   };
 
-
   const renderCheck = () => {
     if (captchaType === "Default") {
       return renderDefaultCaptcha();
     } else {
       return (
-        <CaptchaWidget
-          captchaType={captchaType}
-          siteKey={clientId}
-          onChange={onSubmit}
-        />
+        <Col>
+          <Row>
+            <CaptchaWidget
+              captchaType={captchaType}
+              subType={subType}
+              siteKey={clientId}
+              clientSecret={secret}
+              onChange={onSubmit}
+              clientId2={clientId2}
+              clientSecret2={secret2}
+            />
+          </Row>
+        </Col>
       );
     }
   };
 
+  const getButtonDisabled = () => {
+    if (captchaType !== "Default") {
+      if (!clientId || !clientSecret) {
+        return true;
+      }
+      if (captchaType === "Aliyun Captcha") {
+        if (!subType || !clientId2 || !clientSecret2) {
+          return true;
+        }
+      }
+    }
+    return false;
+  };
+
   return (
     <React.Fragment>
-      <Button style={{ fontSize: 14 }} type={"primary"} onClick={clickPreview} disabled={captchaType !== "Default" && (!clientId || !clientSecret)}>
+      <Button
+        style={{ fontSize: 14 }}
+        type={"primary"}
+        onClick={clickPreview}
+        disabled={getButtonDisabled()}
+      >
         {i18next.t("general:Preview")}
       </Button>
       <Modal

web/src/common/CaptchaWidget.js

@@ -14,7 +14,7 @@
 
 import React, { useEffect } from "react";
 
-export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
+export const CaptchaWidget = ({ captchaType, subType, siteKey, clientSecret, onChange, clientId2, clientSecret2 }) => {
   const loadScript = (src) => {
     var tag = document.createElement("script");
     tag.async = false;
@@ -53,11 +53,34 @@ export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
           }
         }, 300);
         break;
+      case "Aliyun Captcha":
+        const AWSCTimer = setInterval(() => {
+          if (!window.AWSC) {
+            loadScript("https://g.alicdn.com/AWSC/AWSC/awsc.js");
+          }
+
+          if (window.AWSC) {
+            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`);
+                  },
+                });
+              });
+            }
+            clearInterval(AWSCTimer);
+          }
+        }, 300);
+        break;
       default:
         break;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [captchaType, siteKey]);
+  }, [captchaType, subType, siteKey, clientSecret, clientId2, clientSecret2]);
 
   return <div id="captcha"></div>;
 };

web/src/common/CountDownInput.js

@@ -14,7 +14,6 @@
 
 import {Button, Col, Input, Modal, Row} from "antd";
 import React from "react";
-import * as Setting from "../Setting";
 import i18next from "i18next";
 import * as UserBackend from "../backend/UserBackend";
 import {SafetyOutlined} from "@ant-design/icons";
@@ -34,6 +33,9 @@ export const CountDownInput = (props) => {
   const [buttonLoading, setButtonLoading] = React.useState(false);
   const [buttonDisabled, setButtonDisabled] = React.useState(true);
   const [clientId, setClientId] = React.useState("");
+  const [subType, setSubType] = React.useState("");
+  const [clientId2, setClientId2] = React.useState("");
+  const [clientSecret2, setClientSecret2] = React.useState("");
 
   const handleCountDown = (leftTime = 60) => {
     let leftTimeSecond = leftTime
@@ -79,13 +81,14 @@ export const CountDownInput = (props) => {
         setCaptchaImg(res.captchaImage);
         setCheckType("Default");
         setVisible(true);
-      } else if (res.type === "reCAPTCHA" || res.type === "hCaptcha") {
+      } else {
         setCheckType(res.type);
         setClientId(res.clientId);
         setCheckId(res.clientSecret);
         setVisible(true);
-      } else {
-        Setting.showMessage("error", i18next.t("signup:Unknown Check Type"));
+        setSubType(res.subType);
+        setClientId2(res.clientId2);
+        setClientSecret2(res.clientSecret2);
       }
     })
   }
@@ -123,8 +126,12 @@ export const CountDownInput = (props) => {
       return (
         <CaptchaWidget
           captchaType={checkType}
+          subType={subType}
           siteKey={clientId}
+          clientSecret={checkId}
           onChange={onSubmit}
+          clientId2={clientId2}
+          clientSecret2={clientSecret2}
         />
       );
     }