Google驗證碼reCAPTCHA接入Web

阿新 • • 發佈：2019-01-21

1. 介紹

reCAPTCHA是google旗下的驗證碼服務（免費的），當然要保證網路能開啟google才行，所以常用於國外的網站。
官網：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進行測試：
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?onload=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引數

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

在引用recaptcha的api時，url上可以配置一些引數，如下：

引數名稱	是否可選	值	描述
onload	是	函式名稱	定義載入完成的回撥函式名稱
render	是	explicit 或 onload(預設)	當api載入好之後是否直接在類名為g-recaptcha的標籤上渲染recaptcha。預設的onload是要渲染，explicit是不渲染
hl	是	recaptcha顯示語言，如果未指定，自動檢測使用者的語言。

[1] onload

<html>
  <head>
    <title>reCAPTCHA demo</title>
     <script src="https://www.google.com/recaptcha/api.js?onload=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

設定為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自定義引數

在上文的接入章節中提到了，有兩種接入的方式，兩種方式都可以進行自定義配置。

類名為g-recaptcha的標籤上的屬性	grecaptcha.render引數	必填	值
data-sitekey	sitekey	是	網站sitekey
data-theme	theme	dark或light(預設)	主題顏色
data-size	size	compact或normal(預設)	框大小
data-tabindex	tabindex	預設為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	驗證成功回撥函式	g-recaptcha-response token會作為引數傳遞到回撥函式中
data-expired-callback	expired-callback	驗證失效回撥函式	使用者需要重新驗證
data-error-callback	error-callback	錯誤回撥函式	因為網路等問題無法驗證，通過回撥函式提醒使用者重試

[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>

在回撥函式robotVerified中接受到的這個引數就是g-recaptcha-response token（注意：每次都不一樣）。如下：

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

(3) JavaScript API

方法	引數	返回	描述
`grecaptcha.render(container,parameters)`	【container】id名稱(字串) or document.getElementById(‘example1’) 【parameters】參照上節內容，如`{"sitekey": "your_site_key", "theme": "light"}`	widget id	在container指定的標籤內渲染reCAPTCHA模組
`grecaptcha.reset(opt_widget_id)`	widget id(可選，省略時預設為第一個建立的模組)	-	重置reCAPTCHA
`grecaptcha.getResponse(opt_widget_id)`	widget id(可選，省略時預設為第一個建立的模組)	【未通過】”“ 【已通過】g-recaptcha-response token	獲得reCAPTCHA的結果響應

[1] render

<html>
  <head>
    <title>reCAPTCHA demo</title>
    <script src="https://www.google.com/recaptcha/api.js?onload=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?onload=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?onload=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>

Google驗證碼reCAPTCHA接入Web

1. 介紹 reCAPTCHA是google旗下的驗證碼服務（免費的），當然要保證網路能開啟google才行，所以常用於國外的網站。官網：https://developers.google.com/recaptcha/ 2. 接入 (

在國內使用Google驗證碼reCaptcha

　　　　如今各大網站都不可缺少的一部分就是驗證碼，驗證碼具有防止惡意批量操作，保護賬戶安全等作用。但是現在各種暴力破解驗證碼的手段層出不窮，驗證碼的保護也就失去了意義。所以各大平臺為了應對這種情況也是使用類似滑動拼圖（京東、嗶哩嗶哩等）看圖識物（12306）等各種辦法，但是國內的驗證碼平臺大多是收費的，那有沒

ASP.NET Core 使用 Google 驗證碼（reCAPTCHA v3）代替傳統驗證碼

github settings src erro 需要 tar 賬號繼承 ptc 寫在前面友情提示： Google reCAPTCHA(v3下同) 的使用不需要“梯子”，但申請賬號的時候需要！ Google reCAPTCHA 的使用不需要“梯子”，但申請賬號的時候需

Google驗證碼外掛maven地址

<dependency> <groupId>com.github.axet</groupId> <artifactId>kaptcha<

springboot登陸頁面圖片驗證碼簡單的web項目

登陸 ans att details pragma eth tail err error 目錄寫在前面 1 生成驗證碼的工具類 2 頁面代碼 3 獲取code和驗證cod

SSM-網站後臺管理系統制作（3）---Google的reCaptcha驗證碼

　　網上找了好久，也不知道怎麼接入，後來看到一篇部落格才搞好　　　　reCaptcha官網：https://www.google.com/recaptcha/admin#site/344147946 　　參考部落格：https://blog.csdn.net/baidu_38990811/article

網站驗證碼WEB前端接入例項

以網易雲易盾驗證碼為參考案例：相容性IE7+、Chrome、Firefox、Safari、Opera、主流手機瀏覽器、iOS 及 Android上的內嵌Webview開始使用引入初始化JS <script src="//cstaticdun.126.net/load.m

Web驗證碼圖片的生成-基於Java的實現

submit esc page resp ioe 代碼 oge cnblogs pro 驗證碼圖片是由程序動態產生的，每次訪問的內容都是隨機的。那麽如何采用程序動態產生圖片，並能夠顯示在客戶端頁面中呢？原理很簡單，對於java而言，我們首先開發一個Servlet，這個Se

Google Kaptcha驗證碼的使用

buffer word light nal mave ets ttr ref jpg 原文：http://www.kailing.pub/article/index/arcid/92.html Kaptcha是什麽？ kaptcha 是谷歌開源的非常實用的驗證碼生成工具

Spring MVC 中使用 Google kaptcha 驗證碼

實用 pri 集成 auto req post bsp produce target 驗證碼是抵抗批量操作和惡意登錄最有效的方式之一。驗證碼從產生到現在已經衍生出了很多分支、方式。google kaptcha 是一個非常實用的驗證碼生成類庫。通過靈

基於web的網上書城系統開發-----登錄註冊擴展-------驗證碼功能

tex puts oid stringbu 圖片 nds 服務器端 raw 輸出流 public class CheckCode extends HttpServlet { private static final long serialVersionUID = 1

java接入創藍253短信驗證碼

closed time ria new rop line put stc pat 說明項目是springboot框架 1.短信配置文件包含驗證碼發送路徑、用戶名、密碼 chuanglan.requesturl= chuanglan.account=

java圖形驗證碼生成工具類及web頁面校驗驗證碼

組合 line des resp word buffere 需要 case ali 最近做驗證碼，參考網上案例，發現有不少問題，特意進行了修改和完善。驗證碼生成器：[ht

APP、網站等註冊、登錄、改密等發送驗證碼短信的接入流程

PHP 短信驗證碼 APP 註冊登錄 1.登錄 https://zz.253.com/site/login.html 2.獲取接口API賬號，密碼：選擇任意產品>激活>企業認證（上傳公司營業執照）3.申請簽名（以公司簡稱或縮寫命名）備註：平臺申請簽名，API接口加上申請簽名4.模板

【源碼分享】php怎樣接入短信驗證碼，對接短信驗證碼接口

要求 reg eth pad 收集我們 borde value 一個今天公司提出一個需求，要在現有項目上收集註冊用戶的真實手機號，由於之前沒有接觸過這一塊，只能尋求度娘的幫助，經過一天的努力，終於完成了，現整理記錄下已備查閱。 1 解決方案：在註冊時要求用戶進行手機驗證

web登陸驗證碼驗證

package util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.FileOut

WEB——驗證碼生成、IO儲存、二進位制傳輸

執行下段程式，瀏覽器訪問127.0.0.1:8000 即可在頁面展現驗證碼程式碼包含了驗證碼的生成　io儲存　二進位制資料傳輸等知識點 # coding=utf-8 # wsgi_server.py import random import string import base64

CTF-web 第六部分驗證碼類和初步XSS知識

在登陸中通常我們需要驗證碼，但有些時候在設計的時候會存在一些漏洞。 1）一次驗證在驗證中隨意填寫賬戶密碼驗證碼正確填寫 username=admin&pwd=1234&vcode=28ps&submit=submit pw

一步一步實現web程式資訊管理系統之三----登陸業務邏輯實現（驗證碼功能+引數獲取）

本篇緊接著上一篇文章[一步一步實現web程式資訊管理系統之二----後臺框架實現跳轉登陸頁面] 驗證碼功能一般驗證碼功能實現方式為，前端介面訪問一個url請求，後端服務程式碼生成一個圖片流返回至瀏覽器，瀏覽器通過img標籤來展示圖片資訊，其流程模式如下所示：前端介面前端介面需

python selenium接入打碼平臺破解豆瓣驗證碼登入

from selenium import webdriverimport requestsimport timeimport refrom chaojiying import Chaojiying_Clientfrom selenium.common.exceptions import NoSuchEleme

Google驗證碼reCAPTCHA接入Web

1. 介紹

2. 接入

(1) site key

(2) 方式一：DOM中加入

(3) 方式二：Js 渲染

3. 配置

(1) 引用api.js的url引數

[1] onload

[2] render

[3] hl

(2) reCAPTCHA自定義引數

[1] theme

[2] size

[3] data-callback

(3) JavaScript API

[1] render

[2] reset

[3] getResponse

相關推薦