Genuine Captcha Usage Demo

This is a minimalist example showing how to implement Genuine Captcha in a completely offline-usable HTML file.

Live Demo

CAPTCHA Challenge

Loading CAPTCHA...

Implementation Guide

Follow these steps to implement Genuine Captcha in your own projects:

API Endpoints

Genuine Captcha provides two main endpoints:

GET https://api.genuine-captcha.io/api/captcha/create
GET https://api.genuine-captcha.io/api/captcha/verify

1. Generate a CAPTCHA

First, make a request to generate a new CAPTCHA challenge:

JavaScript 
// Store the captcha secret
let captchaSecret = '';

// Function to load a new captcha
function loadCaptcha() {
    document.getElementById('captcha-loading').style.display = 'block';
    document.getElementById('captcha-image').style.display = 'none';
    document.getElementById('captcha-input-container').style.display = 'none';
    document.getElementById('captcha-result').style.display = 'none';
    document.getElementById('refresh-captcha').style.display = 'none';
    
    fetch('https://api.genuine-captcha.io/api/captcha/create')
        .then(response => response.json())
        .then(data => {
            const imageType = 'image/png';
            const base64Image = `data:${imageType};base64,${data.ImageAsBase64}`;
            document.getElementById('captcha-image').src = base64Image;
            
            // Store the secret for verification later
            captchaSecret = data.SecretAsBase64;
            
            // Show the captcha and input field
            document.getElementById('captcha-image').style.display = 'block';
            document.getElementById('captcha-loading').style.display = 'none';
            document.getElementById('captcha-input-container').style.display = 'block';
            document.getElementById('refresh-captcha').style.display = 'inline-block';
        })
        .catch(error => {
            console.error("Error loading captcha:", error);
            document.getElementById('captcha-loading').innerHTML = 
                "Error loading CAPTCHA. Please try again.";
        });
}

2. Verify the CAPTCHA

After the user enters their solution, verify it with the API:

JavaScript 
// Function to verify the captcha solution
function verifyCaptcha() {
    const solution = document.getElementById('captcha-solution').value.trim();
    if (!solution) {
        alert('Please enter your answer to the CAPTCHA');
        return;
    }

    const resultElement = document.getElementById('captcha-result');
    resultElement.style.display = 'block';
    
    fetch(`https://api.genuine-captcha.io/api/captcha/verify?captchaSolution=${solution}&captchaSecret=${encodeURIComponent(captchaSecret)}`, {
        mode: 'cors'
    })
    .then(response => {
        if (response.ok) {
            resultElement.className = 'success';
            resultElement.innerHTML = '<strong>Success!</strong> CAPTCHA verified correctly.';
            document.getElementById('captcha-input-container').style.display = 'none';
        } else {
            resultElement.className = 'error';
            resultElement.innerHTML = '<strong>Error:</strong> Incorrect solution. Please try again.';
        }
    })
    .catch(error => {
        console.error("Error verifying captcha:", error);
        resultElement.className = 'error';
        resultElement.innerHTML = '<strong>Error:</strong> Failed to verify. Please try again.';
    });
}

3. Initialize and Add Event Listeners

Set up the CAPTCHA when the page loads:

JavaScript 
// Initialize when the page loads
document.addEventListener('DOMContentLoaded', () => {
    // Load the initial captcha
    loadCaptcha();
    
    // Add event listeners
    document.getElementById('verify-captcha').addEventListener('click', verifyCaptcha);
    document.getElementById('refresh-captcha').addEventListener('click', loadCaptcha);
    document.getElementById('captcha-solution').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            verifyCaptcha();
        }
    });
});
Important Notes