===========================
Configuration of a new Site
===========================

Getting Started
---------------

1. Open the mCaptcha website: https://captcha.otc-service.com/
2. Log-In with your credentials
3. Click on "New Site"

.. figure:: images/NewSite.png

4. Click on "Advance Options" for specifying more difficulty breakpoints

.. figure:: images/AdvanceOptions.png

5. Specify a description, cooldown Duration and difficulty levels

A good start for a contact formular would be the following paramneters:

.. figure:: images/ExampleOptions.png

6. Now you should be able to see your Captcha solution working by clicking on the "View Deployment" button.

.. figure:: images/ViewDeployment.png


Configuring your Frontend-Website
---------------------------------

As you now have properly configured everything on mCaptcha you will need to start including the Captcha in your frontend application.
For this you will need to aquire your sitekey and the URL to the captcha. You can simply copy the URL from the "View Deployment" button. It should look something like this: https://captcha.otc-service.com/widget/?sitekey=RxZhnXBKERnTNRUAuNABst0v1Zvj5DZe

Once you have obtained this head over to GitHub and follow the instructions to include the Captcha on your page based on your used JavaScript framework: https://github.com/mCaptcha/glue

Configuring your backend
------------------------

Your backend needs to check the validity of the captcha token which the user generated.
You can do this easily by sending an request using the generated token from the client, your sitekey and your secret key to mCaptcha.

.. code:: Javascript

    const postData = {
      token: captcha_token,
      key: captcha_sitekey,
      secret: process.env.MCAPTCHA_SECRET
    };

    const response = await fetch(process.env.MCAPTCHA_URL + 'api/v1/pow/siteverify', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(postData)
    });

Send the request to https://captcha.otc-service.com/api/v1/pow/siteverify

The response then includes a data field and must have the valid field set to true.

.. code:: Javascript

    if (!response.ok) {
      throw new Error('Captcha response was not ok');
    }

    const data = await response.json();
    if (data["valid"] !== true) {
      return {
        status: "fail",
        message: "Captcha verification failed!"
      };
    }