AI Captcha JS Loader

A JavaScript library specifically designed for loading AI Captcha with built-in error handling, retry mechanism, and framework integrations.

Installation

npm install @aicaptcha/js-loader

Basic Usage

Simple AI Captcha Loading

import { CaptchaLoader } from '@aicaptcha/js-loader';

// Load AI Captcha SDK with basic configuration
const captcha = await CaptchaLoader({
  queryParams: {
    hl: 'your language code'
  }
});

console.log('AI Captcha SDK loaded successfully:', captcha);

Advanced Configuration

import { CaptchaLoader } from '@aicaptcha/js-loader';

// Load AI Captcha with custom options
const captcha = await CaptchaLoader({
  queryParams: {
    theme: 'dark',
    size: 'compact',
    hl: 'en'
  },
  timeout: 15000,
  retryAttempts: 3,
  onLoad: () => console.log('AI Captcha SDK loaded!'),
  onError: (error) => console.error(' AI Captcha SDK error:', error)
});

Framework Integration

React

import React, { useEffect, useState, useRef } from 'react';
import { CaptchaLoader } from '@aicaptcha/js-loader';

function CaptchaComponent() {
  const [captcha, setCaptcha] = useState(null);
  const [loading, setLoading] = useState(true);
 const captchaIdRef = useRef<string | null>(null);
  useEffect(() => {
    const loadCaptcha = async () => {
      try {
        const captchaInstance = await CaptchaLoader({
          queryParams: {
            theme: 'light'
          }
        });
        // init captacha dom 
         !captchaIdRef.current &&  captchaInstance.render('your-dom-id', {
           sitekey: 'your-sitekey-here',
           // your functions
         })
          captchaIdRef.current = captchaInstance
        setCaptcha(captchaInstance);
      } catch (error) {
        console.error('Failed to load captcha:', error);
      } finally {
        setLoading(false);
      }
    };

    loadCaptcha();
  }, []);

  if (loading) return <div>Loading captcha...</div>;
  
  return <div id="your-dom-id"></div>;
}

Vue 3

<template>
  <div>
    <div v-if="loading">Loading captcha...</div>
    <div id="captcha-container" v-else></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { CaptchaLoader } from '@aicaptcha/js-loader'

const loading = ref(true)
const captcha = ref(null)

onMounted(async () => {
  try {
    captcha.value = await CaptchaLoader({
      queryParams: {
        theme: 'light'
      }
    })
  } catch (error) {
    console.error('Failed to load captcha:', error)
  } finally {
    loading.value = false
  }
})
</script>

Angular

import { Component, OnInit } from '@angular/core';
import { CaptchaLoader } from '@aicaptcha/js-loader';

@Component({
  selector: 'app-captcha',
  template: `
    <div *ngIf="loading">Loading captcha...</div>
    <div id="captcha-container" *ngIf="!loading"></div>
  `
})
export class CaptchaComponent implements OnInit {
  loading = true;
  captcha: any = null;

  async ngOnInit() {
    try {
      this.captcha = await CaptchaLoader({
        queryParams: {
          sitekey: 'your-sitekey-here',
          theme: 'light'
        }
      });
    } catch (error) {
      console.error('Failed to load captcha:', error);
    } finally {
      this.loading = false;
    }
  }
}

Next.js

import { useEffect, useState } from 'react';
import { CaptchaLoader } from '@aicaptcha/js-loader';

export default function CaptchaPage() {
  const [captcha, setCaptcha] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Only load on client side
    if (typeof window !== 'undefined') {
      CaptchaLoader({
        queryParams: {
          theme: 'light'
        }
      }).then(captchaInstance => {
        setCaptcha(captchaInstance);
        setLoading(false);
      }).catch(error => {
        console.error('Failed to load captcha:', error);
        setLoading(false);
      });
    }
  }, []);

  if (loading) return <div>Loading captcha...</div>;
  
  return <div id="captcha-container"></div>;
}

Error Handling

import { CaptchaLoader, LoaderError } from '@aicaptcha/js-loader';

try {
  const captcha = await CaptchaLoader({
    queryParams: {
    }
  });
} catch (error) {
  if (error instanceof LoaderError) {
    console.log('Error code:', error.code);
    console.log('Error details:', error.details);
    
    switch (error.code) {
      case 'TIMEOUT':
        console.log('Captcha loading timed out');
        break;
      case 'NETWORK_ERROR':
        console.log('Network error loading captcha');
        break;
      case 'GLOBAL_VARIABLE_NOT_FOUND':
        console.log('AI Captcha global variable not found');
        break;
      case 'LOAD_FAILED':
        console.log('Failed to load after all retries');
        break;
    }
  }
}

API Reference

CaptchaLoader(options)

Main function to load AI Captcha.

Parameters

| Option | Type | Default | Description | |--------|------|---------|-------------| | queryParams | CaptchaLoaderOptions | {} | Captcha configuration options | | queryParams.theme | 'light' \| 'dark' | 'light' | Captcha theme | | queryParams.size | 'normal' \| 'compact' \| 'invisible' | 'normal' | Captcha size | | queryParams.hl | string | 'en' | Language code (en, zh, fr, etc.) | | timeout | number | 30000 | Timeout in milliseconds | | retryAttempts | number | 3 | Number of retry attempts on failure | | retryDelay | number | 500 | Base delay between retries (exponential backoff) | | onLoad | function | undefined | Callback function called on successful load | | onError | function | undefined | Callback function called on final error | | onRetry | function | undefined | Callback function called on each retry attempt |

Returns

• Promise<object>: Returns the AI Captcha instance

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+
• Node.js 14+ (for SSR)

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our repository.

License

MIT