Permalink
Browse files

Add reCAPTCHA validation

  • Loading branch information...
maoberlehner committed Jan 5, 2019
1 parent 71d2aec commit 124795077aa46a2012591060b4b1788d61326086
Showing with 47 additions and 8 deletions.
  1. +1 −0 package.json
  2. +1 −0 public/index.html
  3. +21 −6 src-functions/feedback.js
  4. +15 −1 src/components/frames/FormFrame.js
  5. +9 −1 yarn.lock
@@ -17,6 +17,7 @@
"@avalanche/setting-spacings": "^4.0.0-alpha.6",
"@vue/cli-plugin-babel": "^3.2.2",
"@vue/cli-service": "^3.2.3",
"axios": "^0.18.0",
"netlify-lambda": "^1.1.1",
"node-sass": "^4.11.0",
"node-sass-magic-importer": "^5.3.0",
@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Building a Renderless reCAPTCHA v3 Form Component with Vue.js</title>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src='https://www.google.com/recaptcha/api.js?render=6LelBIcUAAAAAGkihBXg7vWPXV5QJaj0bE_qeX1e'></script>
</head>

<body>
@@ -1,3 +1,15 @@
import axios from 'axios';

const { RECAPTCHA_SECRET } = process.env;
const RECAPTCHA_VERIFY_URL = `https://www.google.com/recaptcha/api/siteverify`;
const RECAPTCHA_SCORE_THRESHOLD = 0.5;

function isHuman(token) {
const endpoint = `${RECAPTCHA_VERIFY_URL}?response=${token}&secret=${RECAPTCHA_SECRET}`;
return axios.post(endpoint)
.then(({ data }) => data.score > RECAPTCHA_SCORE_THRESHOLD);
}

exports.handler = async (event, context, callback) => {
try {
// Do not handle requests if the request
@@ -14,14 +26,17 @@ exports.handler = async (event, context, callback) => {
const {
message,
name,
token,
} = JSON.parse(event.body);

// This is the place to handle
// the submitted data.
// For example:
// await sendEmail({ message, name });
// or
// await saveToDb({ message, name });
if (await isHuman(token)) {
// This is the place to handle
// the submitted data.
// For example:
// await sendEmail({ message, name });
// or
// await saveToDb({ message, name });
}

callback(null, {
statusCode: 200,
@@ -1,5 +1,8 @@
import { post } from '../../utils/api';

// Public token.
const RECAPTCHA_TOKEN = `6LelBIcUAAAAAGkihBXg7vWPXV5QJaj0bE_qeX1e`;

export default {
props: {
data: {
@@ -24,8 +27,9 @@ export default {
this.error = null;
this.loading = true;

const token = await this.recaptchaToken();
await post({
data: this.data,
data: { ...this.data, token },
endpoint: this.endpoint,
});

@@ -37,6 +41,16 @@ export default {
this.success = false;
}
},
recaptchaToken() {
return new Promise((resolve) => {
// eslint-disable-next-line no-undef
grecaptcha.ready(async () => {
// eslint-disable-next-line no-undef
const token = await grecaptcha.execute(RECAPTCHA_TOKEN);
resolve(token);
});
});
},
},
render() {
return this.$scopedSlots.default({

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.

0 comments on commit 1247950

Please sign in to comment.