feat: support configurable captcha(reCaptcha & hCaptcha) (#765)

* feat: support configurable captcha(layered architecture)

* refactor & add captcha logo

* rename captcha

* Update authz.go

* Update hcaptcha.go

* Update default.go

* Update recaptcha.go

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

web/src/common/CaptchaPreview.js

@@ -0,0 +1,139 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Button, Col, Input, Modal, Row } from "antd";
+import React from "react";
+import i18next from "i18next";
+import * as UserBackend from "../backend/UserBackend";
+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 }) => {
+  const [visible, setVisible] = React.useState(false);
+  const [captchaImg, setCaptchaImg] = React.useState("");
+  const [captchaToken, setCaptchaToken] = React.useState("");
+  const [secret, setSecret] = React.useState(clientSecret);
+
+  const handleOk = () => {
+    UserBackend.verifyCaptcha(
+      captchaType,
+      captchaToken,
+      secret
+    ).then(() => {
+      setCaptchaToken("");
+      setVisible(false);
+    });
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+
+  const getCaptchaFromBackend = () => {
+    UserBackend.getCaptcha(owner, name, true).then((res) => {
+      if (captchaType === "Default") {
+        setSecret(res.captchaId);
+        setCaptchaImg(res.captchaImage);
+      } else {
+        setSecret(res.clientSecret);
+      }
+    });
+  }
+
+  const clickPreview = () => {
+    setVisible(true);
+    provider.name = name;
+    provider.clientId = clientId;
+    provider.type = captchaType;
+    provider.providerUrl = providerUrl;
+    if (clientSecret !== "***") {
+      provider.clientSecret = clientSecret;
+      ProviderBackend.updateProvider(owner, providerName, provider).then(() => {
+        getCaptchaFromBackend();
+      });
+    } else {
+      getCaptchaFromBackend();
+    }
+  };
+
+  const renderDefaultCaptcha = () => {
+    return (
+      <Col>
+        <Row
+          style={{
+            backgroundImage: `url('data:image/png;base64,${captchaImg}')`,
+            backgroundRepeat: "no-repeat",
+            height: "80px",
+            width: "200px",
+            borderRadius: "3px",
+            border: "1px solid #ccc",
+            marginBottom: 10,
+          }}
+        />
+        <Row>
+          <Input
+            autoFocus
+            value={captchaToken}
+            prefix={<SafetyOutlined />}
+            placeholder={i18next.t("general:Captcha")}
+            onPressEnter={handleOk}
+            onChange={(e) => setCaptchaToken(e.target.value)}
+          />
+        </Row>
+      </Col>
+    );
+  };
+
+  const onSubmit = (token) => {
+    setCaptchaToken(token);
+  };
+
+
+  const renderCheck = () => {
+    if (captchaType === "Default") {
+      return renderDefaultCaptcha();
+    } else {
+      return (
+        <CaptchaWidget
+          captchaType={captchaType}
+          siteKey={clientId}
+          onChange={onSubmit}
+        />
+      );
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Button style={{ fontSize: 14 }} type={"primary"} onClick={clickPreview}>
+        {i18next.t("general:Preview")}
+      </Button>
+      <Modal
+        closable={false}
+        maskClosable={false}
+        destroyOnClose={true}
+        title={i18next.t("general:Captcha")}
+        visible={visible}
+        okText={i18next.t("user:OK")}
+        cancelText={i18next.t("user:Cancel")}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        width={348}
+      >
+        {renderCheck()}
+      </Modal>
+    </React.Fragment>
+  );
+};

web/src/common/CaptchaWidget.js

@@ -0,0 +1,62 @@
+// Copyright 2022 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useEffect } from "react";
+
+export const CaptchaWidget = ({ captchaType, siteKey, onChange }) => {
+  const loadScript = (src) => {
+    var tag = document.createElement("script");
+    tag.async = false;
+    tag.src = src;
+    var body = document.getElementsByTagName("body")[0];
+    body.appendChild(tag);
+  };
+
+  useEffect(() => {
+    switch (captchaType) {
+      case "reCAPTCHA":
+        const reTimer = setInterval(() => {
+          if (!window.grecaptcha) {
+            loadScript("https://recaptcha.net/recaptcha/api.js");
+          }
+          if (window.grecaptcha) {
+            window.grecaptcha.render("captcha", {
+              sitekey: siteKey,
+              callback: onChange,
+            });
+            clearInterval(reTimer);
+          }
+        }, 300);
+        break;
+      case "hCaptcha":
+        const hTimer = setInterval(() => {
+          if (!window.hcaptcha) {
+            loadScript("https://js.hcaptcha.com/1/api.js");
+          }
+          if (window.hcaptcha) {
+            window.hcaptcha.render("captcha", {
+              sitekey: siteKey,
+              callback: onChange,
+            });
+            clearInterval(hTimer);
+          }
+        }, 300);
+        break;
+      default:
+        break;
+    }
+  }, [captchaType, siteKey]);
+
+  return <div id="captcha"></div>;
+};

web/src/common/CountDownInput.js

@@ -18,6 +18,8 @@ import * as Setting from "../Setting";
 import i18next from "i18next";
 import * as UserBackend from "../backend/UserBackend";
 import {SafetyOutlined} from "@ant-design/icons";
+import {authConfig} from "../auth/Auth";
+import { CaptchaWidget } from "./CaptchaWidget";
 
 const { Search } = Input;
 
@@ -30,6 +32,8 @@ export const CountDownInput = (props) => {
   const [checkId, setCheckId] = React.useState("");
   const [buttonLeftTime, setButtonLeftTime] = React.useState(0);
   const [buttonLoading, setButtonLoading] = React.useState(false);
+  const [buttonDisabled, setButtonDisabled] = React.useState(true);
+  const [clientId, setClientId] = React.useState("");
 
   const handleCountDown = (leftTime = 60) => {
     let leftTimeSecond = leftTime
@@ -62,14 +66,19 @@ export const CountDownInput = (props) => {
     setKey("");
   }
 
-  const loadHumanCheck = () => {
-    UserBackend.getHumanCheck().then(res => {
+  const loadCaptcha = () => {
+    UserBackend.getCaptcha("admin", authConfig.appName, false).then(res => {
       if (res.type === "none") {
         UserBackend.sendCode("none", "", "", ...onButtonClickArgs);
-      } else if (res.type === "captcha") {
+      } else if (res.type === "Default") {
         setCheckId(res.captchaId);
         setCaptchaImg(res.captchaImage);
-        setCheckType("captcha");
+        setCheckType("Default");
+        setVisible(true);
+      } else if (res.type === "reCAPTCHA" || res.type === "hCaptcha") {
+        setCheckType(res.type);
+        setClientId(res.clientId);
+        setCheckId(res.clientSecret);
         setVisible(true);
       } else {
         Setting.showMessage("error", i18next.t("signup:Unknown Check Type"));
@@ -98,9 +107,23 @@ export const CountDownInput = (props) => {
     )
   }
 
+  const onSubmit = (token) => {
+    setButtonDisabled(false);
+    setKey(token);
+  }
+
   const renderCheck = () => {
-    if (checkType === "captcha") return renderCaptcha();
-    return null;
+    if (checkType === "Default") {
+      return renderCaptcha();
+    } else {
+      return (
+        <CaptchaWidget
+          captchaType={checkType}
+          siteKey={clientId}
+          onChange={onSubmit}
+        />
+      );
+    }
   }
 
   return (
@@ -116,7 +139,7 @@ export const CountDownInput = (props) => {
             {buttonLeftTime > 0 ? `${buttonLeftTime} s` : buttonLoading ? i18next.t("code:Sending Code") : i18next.t("code:Send Code")}
           </Button>
         }
-        onSearch={loadHumanCheck}
+        onSearch={loadCaptcha}
       />
       <Modal
         closable={false}
@@ -128,8 +151,8 @@ export const CountDownInput = (props) => {
         cancelText={i18next.t("user:Cancel")}
         onOk={handleOk}
         onCancel={handleCancel}
-        okButtonProps={{disabled: key.length !== 5}}
-        width={248}
+        okButtonProps={{disabled: key.length !== 5 && buttonDisabled}}
+        width={348}
       >
         {
           renderCheck()