reCAPTCHA

Displaying reCAPTCHA Without Plugins

This page explains how to display reCAPTCHA without using a plugin. We offer a variety of plugins for different applications and programming environments, such as PHP and ASP.NET, and we encourage you to look at our multiple plugins before proceeding with the "Do-It-Yourself" installation instructions below.

Overview

Before getting into the details, it's worth seeing a high-level overview of how reCAPTCHA works.

reCAPTCHA is a Web service, meaning that the CAPTCHA images are served directly from our servers to the end users. Below is the basic lifecycle of a reCAPTCHA challenge:

API diagram

  1. The user loads the web page with the reCAPTCHA challenge JavaScript embedded.
  2. The user's browser requests a challenge (an image with distorted text) from reCAPTCHA. reCAPTCHA gives the user a challenge and a token that identifies the challenge.
  3. The user fills out the web page form, and submits the result to your application server, along with the challenge token.
  4. reCAPTCHA checks the user's answer, and gives you back a response.
  5. If true, generally you will allow the user access to some service or information. E.g. allow them to comment on a forum, register for a wiki, or get access to an email address. If false, you can allow the user to try again.

This page focuses on the first three steps. We have a different page for the verification API.

How to make the CAPTCHA image show up

The first step in integrating reCAPTCHA is making the CAPTCHA image show up on your page. You can use either:

Use the AJAX API if you plan to display the reCAPTCHA widget on the fly based on some kind of user input. Use the standard API if you plan to show reCAPTCHA every time the user sees the page.

Challenge and Non-JavaScript API

To make the reCAPTCHA widget appear when your page loads, you will need to insert this snippet of JavaScript & non-JavaScript code in your <form> element and replace your_public_key with your public key:

  <script type="text/javascript"
     src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
  </script>
  <noscript>
     <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
         height="300" width="500" frameborder="0"></iframe><br>
     <textarea name="recaptcha_challenge_field" rows="3" cols="40">
     </textarea>
     <input type="hidden" name="recaptcha_response_field"
         value="manual_challenge">
  </noscript>

So your page will look something like this:

  <!-- ... your HTML content ... -->

  <form action="" method="post">

    <!-- ... your form code here ... -->

    <script type="text/javascript"
       src="http://www.google.com/recaptcha/api/challenge?k=your_public_key">
    </script>
    <noscript>
       <iframe src="http://www.google.com/recaptcha/api/noscript?k=your_public_key"
           height="300" width="500" frameborder="0"></iframe><br>
       <textarea name="recaptcha_challenge_field" rows="3" cols="40">
       </textarea>
       <input type="hidden" name="recaptcha_response_field"
           value="manual_challenge">
    </noscript>

    <!-- ... more of your form code here ... -->

  </form>

  <!-- ... more of your HTML content ... -->

There are two form fields:

  • recaptcha_challenge_field is a hidden field that describes the CAPTCHA which the user is solving. It corresponds to the "challenge" parameter required by the reCAPTCHA verification API.
  • recaptcha_response_field is a text field where the user enters their solution. It corresponds to the "response" parameter required by the reCAPTCHA verification API.

These two fields will be passed to the script on your server that processes this form and verifies the reCAPTCHA solution via the reCAPTCHA verification API.

AJAX API

To make the reCAPTCHA widget appear on the fly based on user input, you can use the reCAPTCHA AJAX API. (Here is a simple demo of the AJAX API.)

To use the AJAX API, you will first need to insert this snippet of JavaScript in the element of your HTML document:

  <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

This JavaScript file defines an object called Recaptcha. The methods of the Recaptcha object are outlined here.

Second, you will need to create an empty <div> element with an id in your HTML document in which the reCAPTCHA object will be placed.

Now, in order to create the reCAPTCHA widget, you will need to call the Recaptcha object's create method in response to some user action and replace:

  • your_public_key with your public key
  • element_id with the id of the div element you reserved for the reCAPTCHA widget
  •   Recaptcha.create("your_public_key",
        "element_id",
        {
          theme: "red",
          callback: Recaptcha.focus_response_field
        }
      );
    

    This creates a reCAPTCHA with the given public key in the element_div HTML element. In this example the "red" reCAPTCHA theme is used. Once the CAPTCHA area is created, the focus_response_field method will be called, focusing the reCAPTCHA area.

    Taking a closer look at the '''Recaptcha.create (public_key, element, options)''' method, there are 3 input parameters:

  • public_key: your public key
  • element: JavaScript Element object or the string ID of the element in your HTML document (we don't cover the JavaScript Element in this example)
  • options: JavaScript Dictionary with specific keys and values
  • Your HTML page should look something like this:

      <html>
    
        <head>
    
        <!-- ... your HTML  content ... -->
    
          <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
    
          <!-- Wrapping the Recaptcha create method in a javascript function -->
          <script type="text/javascript">
             function showRecaptcha(element) {
               Recaptcha.create("your_public_key", element, {
                 theme: "red",
                 callback: Recaptcha.focus_response_field});
             }
          </script>
    
          <!-- ... more of your HTML  content ... -->
    
        </head>
    
        <body>
    
          <!-- ... your HTML <body> content ... -->
    
          <div id="recaptcha_div"></div>
    
          <input type="button" value="Show reCAPTCHA" onclick="showRecaptcha('recaptcha_div');"></input>
    
         <!-- ... more of your HTML  content ... -->
    
        <body>
    
      </html>
    

    To verify the solution, you will need to pass two variables from the widget (along with a few other server side parameters) to the reCAPTCHA verification API. These variables can be accessed by the Recaptcha object's methods:

    • Recaptcha.get_challenge(): corresponds to the "challenge" parameter required by the reCAPTCHA verification API
    • Recaptcha.get_response(): corresponds to the "response" parameter required by the reCAPTCHA verification API

    Then call Recaptcha.destroy() after you submit a reCAPTCHA, as challenges cannot be attempted multiple times.

    Depending on your site's requirements, you may not need all of these functions; only Recaptcha.create() is strictly required. The HTML source of the AJAX demo is a good place to get started.

    Methods of the Recaptcha object

    The Recaptcha JavaScript object has various methods that may be helpful. Only methods documented in this section should be relied upon. Specifically, any methods beginning with an underscore are subject to change and should not be used.

    reload() Displays a new CAPTCHA.
    switch_type(newtype) Can be called with an argument 'image' or 'audio' to allow the user to switch the type of the CAPTCHA.
    showhelp() Displays a popup with reCAPTCHA instructions.
    get_challenge()
    get_response()
    Helper functions that return the reCAPTCHA challenge string and the response that the user has typed in to the response field. They return null if the widget isn't showing. Can be used with the AJAX API to retrieve the answers so that an XMLHttpRequest can be used to post the reCAPTCHA solution.
    focus_response_field() Gives focus to the reCAPTCHA response field.
    create(public_key, element, options) In the AJAX API, loads the reCAPTCHA widget into the given element.

    public_key is your reCAPTCHA public key. element can be either a JavaScript Element object or the string ID of the element. Recaptcha.create() sets the element's innerHTML, so the element should normally be empty. options is the RecaptchaOptions dictionary explained here; it lets you set the theme and tabindex of the reCAPTCHA widget. With the AJAX API, options can also include a callback field: a function that will be called after the widget is done loading. If callback is not specified, nothing is called back.

    destroy() In the AJAX API, removes the reCAPTCHA widget from the element (sets the element's innerHTML to the empty string) and also resets some internal state. You need to use this if the user cancels out of a dialog and you want to cleanly remove the widget from the page. The AJAX API only allows you to show one reCAPTCHA widget at a time. If you call Recaptcha.create() twice for some reason, the API will automatically destroy the old widget before creating the new widget. You can see this behavior in the AJAX demo.

    Further Reading

  • Verifying the User's Answer
  • Customizing Look and Feel
  • Tips and Guidelines
  • Troubleshooting
  • Autenticación obligatoria

    Tienes que acceder a Google+ para realizar esta acción.

    Acceder a...

    Desarrolladores de Google necesita tu permiso para realizar esta acción.