article

Sunday, December 18, 2022

Laravel 9 How to integrate Google reCAPTCHA

Laravel 9 How to integrate Google reCAPTCHA

Download Laravel App

composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=

Create Controller
php artisan make:controller UserController -r
C:\xampp\htdocs\laravel\my-app>php artisan make:controller UserController -r
app\Http\Controllers\UserController.php
// app\Http\Controllers\UserController.php
<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;

class UserController extends Controller
{
    public function create() {
        return view('create_user');
    }
    public function store(Request $request) {
        $request->validate([
            'name' => 'required',
            'email' => 'required|email',
            'password' => 'required|min:6',
            'g-recaptcha-response' => 'required|captcha',
        ]);
        User::create($request->all());
        return "Successfully created!";
    }
}
Database Migration
run this migration
C:\xampp\htdocs\laravel\my-app>php artisan migrate
Create a view file
resources/views/create_user.blade.php

No CAPTCHA reCAPTCHA

https://github.com/anhskohbo/no-captcha

Install
composer require anhskohbo/no-captcha
C:\xampp\htdocs\laravel\my-app>composer require anhskohbo/no-captcha

Publish the config file
php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"

Add Google Site Key and Secret Key configuration
open the .env file and add these keys.

NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key

https://www.google.com/recaptcha/

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/

jquery
https://www.jsdelivr.com/package/npm/jquery
//resources/views/create_user.blade.php
<html>
<head>
<title>Laravel 9 How to integrate Google reCAPTCHA</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
   <div class="container">
        <h1>Laravel 9 How to integrate Google reCAPTCHA</h1>
         @if ($errors->any())
         <div class="alert alert-danger">
            <strong>Errors!</strong> <br>
            <ul>
               @foreach ($errors->all() as $error)
               <li>{{ $error }}</li>
               @endforeach
            </ul>
         </div>
         @endif

        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card">
                    <h3 class="card-header text-center">Register User</h3>
                    <div class="card-body">
                        <form  action="{{url('users/store')}}" method="POST">
                            @csrf
                            <div class="form-group mb-3">
                                 <input type="text" name="name" class="form-control" placeholder="User name">
                            </div>
                            <div class="form-group mb-3">
                                 <input type="email" name="email" class="form-control" placeholder="User email">
                            </div>
                            <div class="form-group mb-3">
                                 <input type="text" name="password" class="form-control" placeholder="User Password">
                            </div>
                            <div class="form-group mb-3">
                              <strong>Google recaptcha :</strong>
                              {!! NoCaptcha::renderJs() !!}
                              {!! NoCaptcha::display() !!}
                            </div>
                            <div class="d-grid mx-auto">
                              <button type="submit" class="btn btn-dark btn-block">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

   </div>
</body>
</html>
Routes
routes/web.php
//routes/web.php
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('/', function () {
    return view('welcome');
});

Route::get('users', [UserController::class, 'create']);
Route::post('users/store', [UserController::class, 'store']);
Run C:\xampp\htdocs\laravel\my-app>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Related Post