Merge pull request #122 from hCaptcha/#120-Expose_public_methods_thro…

…ugh_component

Methods exposed

README.md

@@ -149,7 +149,10 @@ return <HCaptcha ref={captchaRef} onLoad={onLoad} sitekey={sitekey} {...props} /
 |Method|Description|
 |---|---|
 |`execute()`|Programmatically trigger a challenge request. Additionally, this method can be run asynchronously and returns a promise with the `token` and `eKey` when the challenge is completed.|
+|`getRespKey()`|Get the current challenge reference ID|
+|`getResponse()`|Get the current challenge response token from completed challenge|
 |`resetCaptcha()`|Reset the current challenge|
+|`setData()`|See enterprise docs.|
 
 
 **NOTE**: Make sure to reset the hCaptcha state when you submit your form by calling the method `.resetCaptcha` on your hCaptcha React Component! Passcodes are one-time use, so if your user submits the same passcode twice then it will be rejected by the server the second time.

examples/src/index.js

@@ -16,6 +16,26 @@ const AsyncDemo = () => {
     }
   };
 
+  const getResponse = () => {
+    try {
+      const res = captchaRef.current.getResponse();
+      console.log("Response: ", res);
+
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const getRespKey = () => {
+    try {
+      const res = captchaRef.current.getRespKey();
+      console.log("Response Key: ", res);
+
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   const handleOpen = () => {
     console.log("HCaptcha [onOpen]: The user display of a challenge starts.");
   };
@@ -40,6 +60,8 @@ const AsyncDemo = () => {
         onChalExpired={handleChallengeExpired}
       />
       <button onClick={executeCaptcha}>Execute asynchronously</button>
+      <button onClick={getRespKey}>Get Response Key</button>
+      <button onClick={getResponse}>Get Response</button>
     </div>
   );
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "types": "types/index.d.ts",
   "main": "dist/index.js",
   "files": [

src/index.js

@@ -265,6 +265,28 @@ class HCaptcha extends React.Component {
       return hcaptcha.execute(captchaId, opts);
     }
 
+    setData (data) {
+      const { captchaId } = this.state;
+
+      if (!this.isReady()) {
+        return;
+      }
+
+      if (data && typeof data !== "object") {
+        data = null;
+      }
+
+      hcaptcha.setData(captchaId, data);
+    }
+
+    getResponse() {
+      return hcaptcha.getResponse(this.state.captchaId);
+    }
+
+    getRespKey() {
+      return hcaptcha.getRespKey(this.state.captchaId)
+    }
+
     render () {
       const { elementId } = this.state;
       return <div ref={this.ref} id={elementId}></div>

tests/hcaptcha.spec.js

@@ -58,8 +58,14 @@ describe("hCaptcha", () => {
     it("has functions", () => {
         expect(typeof instance.execute).toBe("function");
         expect(typeof instance.resetCaptcha).toBe("function");
+        expect(typeof instance.getResponse).toBe("function");
+        expect(typeof instance.getRespKey).toBe("function");
+        expect(typeof instance.setData).toBe("function");
         expect(instance.execute).toBeDefined();
         expect(instance.resetCaptcha).toBeDefined();
+        expect(instance.getResponse).toBeDefined();
+        expect(instance.getRespKey).toBeDefined();
+        expect(instance.setData).toBeDefined();
     });
 
     it("can execute synchronously without arguments", () => {
@@ -120,6 +126,31 @@ describe("hCaptcha", () => {
         expect(window.hcaptcha.remove.mock.calls[0][0]).toBe(MOCK_WIDGET_ID);
     });
 
+    it("can get Response", () => {
+        expect(window.hcaptcha.getResponse.mock.calls.length).toBe(0);
+        const res = instance.getResponse();
+        expect(window.hcaptcha.getResponse.mock.calls.length).toBe(1);
+        expect(window.hcaptcha.getResponse.mock.calls[0][0]).toBe(MOCK_WIDGET_ID);
+        expect(res).toBe(MOCK_TOKEN);
+    });
+
+    it("can get RespKey", () => {
+        expect(window.hcaptcha.getRespKey.mock.calls.length).toBe(0);
+        const res = instance.getRespKey();
+        expect(window.hcaptcha.getRespKey.mock.calls.length).toBe(1);
+        expect(window.hcaptcha.getRespKey.mock.calls[0][0]).toBe(MOCK_WIDGET_ID);
+        expect(res).toBe(MOCK_EKEY);
+    });
+
+    it("can set Data", () => {
+        expect(window.hcaptcha.setData.mock.calls.length).toBe(0);
+        const dataObj = { data: { nested: 1 } };
+        instance.setData(dataObj);
+        expect(window.hcaptcha.setData.mock.calls.length).toBe(1);
+        expect(window.hcaptcha.setData.mock.calls[0][0]).toBe(MOCK_WIDGET_ID);
+        expect(window.hcaptcha.setData.mock.calls[0][1]).toBe(dataObj);
+    });
+
     it("emits onLoad event", () => {
         expect(mockFns.onLoad.mock.calls.length).toBe(0);
         instance.handleOnLoad();

types/index.d.ts

@@ -39,6 +39,9 @@ declare class HCaptcha extends React.Component<HCaptchaProps, HCaptchaState> {
   resetCaptcha(): void;
   renderCaptcha(): void;
   removeCaptcha(): void;
+  getRespKey(): string;
+  getResponse(): string;
+  setData(data: object): void;
   execute(opts: { async: true }): Promise<ExecuteResponse>;
   execute(opts?: { async: false }): void;
   execute(opts?: { async: boolean }): Promise<ExecuteResponse> | void;