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

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

1.介紹Google reCAPTCHA申請流程

2.了解如何在聯絡表單中啟用reCAPTCHA驗證

歡迎回到鵠學苑!WordPress網頁設計超詳細攻略 – Google reCAPTCHA 教學 我不是機器人 驗證 按鈕 架站必學技能,在這篇 reCAPTCHA 架設的教學文章中,鵠學苑將告訴大家如何到Google 申請最新的 reCAPTCHA(v2),以及在Contact Form 7聯絡表單中加入reCAPTCHA我不是機器人 的驗證按鈕。那麼什麼是reCAPTCHA功能呢?簡單來說就是避免有心人士使用機器人在網站中大量散播廣告或者是垃圾郵件,或者阻擋自動化的惡意軟體註冊網站創立假帳號,發表不實言論等,對於網站管理者而言是一個相當重要的WordPress相關工具Google reCAPTCHA有分成兩種類型,一種是本篇教學要介紹的 reCAPTCHA(v2) ,另外一種則是 Invisible ReCAPTCHA ,如果說想要多了解這兩種驗證方法的差異性,可以參考這一篇文章:[ 跳過recaptcha 驗證 ] – Google Invisible reCAPTCHA 隱形驗證碼 教學

現在是互聯網的時代,科技的進步讓我們可以隨時隨地的使用智慧型手機無線上網,當遇到任何問題,都能夠隨時透過上網來找到答案(雖然網路上的未必是最正確的解答),不管是哪一方面的問題,無外乎就是透過查找部落格、專業知識網站、網路論壇等等來獲得想要了解的答案,但是當網友所分享的內容並不完整或者對於答案有所疑惑,大部分的使用者都會去觀看其他網友留下的評論或回覆,一方面是尋求解答,另一方面是查看這篇文章或商品介紹得到怎樣的評價,如果多數人對於內容是保持正面傾向,那麼內容自然是可信賴度較高。

透過上述的情境描述, 相信聰明如你,應該明白無論是哪一種類型的網站,留言評價是多麽重要吧!與使用者互動的網頁區塊常常被忽略,但這個部分卻是很大程度影響到使用者對於網站內容的體驗,如果說今天我們在網路上查找 WordPress 網頁設計 的相關部落格或網站設計公司,點擊進入網站後發現在留言的區塊充滿了色情、賭博、直銷等垃圾留言或廣告,會懷疑這個站點是不是所謂的釣魚網站或者對於這個網站的內容信任度會降低,如果任由這樣的狀況發生,那對於網站的影響是相當嚴重的。本篇文章主要是以 reCAPTCHA(v2) 的驗證模式來教學,接下來跟著鵠學院的腳步,讓我們開始學習吧!(可點擊下方Google官方影片觀看對 reCAPTCHA 介紹

Google reCAPTCHA驗證申請網址:https://www.google.com/recaptcha/intro/invisible.html

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

 

• 介紹Google reCAPTCHA申請流程

第一步:首先必須要有一個Google帳號,登入之後,點擊 reCAPTCHA 進入如下圖的介紹頁面,如果確定以登入Google帳號,直接點擊右上方的 Get reCAPTCHA 

Google reCAPTCHA 教學 我不是機器人 驗證按鈕

第二步:進入後會看到如下圖所示的申請頁面,主要是為想申請reCAPTCHA驗證功能的網站列表建立API keys,填寫欄位的部分以下開始說明:

  1. Label:標示網站名稱,作為已申請reCAPTCHA網站列表中的識別,比如鵠學苑的網址是 www.blog.design-hu.com,那麼在Label的欄位中填入blog.design-hu即可。
  2. Choose the type of reCAPTCHA:選擇reCAPTCHA的類型,Google最早之前是使用reCAPTCHA v1,必須要輸入圖形驗證碼後才能夠通過驗證,而就在今年(2018/03/31),Google正式取消reCAPTCHA v1的使用(參考 https://developers.google.com/recaptcha/docs/faq ),而改以reCAPTCHA v2,也就是我們今天所要教學的類型。第二個選項Invisible reCAPTCHA是不同類型的驗證方式,也就是不會顯示出在reCAPTCHA v2中的驗證方框,在WordPress網站的架設上可以外掛來實現 ; 而第三個reCAPTCHA Android是用於App應用的驗證,之後會再推出相關的教學。
  3. Domains:這個欄位要輸入的是網域名稱,可以輸入多筆不同網站的網域名稱,比如鵠學苑的網址是 www.blog.design-hu.com,鵠崙設計的網址是https://www.design-hu.com/,在這個欄位就是輸入 blog.design-hu.com以及design-hu.com。
  4. Accept the reCAPTCHA Terms of Service:使用者同意Google使用及設計網站資訊的選項,直接勾選即可。
  5. Send alerts to owners:如果網站內reCAPTCHA驗證功能發生錯誤或網站流量因惡意重複性登入而有異常,將發送資訊到網站管理員的Google帳戶的信箱,請直接勾選。
  6. Regsiter:全部設定完請點選此按鈕以進行下一步驟。

Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第三步:將網站加入 reCAPTCHA 驗證後,會產生如下圖所示的 keys 以及將 reCAPTCHA 放入網站的步驟,在圖中紅色方框圈選處有一段 Java script 的程式碼,要將其加入到 HTML 中 <head> 的位置,讓網站在載入時可以執行 reCAPTCHA 驗證的命令。

Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第四步:進入到 WordPress 後台,找到外觀→主題編輯器,如下圖中右上角的部分選擇網站使用主題的名稱,在下方列表中找到head.php這個檔案,點擊進入。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第五步:找到頁首元素的區塊,並且將剛JAVA script 的程式碼復制貼上到</head>的上方,按下儲存的按鈕,即完成加入執行reCAPTCHA驗證命令的步驟。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕

• 了解如何在聯絡表單中啟用reCAPTCHA驗證

第一步:在如果沒有安裝 Contact Form 7 聯絡表單,可以參考這篇教學文章:Contact Form 7 教學 WordPress 表單,進入到聯絡表單的設定頁面,點選如圖一中加入reCAPTCHA 驗證的核取方塊,會出現圖二的畫面,要求安裝Api 金鑰組。Google reCAPTCHA 教學 我不是機器人 驗證按鈕
Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第二步:在後台側邊工具欄聯絡表單的子項目中可以找到”整合“的選項,進入後點選如下圖紅色方框所標示 設定金鑰 的按鈕。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第三步:如回到剛剛申請reCAPTCHA所顯示的數值頁面,找到keys的部分,分別有Site keySecret key兩個欄位。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第四步:如下圖一在站台金鑰的欄位貼上Site key的數值,秘密金鑰貼上Secret key的數值,按下儲存按鈕後會跳到圖二畫面,表示設定完成。Google reCAPTCHA 教學 我不是機器人 驗證按鈕
Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第五步:回到聯絡表單的設定畫面,點選reCAPTCHA核取方塊。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第六步:此時reCAPTCHA驗證功能已經啟用了,因此可以插入reCAPTCHA我不是機器人的按鈕。也可以自行設定reCAPTCHA按鈕的大小以及樣式,設定完成點選插入標籤。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第七步:插入標籤後reCAPTCHA會以短代碼的方式出現在設定畫面中,這裡我將reCAPTCHA的標籤設定在傳送的上方。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕

第八步:回到網頁前端,可以看到reCAPTCHA驗證的按鈕已經加入成功,並開始限制惡意軟體自動發送垃圾或釣魚電子郵件的,將空間保留給真正的使用者。

Google reCAPTCHA 教學 我不是機器人 驗證按鈕
第九步:檢查reCAPTCHA驗證的功能,當輸入資訊後沒有勾選我不是機器人的方框,將會出現請驗證的字串並且不能發送郵件,表示reCAPTCHA驗證功能正常運作。
Google reCAPTCHA 教學 我不是機器人 驗證按鈕

結語:

在教學的最後,簡單的說明 reCAPTCHA 的應用,因為在本篇文章中是對Contact Form 7 這個WordPress外掛來做安裝示範,如果是想要加入 reCAPTCHA 驗證到留言功能中,應該要麽做?在使用 WordPress 架設的網站中,可以使用 Invisible reCaptcha for WordPress 來實現,這套外掛中只要填入在本篇教學文章中Site key及Secret key這兩個欄位的金鑰,就可以直接啟用reCAPTCHA驗證的功能到其所支援的留言外掛或網頁位置,這也是為什麽鵠學苑一直推薦大家使用 WordPress 來架站的原因,對於新手站長來說如果要透過寫入PHP來寫入程式碼以實現 reCAPTCHA 驗證的功能,其實是相當耗費時間的,在 WordPress 中透過外掛即可輕鬆完成,把時間花在其它真正該使用的地方上,才是正確的網站架設做法。今天的教學到這裡告一段落了,不要忘記持續關注鵠學苑的最新文章,想學習超詳細的WordPress攻略嗎??來 鵠學院 就對了!我們下次的教學見~

Google 相關教學文章:

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

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

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

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

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

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

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

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

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

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

Google Page Speed Insight 網站速度測試

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

鵠學苑

我們是由一群熱愛 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