登入功能加上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://chivincent.net/blog/intergrate-google-recaptcha-enterprise-in-laravel/
留言0
查看全部
你可能也想看
Google News 追蹤
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
自2019年起，Google計劃逐步淘汰第三方Cookies，以強化用戶隱私，然而，由於廣告夥伴的反對和監管單位的審查，該計劃被多次延遲，直至近日，Google宣布了重磅消息：第三方Cookies將在Chrome瀏覽器中無限期運作，推翻了先前計劃在2025年淘汰它們的決定。
Google於2020年宣佈，計劃在未來3年之內將終止Chrome瀏覽器對第三方Cookie的支援。也就是在2023年將完全淘汰Chrome瀏覽器中的第三方Cookie及跨站追踪識別碼、指紋識別等技術，以保障使用者隱私，以避免干擾網站廣告模式。
需求情境：
為了讓多人使用 App，必須有驗證程序，以識別特定使用者，存取各自擁有的資源。
解決方案：
引用 google 所提供的雲端服務平台 Firebase，其中有多種驗證功能可選用。基於個人對 google 的偏愛，決定先採用 google signin 的方法，實作 login lo
為什麼要登出使用者？
安全性：防止未經授權的人，在使用者暫離時使用系統，這在公用或共享電腦的環境中尤其重要。
資料保護：只要使用者處於登入狀態，就會暴露在個人資料被他人操縱或利用的風險中，因此登出閒置使用者對資安也很重要。
如何在 Vue 3 專案中實作此功能？
1. 如何分辨詐騙、避免被詐騙 2. 掃毒、增強帳號安全、多段驗證、安全金鑰 3.快速取回帳號
授權碼模式連線流程
用戶端請求自己的伺服器。
伺服器發現用戶沒登入，就導向認證伺服器。
認證伺服器顯示授權頁面，等待用戶授權。
用戶確認授權後，授權頁面會向認證伺服器請求授權碼。
用戶獲取授權碼。
用戶將授權碼傳給伺服器。
伺服器拿授權碼向認證伺服器取得token。
應用註冊
趨勢科技最新防詐騙工具 Trend Micro ChainSafer 正式上線！這次不止檢查網址，連Web3的交易地址、合約內容都能一次檢查，更棒的是，只要你有MetaMask小狐狸錢包，現在就能免費下載使用，從此鏈上交易不用擔心。
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
自2019年起，Google計劃逐步淘汰第三方Cookies，以強化用戶隱私，然而，由於廣告夥伴的反對和監管單位的審查，該計劃被多次延遲，直至近日，Google宣布了重磅消息：第三方Cookies將在Chrome瀏覽器中無限期運作，推翻了先前計劃在2025年淘汰它們的決定。
Google於2020年宣佈，計劃在未來3年之內將終止Chrome瀏覽器對第三方Cookie的支援。也就是在2023年將完全淘汰Chrome瀏覽器中的第三方Cookie及跨站追踪識別碼、指紋識別等技術，以保障使用者隱私，以避免干擾網站廣告模式。
需求情境：
為了讓多人使用 App，必須有驗證程序，以識別特定使用者，存取各自擁有的資源。
解決方案：
引用 google 所提供的雲端服務平台 Firebase，其中有多種驗證功能可選用。基於個人對 google 的偏愛，決定先採用 google signin 的方法，實作 login lo
為什麼要登出使用者？
安全性：防止未經授權的人，在使用者暫離時使用系統，這在公用或共享電腦的環境中尤其重要。
資料保護：只要使用者處於登入狀態，就會暴露在個人資料被他人操縱或利用的風險中，因此登出閒置使用者對資安也很重要。
如何在 Vue 3 專案中實作此功能？
1. 如何分辨詐騙、避免被詐騙 2. 掃毒、增強帳號安全、多段驗證、安全金鑰 3.快速取回帳號
授權碼模式連線流程
用戶端請求自己的伺服器。
伺服器發現用戶沒登入，就導向認證伺服器。
認證伺服器顯示授權頁面，等待用戶授權。
用戶確認授權後，授權頁面會向認證伺服器請求授權碼。
用戶獲取授權碼。
用戶將授權碼傳給伺服器。
伺服器拿授權碼向認證伺服器取得token。
應用註冊
趨勢科技最新防詐騙工具 Trend Micro ChainSafer 正式上線！這次不止檢查網址，連Web3的交易地址、合約內容都能一次檢查，更棒的是，只要你有MetaMask小狐狸錢包，現在就能免費下載使用，從此鏈上交易不用擔心。