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

reCAPTCHA 是甚麼意思？驗證碼

大致上與之前key的 [舊文] 教你如何使用reCAPTCHA驗證圖PHP V2.0之part 2篇 差不多，本篇只更新些許內容

首先你必需要有 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/20090203-recaptcha-v2.html


reCAPTCHA 之 php 主程序，更新說明

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

各個範例檔解說

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

phpex005/t51.php
此方式為div容器，data-sitekey設置site key值；api.js網址尾部設置語言
在測試時，那個觸控之驗證盤問，需要多刷幾次，才會出現

phpex005/t52.php
和上述一樣，差別在於，div容器多了data-theme參數，變更外觀為dark
api.js那串調用網址，尾部設為 async defer 非同步延遲

phpex005/t53.php
此方式為div容器設id，js可以靈活的設置其他參數及值，對應到該div容器id

phpex005/t54.php
為官網 reCAPTCHA V2 底部範例，此方式可以取得回應值、重置、取得回應值及提交
當一個頁面，有複數個reCAPTCHA必須另外設widgetId1、widgetId2參數，不然會無法辨認

phpex005/t55.php
帳號密碼登入之範例，使用div容器，設置參數給值方式

phpex005/t56.php
帳號密碼登入之範例，使用js的onloadCallback變數，設置參數給值方式

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

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

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

reCAPTCHA V2 類型之 JavaScript API 的 Method 使用方法；賦值、重置、取得回應值，這3種

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

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


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


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

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

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

Teach you how to use type of reCAPTCHA V2