react-google-recaptcha3

    1.0.4 • Public • Published

    react-google-recaptcha3

    React service for Google reCAPTCHA 3

    See Demo

    Installation

    Run following command to install react-google-recaptcha3

    npm i react-google-recaptcha3

    How to use?

    reCAPTCHA v3 introduces a new concept: actions. When you specify an action name in each place you execute reCAPTCHA you enable two new features:

    • a detailed break-down of data for your top ten actions in the admin console
    • adaptive risk analysis based on the context of the action (abusive behavior can vary) Importantly, when you verify the reCAPTCHA response you should also verify that the action name matches the one you expect.

    Front

    At first you need to import ReactRecaptcha3 to your component

    import ReactRecaptcha3 from 'react-google-recaptcha3';

    Pass your siteKey in useEffect hook

      useEffect(() => {
        ReactRecaptcha3.init(YOUR_SITE_KEY)    
      }, [])
    

    The init function will return Promise with status parameter that will indicate script loaded status

      useEffect(() => {   
        ReactRecaptcha3.init(YOUR_SITE_KEY).then(status => {
          // status: success/error
          // success - script is loaded and greaptcha is ready
          // error - script is not loaded
          console.log(status)
        })
       }, [])
    

    On form submit generate recaptcha token (it will be checked in backend) using siteKey

    
     const handleSubmit = () => {
        ReactRecaptcha3.getToken().then(token => {
          console.log(token)
          // send token with form data
          // dataToSend.token = token
          // fetch(url, { method: 'POST', body: JSON.stringify(dataToSend) })
        }, error => {
          // handle error here
          console.log(error)      
        })
      }
    

    Execute getToken with action name. See more here

    ReactRecaptcha3.getToken({ action: 'homepage' })
    

    Destroy recaptcha

      ReactRecaptcha3.destroy()
    

    Backend

    In backend we need to verify given token using secretKey.

    node.js example

    const request = require('request-promise');
    
     const secretKey = YOUR_RECAPTCHA_SECRET_KEY;
     const userIp = 'USER_IP';
         request.get(
            {
                url: `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${recaptchaToken}&remoteip=${userIp}`,
            }).then((response) => {
    
            // If response false return error message
            if (response.success === false) {
                return res.json({success: false, error: 'Recaptcha token validation failed'});
            }
            // otherwise continue handling/saving form data
            next();
        })
    

    PHP example

    $recaptchaToken = isset($_POST['recaptchaToken']) ? $_POST['recaptchaToken'] : false;
    
      if(!$recaptchaToken) {
        //Do something with error
      }
      
      $secretKey = YOUR_RECAPTCHA_SECRET_KEY;
      $userIp = $_SERVER['REMOTE_ADDR'];
      $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$recaptchaToken."&remoteip=".$userIp);
      
      if($response.success == false){
           //Do something with error
                  
      } else {
        // reCaptchaToken is valid you can continue with the rest of your code
      }
    

    Install

    npm i react-google-recaptcha3

    DownloadsWeekly Downloads

    86

    Version

    1.0.4

    License

    none

    Unpacked Size

    5.8 kB

    Total Files

    3

    Last publish

    Collaborators

    • armen_stepanyan