登入功能加上Google reCAPTCHA

這邊練習串接Google reCAPTCHA，簡單介紹Google reCAPTCHA v3。

Google reCAPTCHA v3 是一種幫助網站和應用程序識別和阻止惡意機器人和自動化攻擊，它由 Google 提供，旨在與傳統的 reCAPTCHA v2 不同，reCAPTCHA v3 不需要使用者進行任何可見的驗證碼輸入或互動。它通過分析使用者在網站上的行為來評估使用者的人類或機器人特徵。

接下來就是實作的部分～

建立 reCaptcha V3 帳戶

這一步驟中我們需要設定Google網站金鑰和秘密金鑰。這邊我們必須先透過此連結註冊一個新網站，然後才能使用 Google ReCaptcha，創建完畢後就會取得網站金鑰跟密鑰，而網站金鑰是前端頁面使用，密鑰是後端在 server 使用。

設定密鑰至設定檔

在你的環境變數.env檔裡面加入密鑰

RECAPTCHA_SECRET=your_secret_key
RECAPTCHA_SITEKEY=your_site_key
RECAPTCHA_URL=https://www.google.com/recaptcha/api/siteverify

在登入頁面實作 reCaptcha

接下來在原本的login.blade.php頁面加上程式碼，加入 reCAPTCHA 欄位，通常是一個 <script> 元素和一個隱藏的 <input> 欄位。

首先在app.blade.php增加屬於js的模版，方便載入JS檔案

接著放置 <script> 元素和一個隱藏的 <input> 欄位

<!-- recaptcha -->
<input type="hidden" name="google_recaptcha_token" id="recaptcha-token">

@section('js')
    <script src="https://www.google.com/recaptcha/api.js?render={{env('RECAPTCHA_SITEKEY')}}"></script>
    <script>
        grecaptcha.ready(function() {
        grecaptcha.execute('{{env('RECAPTCHA_SITEKEY')}}').then(function(token) {
            $('#recaptcha-token').val(token);
        });
    });
    </script>
@endsection

建立middleware處理驗證規則

首先先創建一個middleware 來處理這些request

php artisan make:middleware GoogleRecaptcha

登入路由綁定中介層驗證

Route::controller(AuthController::class)->middleware('recaptcha')->group(function () {
    Route::post('/login', 'login');
});

最後回到登入頁面，可以看到已經有 reCAPTCHA圖案

相關文章參考

https://developers.google.com/search/blog/2018/10/introducing-recaptcha-v3-new-way-to?hl=zh-tw#fighting-bots-your-way

https://developers.google.com/recaptcha/docs/v3?hl=zh-tw#automatically_bind_the_challenge_to_a_button

https://chivincent.net/blog/intergrate-google-recaptcha-enterprise-in-laravel/