Socket
Socket
Sign inDemoInstall

face-captcha-core

Package Overview
Dependencies
3
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

face-captcha-core


Version published
Maintainers
1
Created

Readme

Source

@slider-captcha

Generate a puzzle slider captcha and display with React component.

Installation

React frontend:

npm i @slider-captcha/react

Backend:

npm i @slider-captcha/core

Usage

React:

import SliderCaptcha from '@slider-captcha/react';

function verifiedCallback(token) {
  console.log('Captcha token: ' + token);
}

function App() {
  return (
    <SliderCaptcha
      create="https://example.com/captcha/create"
      verify="https://example.com/captcha/verify"
      callback={verifiedCallback}
    />
  );
}

Express:

var sliderCaptcha = require('@slider-captcha/core');

app.get('/captcha/create', function (req, res) {
  sliderCaptcha.create()
    .then(function ({data, solution}) {
      req.session.captcha = solution;
      req.session.save();
      res.status(200).send(data);
    });
});

app.post('/captcha/verify', function (req, res) {
  sliderCaptcha.verify(req.session.captcha, req.body)
    .then(function (verification) {
      if (verification.result === 'success') {
        req.session.token = verification.token;
        req.session.save();
      }
      res.status(200).send(verification);
    });
});

React component props

NameTypeDefaultDescription
callbackfunc(token) => console.log(token)Called with token on successful verification
createstring or funccaptcha/createEither the URL to fetch data from or a function () returning a promise which resolves with { background, slider } as PNG buffers
verifystring or funccaptcha/verifyEither the URL to fetch data from or a function (response, trail) returning a promise which resolves with { result, token }
text{ anchor: string, challenge: string }{ anchor: 'I am human', challenge: 'Slide to finish the puzzle' }Text used for captcha
variantstringlightUse 'light' for light theme, 'dark' for dark theme

Light:

Dark:

Create captcha options

sliderCaptcha.create({option: value})

NameTypeDefaultDescription
imagebufferrandomly generated patternBackground image used for captcha - resized to 250x150
fillstring#000Color used in overlay of puzzle piece on background
strokestring#fffColor for outline of puzzle piece
strokeWidthstring0.4Puzzle piece outline width
opacitystring0.5Opacity of puzzle piece overlay on background
distortboolfalseApply distortion to the puzzle piece
rotateboolfalseApply a random rotation to the puzzle piece

With rotation and distortion:

Verify captcha options

sliderCaptcha.verify(captcha, {response, trail: {x, y}}, {option: value})

NameTypeDefaultDescription
tolerancenumber7Allowed deviation from true captcha value

Keywords

FAQs

Last updated on 28 Nov 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc