I will show you how to add the Google reCAPTCHA version 3 with Laravel with a few simple steps.

I assume you already installed Laravel with Jetstream, InertiaJS and Vue3. If not, this link will help you to install.

Setup 1:

Register your site in the Google reCAPTCHA and get the reCAPTCHA site key and Secret Key.

Configure those values in the config services.php file for better accessibility and management.


 'google_recaptcha' => [
   'url' => 'https://www.google.com/recaptcha/api/siteverify',
   'site_key' => env('GOOGLE_RECAPTCHA_SITE_KEY'),
   'secret_key' => env('GOOGLE_RECAPTCHA_SECRET_SITE_KEY'),
 ]
Enter fullscreen mode Exit fullscreen mode

To access the reCAPTCHA site key in the frontend, share through the HandleInertiaRequest file. Directly mentioning the site key in the front end isn't a great idea.

 public function share(Request $request)
 {
     return array_merge(parent::share($request), [
      'recaptcha_site_key' => config('services.google_recaptcha.site_key'),
     ]);
 }
Enter fullscreen mode Exit fullscreen mode

Setup 2:

Install Vue recaptcha v3 and import in app.js file.

import { VueReCaptcha, useReCaptcha } from 'vue-recaptcha-v3'
...


createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => require(`./Pages/${name}.vue`),
  setup({ el, app, props, plugin }) {
    const captcheKey = props.initialPage.props.recaptcha_site_key;
    return createApp({ render: () => h(app, props) })
      .use(plugin)
      .use(VueReCaptcha, { siteKey: captcheKey } )
      .mixin({ methods: { route } })
      .mount(el)
  },
})
Enter fullscreen mode Exit fullscreen mode

Step 3:

To add Google reCAPTCHA to the form. Here, I used a sample form to demonstrate the Google reCAPTCHA with Vue 3 composition API.

<form action="#" method="POST"  @submit.prevent="recaptcha">
   ...

   <jet-input-error :message="form.errors.captcha_token" class="mt-2" />
</form>

<script>
import { useForm } from '@inertiajs/inertia-vue3'
import { useReCaptcha } from "vue-recaptcha-v3";


export default {

  setup() {

    const form = useForm({
      name: null,
      email: null,
      phone: null,
      message: null,
      captcha_token :null,
    })

    const { executeRecaptcha, recaptchaLoaded } = useReCaptcha()
    const recaptcha = async () => {
      await recaptchaLoaded()
      form.captcha_token = await executeRecaptcha('login')
      submit();
    }

    function submit() {
      form.post(route('contact-us.store'), {
        preserveScroll: true,
        onSuccess: () => console.log('success'),
      })
    }

    return {
      form, submit ,recaptcha,
    }
  },
}


</script>
Enter fullscreen mode Exit fullscreen mode

Step 4

Create a Laravel custom rule to verify the token and score. Here, I rejected the form if the score <= 0.5 and status was not equals to true.

<?php

namespace App\Rules;

use Illuminate\Support\Facades\Http;
use Illuminate\Contracts\Validation\Rule;

class Recaptcha implements Rule
{
    /**
     * Create a new rule instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Determine if the validation rule passes.
     *
     * @param  string  $attribute
     * @param  mixed  $value
     * @return bool
     */
    public function passes($attribute, $value)
    {
        $endpoint = config('services.google_recaptcha');

        $response = Http::asForm()->post($endpoint['url'], [
            'secret' => $endpoint['secret_key'],
            'response' => $value,
        ])->json();

        if(  $response['success'] && $response['score'] > 0.5) {
            return true;
        }

        return false;
    }

    /**
     * Get the validation error message.
     *
     * @return string
     */
    public function message()
    {
        return 'Something goes wrong. Please contact us directly through the phone or email.';
    }
}
Enter fullscreen mode Exit fullscreen mode

Finally, add in the controller to validate the input request along with reCAPTCHA token.

use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Redirect;
use App\Rules\Recaptcha;

...

public function store() {
 $contact = Contact::create(
   Request::validate([
     'name' => ['required', 'max:50'],
     'email' => ['required', 'max:100','email'],
     'phone' => ['nullable', 'max:13'],
     'message' => ['required', 'max:2000'],
     'captcha_token'  => [new Recaptcha],
    ])
  );  

 return Redirect::route('contact-us');   

}
Enter fullscreen mode Exit fullscreen mode

I hope, this tutorial helps you to integrate Google reCAPTCHA 3 with Laravel. Please let me know if it doesn't work for you.

Thank you.

# laravel # vue.js
Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

具身智能测试题解析

问题1:具身智能（Embodied Intelligence）的核心观点强调智能的产生依赖于（ ） 正确答案：B. 智能体与环境的交互以及自身的物理形态 解析：具身智能的核心是 “智能离不开身体与环境的互动”，智能体的物理形态（如机械臂、人形机器人）和与外界的实时交互，是其产生认知、决策能力的基础，区别于纯软件的抽象智能模型。 问题2:以下哪一项是具身智能的典型应用场景？（ ） 正确答案：B.

avatar Vue

播客 | Fathym 关于 Vue 的观点

在科罗拉多州,我们有许多美景。从山顶到山谷和中间的山丘。 谈到 Vue.js,Fathym 是 JavaScript 框架的粉丝。 我们的工程总监 Jeremy Tomlinson 和品牌传播代表 Rich Kurtzman 很高兴成为 8 月中旬 Vue 播客观点的一部分。 在采访中,主持人史蒂夫爱德华兹向我们的团队询问了很多事情,包括: Fathym 是谁以及我们做什么 使用 Azure 和/

avatar Vue

带有浮动 Vue 和 Tailwind 的 Vue 下拉菜单

可用于在 Vue 应用程序中创建工具提示、弹出框和菜单的最流行的库之一是floating-vue。虽然floating-vue提供了一个Dropdown组件,但它的样式和添加其他功能(例如键盘导航)由用户决定。 我们将创建什么 我们将使用floating-vue的Dropdown组件作为基础,然后在顶部添加键盘功能。然后,我们将使用该组件使用 Tailwind 创建一个下拉菜单。 最终结果将类似于

avatar Vue