隱藏 Google reCAPTCHA v3 符號方法、規範、注意事項

隱藏 Google reCAPTCHA v3 符號方法以及注意事項

reCAPTCHA 是 WordPress 網站必裝的驗證程式,主要是用來過濾「非人類的程式自動機器人」,除了在登入頁面會用到 reCAPTCHA 之外⋯⋯凡舉 WordPress 網站上的所有「表單系統」都應加裝此此功能來對抗氾濫的機器人大軍!

 

WordPress 網站突然出現 reCAPTCHA 的圖示

造九全站右下角都跑出了 reCAPTCHA 的 icon 圖示?

當然叔叔我用 WordPress 也不是兩三天了,知道那是 reCAPTCHA v3 的圖示,但我納悶的是⋯⋯我只裝在登入口,且裝的還是 v2 版本。怎麼會突然全站都有 v3 的圖示?

 

而因為 reCAPTCHA 通常用在表單系統,很快的我想到了昨天剛為網站裝了訂閱電子報的功能。推測是電子報外掛程式自動開啟了 reCAPTCHA v3 的驗證功能。

補充:reCAPTCHA v2 和 v3 版本的差異

表單 reCAPTCHA v3 Demo 右下角圖示
reCAPTCHA V3版本的圖示浮動在右下角,並且不需使用者點按,自動判定是否機器人
表單 reCAPTCHA v2 Demo 右下角圖示
reCAPTCHA V2版本為需要使用者點按,確認是否為真人登入

千萬不要直接關掉 reCAPTCHA 功能

本來我想去昨天裝設電子報的 Bloom 外掛程式設定裡,找到可以關閉 reCAPTCHA 驗證的選項。但轉念一想不對!現在機器人真的太多了!

只要一關掉,難免會被很多機器人註冊,這些名單不但是無效的、還佔用你的電子報訂閱額度(超過額度就要付費給電子報服務了)。

能寫程式隱藏它嗎?可以!但請依照 Google 規範處理

本來也是想直接寫 CSS 隱藏它!但網路很多服務是有規範的,尤其是 Google 我可得罪不起,萬一帳號被它停權可哭笑不得!

幸好我有查一下 Google 的規範,規範之中明確的告訴你關於隱藏 reCAPTCHA 圖案這件事:

https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

 

懶得去看的人我直接白話翻譯,Google 說:「你可以隱藏圖示,我連隱藏圖示的 CSS 程式都告訴你怎麼寫!但記得在網站上加上你有用我的 reCAPTCHA 服務噢!啾咪( ^.< )」。

 

是的,答案就是可以隱藏!只要在表單下面、或是網站上加註:

 


This site is protected by reCAPTCHA and the Google
<a href="”https://policies.google.com/privacy”">Privacy Policy</a> and
<a href="”https://policies.google.com/terms”">Terms of Service</a> apply.

 

reCAPTCHA v3 隱藏圖示 依照規範加註說明 Google Demo 版本
可以像這樣加注在表單下方,此圖 by Google 說明

然後你就可以用 CSS 語法,來隱藏 reCAPTCHA 圖示:

.grecaptcha-badge { visibility: hidden; }

造九網站實作隱藏 reCAPTCHA 圖示範例:

reCAPTCHA v3 隱藏圖示 依照規範加註說明
我並沒有加注在表單下方,而是加注在網站底部,我想這應該也符合規範,畢竟字面就是指整個網站受到 reCAPTCHA 機制保護,且本來的浮動也是整個網站性的。
reCAPTCHA v3 隱藏圖示 依照規範加註說明 繁體中文版本
然後我再改成中文的版本,重點是後面兩個連結一定要放!

聲明中文版本程式碼:

本站採用 reCAPTCHA 保護機制 <a href="https://policies.google.com/privacy">隱私權</a> &amp; <a href="https://policies.google.com/terms">條款</a>

如果隱藏 reCAPTCHA 圖示的語法一直無法生效,請加入強制的最高級如下再試試:

.grecaptcha-badge { visibility: hidden !important; }
上一篇WordPress 被駭全記錄,後續如何加強網站安全? 下一篇架設好 WordPress 你一定要先做的 4 件事!