reCAPTCHA 範例解說：使用 Invisible reCAPTCHA 類型【圖文教學】

Invisible reCAPTCHA 是甚麼意思？隱藏式驗證碼

首先你必需要有 site key 跟 secret key 那2串代碼，請參考 Google reCAPTCHA Challenge 驗證盤問之 keys 申請說明 進行獲取

reCAPTCHA 可以在 127.0.0.1 網址上執行，建議安裝 WampServer 架站軟體，方便測試結果

reCAPTCHA 之 php 程序下載 https://github.com/google/recaptcha
點擊右邊綠色 Clone or download 展開後，點擊 Download ZIP
或向下拉，在 Direct download (no Composer) 點擊 ZIP file 連結

本篇範例檔之下載說明

下載本篇範例檔後，用 7-zip 解壓，再用 notepad++ 開啟，就可查看，及修改各個 php 檔


備存載點 https://zfly9.blogspot.com/2009/02/20090204-invisible-recaptcha.html


reCAPTCHA 之 php 主程序，更新說明

reCAPTCHA PHP client library 可見到版本，由於 key 這篇時的版本，為 1.1.3 版號
主程序在 src 目錄，未來如有新版，請下載新版，覆蓋掉 src 目錄，就可以升級

各個範例檔解說

請注意一下，裡面各個 test 範例檔，必須換上你的site key及secret key才能運行
請注意一下，是 Invisible reCAPTCHA 類型的 site key 跟 secret key 別搞錯了

phpex006/t61.php
為官網 Invisible reCAPTCHA 類型之第一個範例
Invisible reCAPTCHA 所需參數由 class=g-recaptcha 之 div 容器調用

phpex006/t62.php
為 t61.php 加入帳號密碼之範例，由 data-callback 跑 onSubmit 再跑 submit 物件

phpex006/t63.php
為官網 Invisible reCAPTCHA 類型之第二個範例，要用瀏覽器的【開發人員工具】才能查看 console.log 輸出
Invisible reCAPTCHA 所需參數由 js 的 onloadCallback 內的 function 調用

phpex006/t64.php 及 phpex006/t64ajax.php
配合 t63.php 範例，將帳號密碼之範例，改用 ajax 無刷新方式傳值

phpex006/t65.php
為官網 Invisible reCAPTCHA 類型之第三個範例
按下提交，會先跑 validate 函數，判斷 field 內容後，才執行那個觸控之驗證盤問，最後跑 onSubmit 函數

phpex006/t66.php 及 phpex006/t66ajax.php
配合 t65.php 範例，將留言板之範例，改用 ajax 無刷新方式傳值

Invisible reCAPTCHA 左側的 Displaying the widget 使用說明介紹
https://developers.google.com/recaptcha/docs/invisible

JavaScript resource (api.js) parameters 為api.js後面能帶的參數名稱和值

g-recaptcha tag attributes and grecaptcha.render parameters
div容器能用的參數名稱、js能用的參數名稱、能給予參數的值、預設值、描述

Invisible reCAPTCHA 類型之 JavaScript API 的 Method 使用方法
賦值、執行、重置、取得回應值，這4種

其他說明
那個 callback 回摳，他的意思是，當 reCAPTCHA 驗證之後，會執行 callback 右邊的函數，或執行 callback 右邊的變數之右邊的函數內的函數

問題出錯？有時程式沒反應，找不到問題在那？
建議將 chrome 的【開發人員工具】視窗用出來，一般都會顯示錯誤訊息
或使用 firefox 的【網頁工具箱】視窗，如有錯誤，應該也會有訊息顯示

相關文章 → reCAPTCHA 範例解說：使用 reCAPTCHA V2 類型【圖文教學】


返回主篇 → Google reCAPTCHA Challenge 驗證盤問之 keys 申請說明


對上述圖文教學，還不太明白的話，請至下方連結，查看 youtube 視頻解說

視頻解說之第一部分 https://www.youtube.com/watch?v=GtyH669I7Qo

謝謝大家，抽空觀看，files備份檔名 webscript01004

Teach you how to use type of Invisible reCAPTCHA