Catalog npm
PACKAGE EXPLORERView in registry

@007captcha/client

npm

007captcha client-side widget and shape analysis engine

Versions collected1
Direct dependencies0From release 0.1.0
Last observed20 Oct, 21:53 UTC

README

Current package documentation

007captcha

@007captcha/client

Browser widget for 007captcha. Renders challenges, captures user input, and communicates with the server for verification.

npm license


Installation

pnpm add @007captcha/client

Or via script tag (UMD):

<script src="https://unpkg.com/@007captcha/client/dist/umd/index.global.js"></script>

Usage

ES Module

import { render } from '@007captcha/client';

const widget = render({
  siteKey: 'your-secret-key',
  container: '#captcha',
  method: 'ball',
  serverUrl: window.location.origin,
  onSuccess: (token) => {
    fetch('/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });
  },
});

Script Tag

<div id="captcha"></div>
<script src="https://unpkg.com/@007captcha/client/dist/umd/index.global.js"></script>
<script>
  OOSevenCaptcha.render({
    siteKey: 'your-secret-key',
    container: '#captcha',
    method: 'ball',
    serverUrl: window.location.origin,
    onSuccess(token) {
      console.log('Verified:', token);
    },
  });
</script>

Form Integration

The widget creates a hidden <input name="captcha-token"> in the DOM. For standard form submissions, you can also retrieve the token programmatically:

const token = widget.getToken();

Challenge Methods

MethodDescription
'ball'Follow a moving ball with your cursor in real-time
'shape'Draw a randomly assigned shape (circle, triangle, or square)
'maze'Navigate a procedurally generated maze from entrance to exit
'random'The server picks a random method each time

All methods require a serverUrl. The server handles session creation, analysis, and token signing — the client is a rendering and input-capture layer.

Configuration

render(config): CaptchaWidget

OptionTypeDefaultDescription
siteKeystringrequiredSecret key shared with server
containerstring | HTMLElementrequiredMount target (CSS selector or element)
method'ball' | 'shape' | 'maze' | 'random''random'Challenge method
serverUrlstringrequiredBase URL for the captcha server endpoints
theme'light' | 'dark' | 'auto''light'Widget color theme
timeLimitnumbervariesOverride time limit in ms
onSuccess(token: string) => void—Called with signed token on pass
onFailure(error: Error) => void—Called on challenge failure
onExpired() => void—Called when a token expires

CaptchaWidget

widget.getToken()   // Returns the current signed token (string)
widget.reset()      // Reset and show a new challenge
widget.destroy()    // Remove the widget from the DOM entirely

Theming

The widget supports 'light', 'dark', and 'auto' themes. In 'auto' mode, it follows the user's system preference via prefers-color-scheme.

render({ theme: 'dark', /* ... */ });

Requirements

  • A running @007captcha/server instance with the appropriate endpoints. See the server package or the Express example for setup.
  • The siteKey must match between client and server.

License

MIT

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Versions 1

Collected releases
VersionPublishedDirect dependenciesOpen version
0.1.0Registry latest29 Mar 20260

Package advisories

0
No matching advisories collected

This describes our collected data; it is not a security assessment.

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 21:53 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package:c7e5e53ac763a6d700086f82eaf7b76af43c398cf6f3816897f274f9ea993be4