Initial commit

christoferd · Nov 3, 2018 · d6eb4a6 · d6eb4a6
commit d6eb4a6
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vagrant
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Steven Cotterill
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,26 @@
+## Google reCAPTCHA v3 example
+
+A simple contact form, using [Google reCAPTCHA v3](https://developers.google.com/recaptcha/docs/v3) with PHP for server side validation.
+
+Add your Site key from the reCAPTCHA dashboard on lines 9 and 12 of 'public/index.php':
+
+<pre><code>YOUR_RECAPTCHA_SITE_KEY</code></pre>
+
+Add your Secret key from the reCAPTCHA dashboard on line 31 of 'public/index.php':
+
+<pre><code>YOUR_RECAPTCHA_SECRET_KEY</code></pre>
+
+This can be run locally with <code>vagrant up</code>.
+
+
+You should run the following to install the required Vagrant plugins:
+
+<pre><code>$ vagrant plugin install vagrant-hostmanager</code></pre>
+
+Access the website locally at http://recaptcha.local
+
+The Vagrant box being used is [Scotchbox Pro](https://box.scotch.io/pro)
+
+See blog post [here](https://stevencotterill.co.uk/blog/adding-google-recaptcha-v3-to-a-php-form)
+
+![reCAPTCHA v3 form](https://stevencotterill.co.uk/img/github-recaptcha-form.jpg)
diff --git a/Vagrantfile b/Vagrantfile
@@ -0,0 +1,18 @@
+# -*- mode: ruby -*-
+# vi: set ft=ruby :
+
+Vagrant.configure("2") do |config|
+
+    config.vm.box = "scotch/box-pro"
+    config.vm.network "forwarded_port", guest: 80, host: 8080
+    config.vm.network "private_network", ip: "192.168.33.10"
+    config.vm.synced_folder ".", "/var/www", :nfs => { :mount_options => ["dmode=777","fmode=666"] }
+    config.hostmanager.enabled = true
+    config.hostmanager.manage_host = true
+    config.hostmanager.include_offline = true
+    config.hostmanager.ignore_private_ip = false
+    config.vm.network "private_network", type: "dhcp"
+
+    config.vm.hostname = "recaptcha.local"
+
+end
diff --git a/public/index.php b/public/index.php
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Google reCAPTCHA v3</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
+    <script src="https://www.google.com/recaptcha/api.js?render=YOUR_RECAPTCHA_SITE_KEY"></script>
+    <script>
+        grecaptcha.ready(function () {
+            grecaptcha.execute('YOUR_RECAPTCHA_SITE_KEY', { action: 'contact' }).then(function (token) {
+                var recaptchaResponse = document.getElementById('recaptchaResponse');
+                recaptchaResponse.value = token;
+            });
+        });
+    </script>
+</head>
+
+<body>
+    <section class="section">
+        <div class="container">
+            <div class="columns">
+                <div class="column is-half">
+
+                    <?php // Check if form was submitted:
+                    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+
+                        // Build POST request:
+                        $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
+                        $recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
+                        $recaptcha_response = $_POST['recaptcha_response'];
+
+                        // Make and decode POST request:
+                        $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
+                        $recaptcha = json_decode($recaptcha);
+
+                        // Take action based on the score returned:
+                        if ($recaptcha->score >= 0.5) {
+                            // Verified - send email
+                        } else {
+                            // Not verified - show form error
+                        }
+
+                    } ?>
+
+                    <form method="POST">
+
+                        <h1 class="title">
+                            reCAPTCHA v3 example
+                        </h1>
+
+                        <div class="field">
+                            <label class="label">Name</label>
+                            <div class="control">
+                                <input type="text" name="name" class="input" placeholder="Name" required>
+                            </div>
+                        </div>
+
+                        <div class="field">
+                            <label class="label">Email</label>
+                            <div class="control">
+                                <input type="email" name="email" class="input" placeholder="Email Address" required>
+                            </div>
+                        </div>
+
+                        <div class="field">
+                            <label class="label">Message</label>
+                            <div class="control">
+                                <textarea name="message" class="textarea" placeholder="Message" required></textarea>
+                            </div>
+                        </div>
+
+                        <div class="field is-grouped">
+                            <div class="control">
+                                <button type="submit" class="button is-link">Send Message</button>
+                            </div>
+                        </div>
+
+                        <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
+
+                    </form>
+
+                </div>
+            </div>
+        </div>
+    </section>
+
+</body>
+
+</html>