Laravel ile Google reCaptcha v2 Kullanımı

Bildiğiniz gibi php frameworkler arasında en popülerden biri olan Laravel ile oluşturduğunuz projelerinizin web formlarında özellikle robotları engellemenin en kolay yollarından biri Captcha kullanımı olmaktadır. İnternette çeşitli php Captcha sınıfları bulabileceğiniz gibi popüler olan Google reCaptha kullanmanızı tavsiye ediyoruz.

Google reCaptcha Laravel projenize nasıl eklenir?

Adım 1-

https://www.google.com/recaptcha/admin#list ziyaret edip Google (Gmail) email adresinizle giriş yapıp (yoksa yaratmanız gerekli) reCaptcha API almak için sitenizi register etmeniz gereklidir.

Öncelikle açılan ekranda üst bölüme API için gerekli etiketi yazıyoruz. Site isminiz olabilir. Alt bölüme ise site domain adresinizi yazmanız gerekli. Direk ana domain eklemeniz gerekli. Bir alt domainde çalışıyor olsanızda farketmez.

Register butonuna tıkladığınızda Site Key ve Secret Key ile beraber front-ent tarafına entegre etmeniz gereken API js kodu ve form alanına eklenecek reCaptcha kodu verilecektir.

Sunucu tarafında entegrasyon içinde aşağıdaki kodu verecektir.

Adım 2-

Google reCaptcha’ya sitemizi kayıt ettiğimize göre Site Key ve Secret Key bilgilerini config/app.php içine ‘reCaptcha’ anahtarı altında kayıt ediyoruz. Daha sonra Laravel projemize reCaptcha php kütüphanesini dahil etmemiz gerekecek. Composer ile kütüphaneyi dahil etmek için Laravel proje dizininde aşağıdaki komutu uygulayınız.

composer require google/recaptcha "~1.1"

Adım 3-

Google reCaptcha kütüphanesini projemize dahil ettikten sonra app/Providers/AppServiceProvider.php dosyasını açıp boot methoduna reCaptcha için kullanacağımız Validation’ı eklemek olacak.

<?php 

namespace App\Providers;
use Illuminate\Support\ServiceProvider;
class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
      \Validator::extend('captcha', function($attribute, $value, $parameters, $validator) {
          $secret = config('app.reCaptcha.secret') // Google Recaptcha oluşturulurken verilen kod 
          $recaptcha = new ReCaptcha($secret);
          $remoteIP = \request()->ip();
          $resp = $recaptcha->verify($value, $remoteIP);
          return $resp->isSuccess();
      });
    }
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }
}

Adım 4-

Daha sonra form’da kullanmak üzere bir request oluşturalım.

php artisan make:request Reminder

app/Http/Requests/Reminder.php

Adım 5-

Örneğin şifre sıfırlama form girişine eklemek istediğimizde aşağıda gibi yapıyoruz.

  @section('form')
  <form class="ui  form" action="{!! route(config('dencol.auth.routes.reminder.post.args.as')) !!}"
        method="post" autocomplete="off" novalidate onsubmit="return false;" id="reminderForm">
      <div class="ui segment" style="text-align: left;">
          <div class="field">
              <div class="ui left icon input">
                  <i class="user icon"></i>
                  <input type="text" name="email" placeholder="E-posta adresin" value="{!! old('email') !!}">
              </div>
          </div>
          <div class="field" style="text-align:center;">
              <div class="g-recaptcha" data-sitekey="{!! config('app.reCaptcha.site_key') !!}"></div>
          </div>
          <div onclick="rest.reminder('#reminderForm')" class="ui fluid large teal submit button">Gönder</div>
      </div>

  </form>
  @stop
  @section('scripts')
    <script src='https://www.google.com/recaptcha/api.js'></script>
  @stop

Ajax ile post ederken jQuery’nin .serialize() methodu ile form elemanlarının verilerini gönderebiliriz. Sonrasında aşağıdaki gibi form verilerini alırız.

Reminder Request dosyamızı aşağıdaki gibidir.

<?php
namespace App\Http\Requests;
use App\Http\Requests\Request;
class Reminder extends Request
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return false;
    }
    /**
     * Get the validation rules that apply to the request.
     * @return array
     */
    public function rules()
    {
        return [
            'email'                => 'required|email',
            'g-recaptcha-response' => 'required|captcha',
        ];
    }
    public function messages()
    {
        return [
            'email.required'                => 'E-posta adresin gerekli.',
            'email.email'                   => 'Geçerli bir e-posta adresi girin.',
            'g-recaptcha-response.required' => 'Robot olmadığını bilmem gerek.',
            'g-recaptcha-response.captcha'  => 'Robot olmadığını bilmemedim.',
        ];
    }
}

Controller kısmında ise post için kullandığımız method aşağıdaki gibidir.

<?php
use App\Http\Requests\Reminder as Request;
public function store(Request $request){
  return $request->all();
}

Bu işlemlerin ardından geriye ajax ile post etmek kaldı.

onst DATA = $(formId).serialize();
const URL = $(formId).attr('action');
$.ajax({
    url: URL,
    data: DATA,
    success: function (e) {
        alertify.success('Tamamdır :)')
    },
    error: function (e) {
        const data = e.responseJSON;
        if(e.status){
            switch(e.status){
                case 422 :
                    const captcha = data['g-recaptcha-response'];
                    if (typeof captcha !== 'undefined') {
                        grecaptcha.reset();
                    }
                break;
            }
        }
    }
});

Yukarıda görüldüğü gibi Laravel ajax ile yaptığımız postlarda form hatalarını 422 durum kodu ile yakalayabiliriz. Yukarıda ki ajax kod bloğunda 422 durum kodunu switch case ile yaklayıp reCaptcha’yı resetleyelim. Böylelikle herhangi bir form hatasında reCaptcha için sayfa yenilemek zorunda kalmamış olacağız.

Sonuç olarak reCaptcha kullanımında site ziyaretçisini de düşünmek gerekiyor. Giriş, kayıt, şifre sıfırlama talebi, Hesap aktivasyonu ve Yeni şifre oluşturma (Şifre sıfırlama talebinden sonra e-posta adresine gönderilen bağlantı) gibi alanlarda dikkatli kullanmak gerekiyor. Giriş işleminde ilk etapta kullanmak yerine belli hatadan sonra aktive etmek daha uygun olabilir.