diff --git a/doc/source/captcha_service/configuration_of_a_new_site.rst b/doc/source/captcha_service/configuration_of_a_new_site.rst index 39ba12a..6f52b8f 100644 --- a/doc/source/captcha_service/configuration_of_a_new_site.rst +++ b/doc/source/captcha_service/configuration_of_a_new_site.rst @@ -5,5 +5,71 @@ Configuration of a new Site Getting Started --------------- -Configuration Options ---------------------- +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!" + }; + } diff --git a/doc/source/captcha_service/images/AdvanceOptions.png b/doc/source/captcha_service/images/AdvanceOptions.png new file mode 100644 index 0000000..49d316d Binary files /dev/null and b/doc/source/captcha_service/images/AdvanceOptions.png differ diff --git a/doc/source/captcha_service/images/ExampleOptions.png b/doc/source/captcha_service/images/ExampleOptions.png new file mode 100644 index 0000000..ffcfb63 Binary files /dev/null and b/doc/source/captcha_service/images/ExampleOptions.png differ diff --git a/doc/source/captcha_service/images/NewSite.png b/doc/source/captcha_service/images/NewSite.png new file mode 100644 index 0000000..95370c1 Binary files /dev/null and b/doc/source/captcha_service/images/NewSite.png differ diff --git a/doc/source/captcha_service/images/ViewDeployment.png b/doc/source/captcha_service/images/ViewDeployment.png new file mode 100644 index 0000000..9c4d343 Binary files /dev/null and b/doc/source/captcha_service/images/ViewDeployment.png differ