feat: add classic call method

Candinya · Candinya · commit 8611dbeeb613 · 2024-04-02T12:45:39.000+08:00
diff --git a/index.html b/index.html
@@ -29,14 +29,33 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module">
-      import { NewCaptcha } from "/lib/main.tsx";
+    <!-- Module 调用法 -->
+    <!--    <script type="module">-->
+    <!--      import { NewCaptcha } from "/lib/main.tsx";-->
 
-      NewCaptcha({
-        el: document.getElementById("root"),
-        instance: "http://localhost:8080",
-        siteKey: "test",
-      });
+    <!--      NewCaptcha({-->
+    <!--        el: document.getElementById("root"),-->
+    <!--        instance: "http://localhost:8080",-->
+    <!--        siteKey: "test",-->
+    <!--      });-->
+    <!--    </script>-->
+
+    <!-- Classic 调用法 -->
+    <script type="module" async="async" src="/lib/main.tsx"></script>
+    <script>
+      // 加载验证码
+      let loadInterval;
+      loadInterval = setInterval(() => {
+        if (window.nyacap) {
+          window.nyacap.render(document.getElementById("root"), {
+            sitekey: "http://localhost:8080/widget?sitekey=test",
+            callback: (key) => {
+              alert(`验证成功: ${key}`);
+            },
+          });
+          clearInterval(loadInterval);
+        }
+      }, 100);
     </script>
   </body>
 </html>
diff --git a/lib/components/Captcha/index.tsx b/lib/components/Captcha/index.tsx
@@ -11,14 +11,23 @@ interface CaptchaProps {
   siteKey: string;
   maxDots: number;
   maxFailCount: number;
-  inputName: string;
+
+  // 两种调用方式：构建一个 input ，或者用 callbacks
+  inputName?: string;
+
+  cbSuccess?: (key: string) => void;
+  cbFail?: () => void;
+  cbTimeout?: () => void;
 }
 const Captcha = ({
   instance,
   siteKey,
   maxDots,
   maxFailCount,
   inputName,
+  cbSuccess,
+  cbFail,
+  // cbTimeout, // TODO
 }: CaptchaProps) => {
   const [captKey, setCaptKey] = useState("");
   const [captStatus, setCaptStatus] = useState<Status>("default");
@@ -69,6 +78,9 @@ const Captcha = ({
       if (res.s) {
         setCaptStatus("success");
         captAutoRefreshCount.current = 0;
+        if (cbSuccess) {
+          cbSuccess(captKey);
+        }
       } else {
         if (captAutoRefreshCount.current > maxFailCount) {
           // 错误次数太多，歇一会吧
@@ -78,6 +90,9 @@ const Captcha = ({
           setCaptStatus("error");
           captAutoRefreshCount.current += 1;
         }
+        if (cbFail) {
+          cbFail();
+        }
       }
     } catch (e) {
       console.log(e);
@@ -163,16 +178,18 @@ const Captcha = ({
         </div>
       </Fragment>
 
-      <input
-        style={{
-          visibility: "hidden",
-        }}
-        name={inputName}
-        value={captStatus === "success" ? captKey : ""}
-        type="password"
-        required
-        readOnly
-      />
+      {inputName && (
+        <input
+          style={{
+            visibility: "hidden",
+          }}
+          name={inputName}
+          value={captStatus === "success" ? captKey : ""}
+          type="password"
+          required
+          readOnly
+        />
+      )}
     </>
   );
 };
diff --git a/lib/main.tsx b/lib/main.tsx
@@ -9,15 +9,25 @@ interface NewCaptchaProps {
   siteKey: string;
   maxDots?: number;
   maxFailCount?: number;
+
+  // 两种调用方式：构建一个 input ，或者用 callbacks
   inputName?: string;
+
+  cbSuccess?: (key: string) => void;
+  cbFail?: () => void;
+  cbTimeout?: () => void;
 }
 export const NewCaptcha = ({
   el,
   instance,
   siteKey,
   maxDots = 5,
   maxFailCount = 3,
+
   inputName = "captcha",
+  cbSuccess,
+  cbFail,
+  cbTimeout,
 }: NewCaptchaProps) =>
   ReactDOM.createRoot(el).render(
     <React.StrictMode>
@@ -27,8 +37,41 @@ export const NewCaptcha = ({
         maxDots={maxDots}
         maxFailCount={maxFailCount}
         inputName={inputName}
+        cbSuccess={cbSuccess}
+        cbFail={cbFail}
+        cbTimeout={cbTimeout}
       />
     </React.StrictMode>,
   );
 
-export default NewCaptcha;
+// Classic captcha wrapper
+(window as any).nyacap = {
+  render: (
+    el: HTMLElement,
+    options: {
+      sitekey: string; // https://mini.nyacap.com/widget?sitekey=demo
+      theme?: "light" | "dark";
+      callback?: (key: string) => void;
+      "expired-callback"?: () => void;
+      "error-callback"?: () => void;
+    },
+  ) => {
+    const parsedSiteKey = new URL(options.sitekey);
+    const instance = parsedSiteKey.origin;
+    const siteKey = parsedSiteKey.searchParams.get("sitekey");
+
+    if (siteKey === null) {
+      throw new Error("未定义 sitekey");
+    }
+
+    NewCaptcha({
+      el,
+      instance,
+      siteKey,
+      inputName: undefined,
+      cbSuccess: options.callback,
+      cbFail: options["error-callback"],
+      cbTimeout: options["expired-callback"],
+    });
+  },
+};
