Google reCAPTCHA v3 server/browser

index.html

<script src="https://www.google.com/recaptcha/api.js?render={{KEY}}"></script>
<script>
  grecaptcha.ready(async () => { 
    const token = await grecaptcha.execute('{{KEY}}', {action: 'demo'});
    document.querySelector('#token').value = token;
  });
</script>

<h1>Google3 reCAPTCHA v3 Demo</h1>

<input id="hello" value="Hello World" />
<textarea hidden id="token"></textarea>
<button onclick="onSubmit()">Submit</button>

<script>
  function onSubmit() {
    var hello = document.querySelector('#hello').value;
    var token = document.querySelector('#token').value;

    fetch('/send', {
      headers: { 'Content-Type': 'application/json' },
      method: 'post',
      body: JSON.stringify({ hello: hello, token: token })
    })
    .then(response => response.text())
    .then(text => alert(text))
    .catch(error => alert(text));
  }
</script>

Instruction.md

1. Get reCAPTCHA key and secret from Google site, https://www.google.com/recaptcha/admin/create
   • Store your key and secret in a safe place
2. Code public/index.html (update {{KEY}})
3. Code server.js (update {{SECRET}})
4. Run your server

   $ npm i
   $ node server.js
   

5. Open browser, http://localhost:3000, and click "Submit"

server.js

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.static('public'));
app.use(express.json());

app.post('/send', (req, res) => {
  const token = req.body.token;
  const url = `https://www.google.com/recaptcha/api/siteverify?secret={{SECRET}}&response=${token}`;

  axios.post(url)
    .then(resp => res.json(resp.data))
    .catch(err => res.json(err))
});

app.listen(3000, () => console.log(`Listening on port 3000`));