這邊練習串接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://chivincent.net/blog/intergrate-google-recaptcha-enterprise-in-laravel/
