Google驗證碼reCAPTCHA接入Web

v2的版本

1. 介紹

reCAPTCHA是google旗下的驗證碼服務(wù)（免費(fèi)的）厦幅，當(dāng)然要保證網(wǎng)絡(luò)能打開google才行，所以常用于國外的網(wǎng)站慨飘。如果需要在國內(nèi)使用确憨，只需將所有的www.google.com替換成www.recaptcha.net即可。

官網(wǎng)：https://developers.google.com/recaptcha/

2. 接入

(1) site key

To start using reCAPTCHA, you need to sign up for an API key pair for your site. The key pair consists of a site key and secret key. The site key is used to invoke reCAPTCHA service on your site or mobile application. The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user’s response. The secret key needs to be kept safe for security purposes.

申請Site Key: http://www.google.com/recaptcha/admin

Verifying the user’s response：

https://developers.google.com/recaptcha/docs/verify

在本地開發(fā)時瓤的，可以使用此site key進(jìn)行測試：

6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

(2) 方式一：DOM中加入

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js" async defer></script>

? </head>

? <body>

? ? <form action="?" method="POST">

? ? ? <div class="g-recaptcha" data-callback="robotVerified" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

? ? </form>

? </body>

? <script>

? ? function robotVerified(){

? ? ? console.log('Verified: not robot');

? ? }

? </script>

</html>

(3) 方式二：Js 渲染

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js?onloadCallback&render=explicit" async defer></script>

? </head>

? <body>

? ? <div id="robot"></div>

? ? <script type="text/javascript">

? ? ? var onloadCallback = function() {

? ? ? ? console.log("grecaptcha is ready!");

? ? ? ? //render grecaptcha

? ? ? ? grecaptcha.render('robot', {

? ? ? ? ? 'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',

? ? ? ? ? 'callback': function () {

? ? ? ? ? ? console.log('Verified: not robot');

? ? ? ? ? }

? ? ? ? });

? ? ? };

? ? </script>

? </body>

</html>

3. 配置

(1) 引用api.js的url參數(shù)

在引用recaptcha的api時休弃，url上可以配置一些參數(shù)，如下：

參數(shù)名稱? ? 是否可選? ? 值? ? 描述

onload? ? 是? ? 函數(shù)名稱? ? 定義加載完成的回調(diào)函數(shù)名稱

render? ? 是? ? explicit 或 onload(默認(rèn))? ? 當(dāng)api加載好之后是否直接在類名為g-recaptcha的標(biāo)簽上渲染recaptcha圈膏。默認(rèn)的onload是要渲染塔猾，explicit是不渲染

hl? ? 是? ? 點(diǎn)擊查詢不同語言對應(yīng)的值? ? recaptcha顯示語言，如果未指定稽坤，自動檢測用戶的語言丈甸。

[1] onload

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js?onloadCallback" async defer></script>

? </head>

? <body>

? ? <form action="?" method="POST">

? ? ? <div class="g-recaptcha"data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

? ? </form>

? </body>

? <script>

? ? function onloadCallback(){

? ? ? console.log("grecaptcha is ready!");

? ? }

? </script>

</html>

[2] render

設(shè)置為explicit后，api加載完成以后也不會自動渲染rechaptcha框尿褪，頁面會顯示空白睦擂。

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>

? </head>

? <body>

? ? <form action="?" method="POST">

? ? ? <div class="g-recaptcha"data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

? ? </form>

? </body>

</html>

[3] hl

將hl配置為zh-CN后，顯示簡體中文界面杖玲。

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js?hl=zh-CN" async defer></script>

? </head>

? <body>

? ? <form action="?" method="POST">

? ? ? <div class="g-recaptcha"data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

? ? </form>

? </body>

</html>

(2) reCAPTCHA自定義參數(shù)

在上文的接入章節(jié)中提到了顿仇，有兩種接入的方式，兩種方式都可以進(jìn)行自定義配置摆马。

類名為g-recaptcha的標(biāo)簽上的屬性? ? grecaptcha.render參數(shù)? ? 必填? ? 值? ? 描述

data-sitekey? ? sitekey? ? 是? ? ? ? 網(wǎng)站sitekey

data-theme? ? theme? ? ? ? dark或light(默認(rèn))? ? 主題顏色

data-size? ? size? ? ? ? compact或normal(默認(rèn))? ? 框大小

data-tabindex? ? tabindex? ? ? ? 默認(rèn)為0? ? The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier.

data-callback? ? callback? ? ? ? 驗證成功回調(diào)函數(shù)? ? g-recaptcha-response token會作為參數(shù)傳遞到回調(diào)函數(shù)中

data-expired-callback? ? expired-callback? ? ? ? 驗證失效回調(diào)函數(shù)? ? 用戶需要重新驗證

data-error-callback? ? error-callback? ? ? ? 錯誤回調(diào)函數(shù)? ? 因為網(wǎng)絡(luò)等問題無法驗證臼闻，通過回調(diào)函數(shù)提醒用戶重試

[1] theme

dark和light如下

[2] size

compact和normal如下：

[3] data-callback

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js" async defer></script>

? </head>

? <body>

? ? <form action="?" method="POST">

? ? ? <div class="g-recaptcha" data-callback="robotVerified" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>

? ? </form>

? </body>

? <script>

? ? function robotVerified(data){

? ? ? console.log(data);

? ? }

? </script>

</html>

在回調(diào)函數(shù)robotVerified中接受到的這個參數(shù)就是g-recaptcha-response token（注意：每次都不一樣）。如下：

03AHqfIOks78_xzIktpZlVUGhCIiRruEDFaP9aAir-ChZpGbSdQ3JcUpCuEQ9KwuynC5M-TR8wQfppmIJqIXBGl1xvusZqj444QqI2dhyTXx6LmL9y00knaFIRn5KC9ILWX-H3Hgv66mamhakmo3x1EIEoiA03EixOtPgbW_Q68dDl48B0_8qHl6o9KOfLiolqdwIApi61FZCqUXhvPKZc55i2FVA2qvsh0oauN0YdHWG_ReyXlW2vdS-A0U0E28NWafM1-IfDnxOBchxSE-uYIiXB4QeruyeNaA

(3) JavaScript API

方法? ? 參數(shù)? ? 返回? ? 描述

grecaptcha.render(container,parameters)? ? 【container】id名稱(字符串) or document.getElementById(‘example1’)

【parameters】參照上節(jié)內(nèi)容囤采，如{"sitekey": "your_site_key", "theme": "light"}? ? widget id? ? 在container指定的標(biāo)簽內(nèi)渲染reCAPTCHA模塊

grecaptcha.reset(opt_widget_id)? ? widget id(可選述呐，省略時默認(rèn)為第一個創(chuàng)建的模塊)? ? -? ? 重置reCAPTCHA

grecaptcha.getResponse(opt_widget_id)? ? widget id(可選，省略時默認(rèn)為第一個創(chuàng)建的模塊)? ? 【未通過】""

【已通過】g-recaptcha-response token? ? 獲得reCAPTCHA的結(jié)果響應(yīng)

[1] render

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js?onloadCallback&render=explicit" async defer></script>

? </head>

? <body>

? ? <div id="robot1"></div>

? ? <div id="robot2"></div>

? ? <script type="text/javascript">

? ? ? var onloadCallback = function() {

? ? ? ? var widge1 = grecaptcha.render('robot1', {

? ? ? ? ? 'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',

? ? ? ? ? theme: 'dark'

? ? ? ? });

? ? ? ? console.log(widge1); //0

? ? ? ? var widget2 = grecaptcha.render(document.getElementById('robot2'), {

? ? ? ? ? 'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',

? ? ? ? ? tabindex:'2'

? ? ? ? });

? ? ? ? console.log(widget2); //1

? ? ? };

? ? </script>

? </body>

</html>

[2] reset

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js?onloadCallback&render=explicit" async defer></script>

? </head>

? <body>

? ? <div id="robot"></div>

? ? <button onclick="resetRecaptcha()">重置</button>

? ? <script type="text/javascript">

? ? ? var widgeId;

? ? ? var onloadCallback = function() {

? ? ? ? widgeId = grecaptcha.render('robot', {

? ? ? ? ? 'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',

? ? ? ? });

? ? ? };

? ? ? function resetRecaptcha(){

? ? ? ? grecaptcha.reset(widgeId); // <---看這里

? ? ? }

? ? </script>

? </body>

</html>

[3] getResponse

<html>

? <head>

? ? <title>reCAPTCHA demo</title>

? ? <script src="https://www.google.com/recaptcha/api.js?onloadCallback&render=explicit" async defer></script>

? </head>

? <body>

? ? <div id="robot"></div>

? ? <button onclick="getResponseFromRecaptcha()">看看驗證通過了沒蕉毯？</button>

? ? <script type="text/javascript">

? ? ? var widgetId;

? ? ? var onloadCallback = function() {

? ? ? ? widgetId = grecaptcha.render('robot', {

? ? ? ? ? 'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',

? ? ? ? });

? ? ? };

? ? ? function getResponseFromRecaptcha(){

? ? ? ? var response = grecaptcha.getResponse(widgetId); // <---看這里

? ? ? ? if (response.length == 0) { //返回""或 token（如：03AHqfIOmtBMGg686uP3YPAN7hJyaqUi69SSrEnC3Km7Hcnr5y1u-A-yp8z28yBvgVxqWiRndLrXrk_TyJrdob3tVh4BGnI4YNsoKocqZmbilGnJRX6Mxxj6jQ0AkhoRangAVFmRFZyy7RH5u5ruM5t_H7-P4GNnaFUaMELgOYyJ5ZgUtEMwBS1iNrGg6B6MZmgd4kcJXhWYR4vU_RwqFOuzxd9NMF7OCLl8FzOhN4baI5S2krnORqMBkiWenKNUtCuKfB1HzGdiVog7mzBKJvseSBlAPXrTN-Gg)

? ? ? ? ? console.log('reCaptcha not verified');

? ? ? ? ? return false;

? ? ? ? } else {

? ? ? ? ? console.log('reCaptcha verified');

? ? ? ? ? return true;

? ? ? ? }

? ? ? }

? ? </script>

? </body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末乓搬，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子恕刘，更是在濱河造成了極大的恐慌缤谎，老刑警劉巖，帶你破解...
沈念sama閱讀 218,546評論 6贊 507
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件褐着，死亡現(xiàn)場離奇詭異坷澡，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)含蓉，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 93,224評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門频敛，熙熙樓的掌柜王于貴愁眉苦臉地迎上來项郊，“玉大人，你說我怎么就攤上這事斟赚∽沤担” “怎么了？”我有些...
開封第一講書人閱讀 164,911評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵拗军，是天一觀的道長任洞。經(jīng)常有香客問我，道長发侵，這世上最難降的妖魔是什么交掏？我笑而不...
開封第一講書人閱讀 58,737評論 1贊 294
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮刃鳄，結(jié)果婚禮上盅弛，老公的妹妹穿的比我還像新娘。我一直安慰自己叔锐，他們只是感情好挪鹏，可當(dāng)我...
茶點(diǎn)故事閱讀 67,753評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著愉烙，像睡著了一般讨盒。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上齿梁，一...
開封第一講書人閱讀 51,598評論 1贊 305
城市分裂傳說
那天催植，我揣著相機(jī)與錄音，去河邊找鬼勺择。笑死，一個胖子當(dāng)著我的面吹牛伦忠，可吹牛的內(nèi)容都是我干的省核。我是一名探鬼主播，決...
沈念sama閱讀 40,338評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼昆码，長吁一口氣：“原來是場噩夢啊……” “哼气忠！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起赋咽，我...
開封第一講書人閱讀 39,249評論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤旧噪，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后脓匿，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體淘钟，經(jīng)...
沈念sama閱讀 45,696評論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,888評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年陪毡，在試婚紗的時候發(fā)現(xiàn)自己被綠了米母。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片勾扭。...
茶點(diǎn)故事閱讀 40,013評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖铁瞒，靈堂內(nèi)的尸體忽然破棺而出妙色，到底是詐尸還是另有隱情，我是刑警寧澤慧耍，帶...
沈念sama閱讀 35,731評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布身辨，位于F島的核電站，受9級特大地震影響芍碧，放射性物質(zhì)發(fā)生泄漏煌珊。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,348評論 3贊 330
男人毒藥：我在死后第九天來索命
文/蒙蒙一师枣、第九天我趴在偏房一處隱蔽的房頂上張望怪瓶。院中可真熱鬧，春花似錦践美、人聲如沸洗贰。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,929評論 0贊 22
一樁弒父案陨倡，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽敛滋。三九已至，卻和暖如春兴革，著一層夾襖步出監(jiān)牢的瞬間绎晃，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,048評論 1贊 270
情欲美人皮
我被黑心中介騙來泰國打工杂曲，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留庶艾，地道東北人。一個月前我還...
沈念sama閱讀 48,203評論 3贊 370
代替公主和親
正文我出身青樓擎勘，卻偏偏與公主長得像咱揍，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子棚饵，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,960評論 2贊 355

Google驗證碼reCAPTCHA接入Web

推薦閱讀更多精彩內(nèi)容