Skip to content

Using the Client side SDK (cSDK)

After installing the cSDK, you can use it in your website/webapp.

Using the iosecure (iosec) object in a node.js environment

First, import the required objects from the @iocaptcha/client package. 

import { Iosec } from "@iocaptcha/client";

Then, initialize the Iosec object. 

const iosec = new Iosec();

You need to create a callback that will receive the tokens generated by the SDK, as following; 

const tokenCb = (token) => {
  console.log("got iosec token:", token);
}

Additionally, you can create a callback that will receive errors from the SDK, shall one happen.

const errorCb = (err) => {
  console.error("got iosec error:", err);
}

Then, create an IosecOptions object specifying the options you want to use. You need to find your endpoint's Public Key in order to create IoSec options, refer to the dashboard.

The second parameter specifies the action, it can be whatever you choose.

The third and fourth parameters are the callbacks you created earlier. 

const options = new IosecOptions("ENDPOINT-PUBLIC-KEY", "action", tokenCb, errorCb);
// OR
const options = {
  public_key: "ENDPOINT-PUBLIC-KEY",
  action: "action",
  callbackTokenRefresh: tokenCb,
  callbackError: errorCb
};

To start the iosecure process, call the execute method on the Iosec object, passing the options object you created earlier. 

let widget = iosec.execute(options);

(OPTIONAL) After creation, you can verify whether it succeeded or not. 

if (widget instanceof Error) {
  console.error("Error during widget creation!");
  throw widget;
} else {
  console.log("Widget created successfully.")
}

Implicit DOM insertion

By default, iosec.execute creates a new div object within the document body, and inserts the widget into it. The widget is invisible, and is only used to create the iframe that contains the widget.

If you wish to configure this behaviour, you can call iosec.execute_with_implicit_dom by passing the DOM selector of the element you want to insert the widget into. 

<body>
    <p>iosecure will be rendered in the box below, however it will not be visible.</p>
    <div class="iosec"></div>
</body>

iosec.execute_with_implicit_dom(".iosec", options);

Sending the tokens to the server

After retrieving a token from the cSDK callback, you need to send it to your HTTP server for verification, for this you can use the server side SDKs.

Example: 

let globalToken = null;

const tokenCb = async (token) => {
  globalToken = token;
}

const login = async (username, pass) => {
  if (globalToken) {
    let resp = await fetch("/login", {username, pass, token: globalToken});
    if (resp.ok) {
      alert("Login successful!");
    } else {
      alert("Login failed!");
    }
  } else {
    alert("Please wait for the verification to complete.");
  }
}

View the server-side implementation here