rajeshdewle / google-recaptcha

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

Google reCAPTCHA validater for Laravel

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'
]);

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: {
    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 [email protected] instead of using the issue tracker.

Credits

• Swapnil Bhavsar
• Rajesh Dewle
• All Contributors

License

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