@startupjs/recaptcha

0.55.8 • Public • Published

@startupjs/recaptcha

library for displaying and interacting with Google ReCaptcha

Install the module

yarn add @startupjs/recaptcha

Init module on server

Add the following lines to server/index.js:

  import initRecaptcha from '@startupjs/recaptcha/server'

Add to the startupjsServer function:

  initRecaptcha(ee, options)

The options argument accepts an object with a type field, that specify which reCAPTCHA type you want to use (possible types: enterprise or v3)

In the getHead function, add a call to the getRecaptchaHead function:

  import { getRecaptchaHead } from '@startupjs/recaptcha/server'

  function getHead (req) {
    return `
      // ...
      ${getRecaptchaHead(req)}
      // ...
    `
}

Configuring config.json

In config.json file of your project, you need to add for reCAPTCHA Enterprise:

  {
    "RECAPTCHA_SECRET_KEY": "YOUR_SECRET_KEY",
    "RECAPTCHA_ENTERPRISE_NORMAL_SITE_KEY": "YOUR_SITE_KEY",
    "RECAPTCHA_ENTERPRISE_INVISIBLE_SITE_KEY": "YOUR_SITE_KEY",
    "GOOGLE_CLOUD_PROJECT_ID": "ID_YOUR_CLOUD_PROJECT"
  }

RECAPTCHA_SECRET_KEY created here https://console.cloud.google.com/apis/credentials RECAPTCHA_ENTERPRISE_NORMAL_SITE_KEY и RECAPTCHA_ENTERPRISE_INVISIBLE_SITE_KEY - https://cloud.google.com/recaptcha-enterprise/docs/create-key

For reCAPTCHA v3, it will be enough:

  {
    "RECAPTCHA_SECRET_KEY": "YOUR_SECRET_KEY",
    "RECAPTCHA_SITE_KEY": "YOUR_SITE_KEY"
  }

These keys are created in the Google Admin Console.

Usage

Client

  import { Recaptcha } from '@startupjs/recaptcha'
  const [recaptchaVerified, setRecaptchaVerified] = useState(false)
  const [email, setEmail] = useState('')

  const ref = useRef()

  const openRecaptcha = () => {
    if (!email) return

    ref.current.open()
  }

  const onVerify = async recaptcha => {
    try {
      const res = await axios.post('/api/subscribe-to-mailing', {
        recaptcha,
        email
      })
      console.log('Response: ', res.data)
      setRecaptchaVerified(res.data)
    } catch (err) {
      console.error(err.response.data)
    }
  }

  return pug`
    Div.root
      TextInput.emailInput(
        label='Your email'
        value=email
        onChangeText=setEmail
      )
      Recaptcha(
        ref=ref
        onVerify=onVerify
        onLoad=() => console.log('onLoad')
        onExpire=() => console.log('onExpire')
        onError=error => console.log('onError', error)
        onClose=() => console.log('onClose')
      )
      if recaptchaVerified
        Span.label Thank you for subscribing
      Button(
        onPress=openRecaptcha
        disabled=recaptchaVerified
      ) Subscribe
  `

Server

import { checkRecaptcha } from '@startupjs/recaptcha/server'

export default function initRoutes (router) {
  router.post('/api/subscribe-to-mailing', async function (req, res) {
    const { recaptcha, email } = req.body

    const isVerified = await checkRecaptcha(recaptcha)

    if (!isVerified) {
      return res.status(403).send(isVerified)
    }

    // Do something with email subscription...
  })
}

Recaptcha component props

The Recaptcha component takes parameters from official Google reCAPTCHA documentation

  • variant [String] - The variant of the widget (invisible, normal or compact). Default: invisible
  • theme [String] - The color theme of the widget (dark or light). Default: light
  • baseUrl [String] - The URL (domain) configured in the reCAPTCHA setup. (ex. http://my.domain.com). Default: your BASE_URL from @env
  • lang [String] - Language code. Default: en
  • onLoad [Function] - A callback function, executed when the reCAPTCHA is ready to use
  • onVerify [Function(token)] - A callback function, executed when the user submits a successful response. The recaptcha response token is passed to your callback
  • onExpire [Function] - A callback function, executed when the reCAPTCHA response expires and the user needs to re-verify
  • onError [Function(error)] - A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry
  • onClose [Function] - (Experimental) A callback function, executed when the Modal is closed

Advanced use

  import { checkDataRecaptcha } from '@startupjs/recaptcha/server'

checkDataRecaptcha(recaptcha) is an advanced variant of checkRecaptcha(recaptcha) function that returns an object with the original Google API response. Different reCAPTCHA types return different data structures in the response.

Readme

Keywords

none

Package Sidebar

Install

npm i @startupjs/recaptcha

Weekly Downloads

79

Version

0.55.8

License

MIT

Unpacked Size

39.3 kB

Total Files

23

Last publish

Collaborators

  • cray0000
  • yska
  • zag2art
  • fctsvirus
  • maestro.sc
  • byshock