Skip to content

chitranu/google-recaptcha

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Google reCAPTCHA validator for Laravel

Latest Version on Packagist Total Downloads

This package is a wrapper around Google's reCAPTCHA PHP client library. It provides a handy validation rule recaptcha, which can be used to validate the reCAPTCHA token in the form requests.

You can use this package with any of reCAPTCHA types:

  • Google reCAPTCHA v2
  • Google reCAPTCHA v3

Installation

You can install the package via composer:

composer require chitranu/google-recaptcha

Usage

Get Google reCAPTCHA secret key for your application from https://www.google.com/recaptcha/admin/ and place it inside .env file at the root like this.

GOOGLE_RECAPTCHA_SECRETKEY=YOUR_RECAPTCHA_SECRET_KEY

After setting secret key, head over to your request validator, and add a field with rule the recaptcha like below to validate the token received in the form request.

$request->validate([
    '...' // other fields
    'recaptcha-token' => 'required|recaptcha'
]);

Setting score threshold

If you are getting a lot of spam submissions, you can take advantage of setting the score threshold while specifying the validation rule by setting a value between 0.1 - 1.0. Read more about score threshold here: https://developers.google.com/recaptcha/docs/v3#interpreting_the_score

$request->validate([
    '...' // other fields
    'recaptcha-token' => 'required|recaptcha:0.5' // Specify threshhold
]);

Examples

Using in frontend (vue-recaptcha-v3 plugin)

This package is intended to use with vue-recaptcha-v3 npm plugin. You can use it by creating a Vue form component using vue-recaptcha-v3 plugin shown below.

Register your site key with the vue-recaptcha-v3 plugin:

import Vue from "vue";
import { VueReCaptcha } from "vue-recaptcha-v3";

Vue.use(VueReCaptcha, { siteKey: "YOUR_GOOGLE_SITE_KEY" });

Create a Vue component for the form and submit reCAPTCHA token using form like this:

<template>
  <form @submit.prevent="onFormSubmit()" ref="contactform">
    <input type="text" name="name" placeholder="Your Name" />
    <input type="email" name="email" placeholder="Your Email" />
    <textarea name="message" placeholder="Your Message"></textarea>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    async onFormSubmit() {
      // Wait until recaptcha has been loaded.
      await this.$recaptchaLoaded();

      // Execute reCAPTCHA with action "login".
      const token = await this.$recaptcha("login");

      // Prepare form data
      let formData = new FormData(this.$refs.contactform);

      // Appended token in formData
      formData.append("recaptcha-token", token);

      // Make an ajax request to your Laravel endpoint.
      axios.post("/your-form-endpoint", formData).then(
        (response) => {
          // handle response
        },
        (error) => {
          // handle errors
        }
      );
    },
  },
};
</script>

Using in frontend (vue-recaptcha plugin)

If you are using vue-recaptcha plugin (older version), you can still use it by creating a vue form component shown below:

<template>
  <form @submit.prevent="onFormSubmit()" ref="contactform">
    <input type="text" name="name" placeholder="Your Name" />
    <input type="email" name="email" placeholder="Your Email" />
    <textarea name="message" placeholder="Your Message"></textarea>
    <vue-recaptcha
      ref="recaptcha"
      @verify="onCaptchaVerified"
      @expired="resetCaptcha"
      :sitekey="sitekey"
      :loadRecaptchaScript="true"
    />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import VueRecaptcha from "vue-recaptcha";

export default {
  components: {
    VueRecaptcha,
  },
  computed: {
    sitekey() {
      return "YOUR_GOOGLE_RECAPTHCA_SITE_KEY";
    },
  },
  methods: {
    onFormSubmit() {
      this.$refs.recaptcha.execute();
    },
    onCaptchaVerified(token) {
      // Prepare form data
      const formData = new FormData(this.$refs.contactform);

      // Appended token in formData
      formData.append("recaptcha-token", token);

      // Make an ajax request to your Laravel endpoint.
      axios.post("/your-form-endpoint", formData).then(
        (response) => {
          // handle response
        },
        (error) => {
          // handle errors
        }
      );
    },
    resetCaptcha() {
      this.$refs.recaptcha.reset();
    },
  },
};
</script>

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email swapnil@chitranu.com instead of using the issue tracker.

Credits

License

The MIT License (MIT). Please see License File for more information.

About

Easily validate recaptcha responses in Laravel. A handy validation rule for validating the reCAPTCHA token in the form requests.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages