[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學

[ 跳過recaptcha 驗證 ] - Google Invisible reCAPTCHA 隱形驗證碼 教學

跳過recaptcha 驗證 – Google Invisible reCAPTCHA 隱形驗證碼 教學目的:

1.Invisible reCAPTCHA簡易申請及外掛安裝

2.了解Invisible reCAPTCHA使用外掛的設定

歡迎回到鵠學苑—WordPress網頁設計超詳細攻略– 跳過recaptcha 驗證 , Google Invisible reCAPTCHA 隱形驗證碼 教學,在之前的教學文章 Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能 中有簡單介紹了Google reCAPTCHA要如何申請驗證金鑰以及如何在站內聯絡表單上加入Google我不是機器人的驗證,而今天的教學主要是要為大家說明如何透過安裝Invisible reCaptcha for WordPress這一個外掛,來為網站中留言功能以及WordPress登入後台頁面也加入reCAPTCHA驗證功能,跳過recaptcha 並隱藏我不是機器人的按鈕,不需要每次在驗證的頁面顯示都要打勾我不是機器人的方框。

那麼要如何建立 Google reCAPTCHA 驗證,讓使用者在登入網站時可以按下留言或發送的按鈕時,就可以直接啟動 reCAPTCHA 保護機制呢?其實很簡單,只需要使用Google所提供的另外一種驗證方式:Invisible reCAPTCHA,中文為隱形驗證保護機制(非學名,筆者按字面意思所翻譯),Invisible reCAPTCHA與之前提到的reCAPTCHA v2最大的不同,在於使用Invisible reCAPTCH使用者可以省略掉在網站中操作註冊、登入、留言、發送郵件等功能時必須打勾我不是機器人的選項,啟用Invisible reCAPTCHA只會在需驗證的頁面產生如下方圖案的標示,而當使用者在點選發送表單資料的按鈕時,Google會比對使用者在網頁瀏覽器上的使用軌跡(Cookie、IP、國家、地區等),進而判斷是否為重複指令的機器人操作或者是真正的使用者(人類)在操作,如果無法判斷,就會提供簡單的驗證圖片給使用者勾選,進而達到阻擋機器人或惡意破解的效果。

本次教學會透過安裝WordPress 外掛來做簡單的設定,透過圖文解說相信很快就能讓同學們上手,接下來跟著鵠學院的腳步,讓我們開始學習吧!

 

Google reCAPTCHA驗證申請網址:https://www.google.com/recaptcha/intro/invisible.html
Invisible reCAPTCHA外掛下載點:https://tw.wordpress.org/plugins/invisible-recaptcha/

(小提醒:鵠學苑的所有教學均是以Apple Mac OS X系統 做步驟示範!)

 

• Invisible reCAPTCHA簡易申請及外掛安裝

第一步:登入Google 帳號,點選上方提供的Google reCAPTCHA驗證申請網址進入到申請頁面,如下圖紅色方框處在reCAPTCHA類型中選擇Invisible reCAPTCHA,請注意不要點選錯誤。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第二步:依序輸入自定義的標籤、網域名稱(標籤及網域名稱,可參考鵠學苑網址並與下圖比對),並將同意Google蒐集網站資料以及當reCAPTCHA驗證運作不正確或流量異常時通知我的選項打勾,點擊右下角Register的按鈕。跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第三步:如果出現下圖的畫面,就表示申請成功了,下圖紅色方框處的 keys欄位在安裝完外掛會使用到,請先保留網頁。
Google Invisible reCAPTCHA 教學 隱形 驗證碼
第四步:在WordPress側邊工具欄 外掛選項,中點選安裝外掛。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第五步:在關鍵字的部分輸入Invisible reCAPTCHA for WordPress,請認明作者的名字是Mihai Chelaru ,接下來點選立即安裝。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第六步:如等待安裝完畢啟用即可,在外掛→已安裝外掛中可以找到Invisible reCAPTCHA表示安裝成功。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑

• 了解Invisible reCAPTCHA使用外掛的設定

第一步:在設定中點選Invisible reCAPTCHA,進入到外掛的設定頁面。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第二步:在下圖中 Your Site Key 以及 Your Secret Key 的欄位對應到剛剛在第一小節第二步驟中所申請到的 Site Key及 Secret Key,複製貼上即可。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第三步:如圖所示,記得不要貼錯欄位,如果網站同時也有申請reCAPTCHA v2,不要貼到reCAPTCHA v2的金鑰數值。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第四步:在Language的部分選擇Chinese (Tradtional),這裡設定的是reCAPTCHA圖示上顯示的語言,也就是一開始提到的在登入或註冊畫面中會顯示的reCaptcha圖示。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑

第五步:Badge Position可以設定 reCAPTCHA圖示所要顯示的位置,如果是不想影響使用者體驗,建議是放置在左下。

跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第六步:在外掛左側列表清單中點選WordPress,這裡是設定在哪些頁面的表單要啟用reCAPTCHA,由上至下分別是:登入WordPress後台頁面、網站註冊頁面、留言系統頁面、重設密碼頁面,在選項後方打勾代表允許驗證。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第七步:在勾選登入WordPress後台頁面可以看到如下圖中右下角會有reCAPTCHA驗證機制的圖示,表示已啟用了。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第八步:當無法判別是否為機器人時,會跳出如下圖的圖片驗證視窗,只要點選要求的部分,就可以通過驗證。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑
第九步:圖一的留言系統亦同,會出現驗證機制的圖示,圖二的聯絡表單在點選傳送時也會直接出現驗證碼。
跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑

 

跳過recaptcha 驗證 - Google Invisible reCAPTCHA 隱形驗證碼 教學 |鵠學苑

 

結語:

記得在2~3年前筆者在瀏覽網站時想要留言,還必須看著模糊不清的圖片或者扭曲的英文數字,一個一個輸入英文字母來進行驗證,隨著時間不斷的推移,已經變化成可以直接打勾即驗證,或者連打勾都不用直接點選提交或傳送的按鈕即可,不禁令人感概網路技術進步之快。既然Google推出了如此方便的驗證機制,正在學習架站的你也要快點跟上時代的潮流,為自己的網站添加reCAPTCHA驗證機制,不只是保護自身網站安全,也可以提高網站帶給使用者的信賴度,不會因為看到太多了垃圾留言或廣告,導致使用者給予網站負面評價,一定要記得,網站畢竟還是以人為本,要多以使用者的角度來看到架站這件事,才能夠有機會創造出高流量、高品質的網站!今天的教學到這裡告一段落了,不要忘記持續關注鵠學苑的最新文章,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

Google 相關教學文章:

Google地圖無法顯示,出現浮水印? 申請 API 帳單資料流程教學

Google Map 自訂外觀 – 客製化 Google 地圖樣式教學

Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法

Google Maps JavaScript API 申請 – 網站啟用 Google 地圖 教學

Google AdSense 教學 – AdSense申請在 WordPress 加入網站廣告

Google網站管理員 ( Search Console ) 驗證網站所有權的三種方式

Google reCAPTCHA 教學 我不是機器人 驗證按鈕 架站必學技能

使用 Google 自訂搜尋引擎取代WordPress站內搜尋步驟教學

Google 字體下載 – WordPress 字體快速分析及網頁字體設定

Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁 必學技能!

Google Page Speed Insight 網站速度測試

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
分享在 twitter
Twitter
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top