Added Captcha stuff

This commit is contained in:
Gode, Sebastian 2024-02-23 11:09:12 +00:00
parent f42d9d921c
commit 851f19eefd
5 changed files with 68 additions and 2 deletions

View File

@ -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!"
};
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 83 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB