2017年5月16日 星期二

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 檔。

asuswebstorageonedrive.livedrive.google下載教學

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視頻解說。

視頻解說之第一部分:http://youtu.be/Sm-Qjd0qCOg

視頻解說之第二部分:http://youtu.be/fEnQwlXAFnk

謝謝大家,抽空觀看,files備份檔名:phpguides 008a 008b
如果久久,才用一次,怕忘記,可將本篇連結,貼至您的 facebook 或 google+

1 則留言: