2017年5月16日 星期二

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

1 則留言:

留言後,需等待,站長的查看,才會公開,請勿重複留言,謝謝