https://github.com/alicw/recaptchav3-demo
reCAPTCHA v3 demonstration
https://github.com/alicw/recaptchav3-demo
Last synced: 5 months ago
JSON representation
reCAPTCHA v3 demonstration
- Host: GitHub
- URL: https://github.com/alicw/recaptchav3-demo
- Owner: AliCW
- Created: 2024-08-11T14:45:27.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-27T21:58:23.000Z (almost 2 years ago)
- Last Synced: 2025-06-20T23:06:28.482Z (about 1 year ago)
- Language: Python
- Size: 23.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# reCAPTCHAv3-demo
Google reCAPTCHA-v3 demonstration (https://www.google.com/recaptcha/about/) utilising a backend in Django & frontend with React JS & webpack (https://webpack.js.org/). Success & failure messages are passed to the user with a passing score, datestamp and failure message (if applicable).
# Setup
Clone the repository:
git clone https://github.com/AliCW/reCAPTCHAv3-demo.git
Register a new site with reCAPTCHA & select version 3 (https://www.google.com/recaptcha/admin/create) - for the purposes of this demonstration, the only domain added is `localhost`. Be sure to make note of the `Site Key` & `Secret Key`.
## Backend
Install sqlite3:
sudo apt-get install sqlite3 libsqlite3-dev
Django utilises its own `SECRET_KEY` that needs to be generated & obscured; The repo uses dotenv to obscure the key. Install dotenv by navigating to `\be\reCAPTCHAv3\` and type:
python3 pip install python-dotenv
Create a file called `.env` in ` \reCAPTCHAv3\ ` (not ` \reCAPTCHAv3\reCAPTCHAv3\ `) and add the below:
SECRET_KEY = ''
To generate a new key, type the below the enter the admin shell:
django-admin shell
Followed by the below to get a new key; Import the ` get_random_secret_key ` function with the below:
from django.core.management.utils import get_random_secret_key
Then run the function to get the key itself:
get_random_secret_key()
Copy the key into your dotenv file as your `SECRET_KEY` string:
SECRET_KEY = 'this_is_my_key'
### Insert your google api secret key into the database with the below commands:
Sync the database to add a table for your api key:
python3 manage.py migrate --run-syncdb
Start the server shell:
python3 manage.py shell
Import the insertion function for the key:
from test_demo.models import SendKey
Envoke the insertion function with your api key:
key = SendKey(key='api_secret_key_here')
Save the api key to the database:
key.save()
Check if it has saved successfully, assign the key to a variable:
instance = SendKey.objects.get(id=1)
Print it:
print(instance)
Start the server with the below:
python3 manage.py runserver
## Frontend
You need to add your google api site key to ` ./fe/src/components/Main.jsx `:
{load && }
Install the required packages by navigating to `/fe` and running:
npm init
To start the frontend, run:
npm start
The default address is set to `localhost:3000`, this should now work in your browser.