2017年5月18日 星期四

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

大致上與之前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 檔。

asuswebstorageonedrive.livedrive.google下載教學

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

視頻解說之第一部分:http://youtu.be/2XZm_rveg-k

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

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

沒有留言:

張貼留言