پیاده‌سازی کپچا در فرم ثبت نام

❮ بخش قبلی بخش بعدی ❯

چرا استفاده از کپچا ضروری است؟

کپچا از فرم شما در مقابل:

ثبت نام ربات‌ها
حملات Brute Force
اسپم و سوءاستفاده‌های خودکار محافظت می‌کند

روش‌های پیاده‌سازی کپچا در لاراول

استفاده از بسته reCAPTCHA گوگل (پیشنهاد شده)
استفاده از بسته laravel-captcha (راه حل ساده‌تر)

استفاده از بسته reCAPTCHA گوگل (پیشنهاد شده)

مرحله ۱: ثبت سایت در گوگل

تحریم شکن خود را فعال کنید
به صفحه reCAPTCHA گوگل بروید
نوع reCAPTCHA را انتخاب کنید (v2)
دامنه خود را ثبت کنید
کلیدهای Site Key و Secret Key را دریافت کنید

مرحله ۲: نصب بسته در لاراول

Ubuntu 22.04

                composer require google/recaptcha

مرحله ۳: تنظیمات .env

bash

            RECAPTCHA_SITE_KEY=کلید_سایت_شما
RECAPTCHA_SECRET_KEY=کلید_محرمانه_شما

مرحله ۴: افزودن به فرم ثبت نام

مشابه کد زیر از این دستور در قسمت فرم ثبت نام استفاده کنید

html

            <form method="POST" action="{{ route('register') }}">
@csrf
    <!--خط فرمان زیر را در این قسمت از  فرم ثبت نام وارد کنید-->
<div class="g-recaptcha"  data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
<div class="form-group row">

            

بنابراین شما می توانید از دستور زیر جهت ایجاد یک فرم ثبت نام در مسیر resources/views/auth/register.blade.php استفاده کنید

html

            <!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<title> ایجاد ویو ثبت نام</title>-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">ثبت نام</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('register') }}">
                       @csrf
                       <div class="g-recaptcha"  data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>
                        <div class="form-group row">
                            <label for="name" class="col-md-4 col-form-label text-md-right">نام</label>
                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control " name="name" required autocomplete="name" autofocus>
                                
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="email" class="col-md-4 col-form-label text-md-right">ایمیل</label>
                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control " name="email" required autocomplete="email">
                                
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password" class="col-md-4 col-form-label text-md-right">رمز عبور</label>
                            <div class="col-md-6">
                                <input id="password" type="password" class="form-control " name="password" required autocomplete="new-password">
                                
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-right">تکرار رمز عبور</label>
                            <div class="col-md-6">
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    ثبت نام
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

            

مرحله ۵: اعتبارسنجی در کنترلر

کد زیر را به تابع Register در مسیر app/Http/Controllers/RegisterController.php جهت اعتبارسنجی بیشتر توسط کنترلر اضافه نمایید.

PHP (Laravel)

                use Illuminate\Support\Facades\Http;

    // public function register(Request $request)
{
    // اعتبارسنجی reCAPTCHA
    $response = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
        'secret' => env('RECAPTCHA_SECRET_KEY'),
        'response' => $request->input('g-recaptcha-response'),
        'remoteip' => $request->ip(),
    ]);
    $responseData = $response->json();
    if (!$responseData['success']) {
        return back()->withErrors(['captcha' => 'لطفاً تأیید کنید که شما ربات نیستید.']);
    }

            

اگر در حال دنبال کردن مراحل وب سایت ما می باشید کل دستور مربوط به کنترلر واقع در مسیر app/Http/Controllers/RegisterController.php به صورت زیر خواهد شد.

PHP 8.1

                <?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
                
use Illuminate\Support\Facades\Http;
class RegisterController extends Controller
{
    public function showRegistrationForm()
    {
        return view('auth.register');
    }
    public function register(Request $request)
    {
        // اعتبارسنجی reCAPTCHA
        $response = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
            'secret' => env('RECAPTCHA_SECRET_KEY'),
            'response' => $request->input('g-recaptcha-response'),
            'remoteip' => $request->ip(),
        ]);
        $responseData = $response->json();
        if (!$responseData['success']) {
            return back()->withErrors(['captcha' => 'لطفاً تأیید کنید که شما ربات نیستید.']);
        }
        // بقیه اعتبارسنجی‌ها
        $request->validate([
            'name' => 'required|string|max:255',
            'email' => 'required|email|unique:users',
            'password' => 'required|min:8|confirmed',
        ]);
        User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);
        return redirect('/')->with('success', 'ثبت‌نام موفقیت‌آمیز بود!');
    }
}

            

❮ بخش قبلی بخش بعدی ❯