forked from docs/internal-documentation
Added Captcha stuff
This commit is contained in:
parent
f42d9d921c
commit
851f19eefd
@ -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!"
|
||||
};
|
||||
}
|
||||
|
BIN
doc/source/captcha_service/images/AdvanceOptions.png
Normal file
BIN
doc/source/captcha_service/images/AdvanceOptions.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
BIN
doc/source/captcha_service/images/ExampleOptions.png
Normal file
BIN
doc/source/captcha_service/images/ExampleOptions.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 83 KiB |
BIN
doc/source/captcha_service/images/NewSite.png
Normal file
BIN
doc/source/captcha_service/images/NewSite.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 78 KiB |
BIN
doc/source/captcha_service/images/ViewDeployment.png
Normal file
BIN
doc/source/captcha_service/images/ViewDeployment.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 90 KiB |
Loading…
x
Reference in New Issue
Block a user