npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

google-recaptcha-v2

v1.0.4

Published

A simple library of captcha based on Google reCAPTCHA v2.

Downloads

528

Readme

google-recaptcha-v2

A simple library of captcha based on Google reCAPTCHA v2.

Install

Using unpkg CDN

<script src="https://unpkg.com/google-recaptcha-v2/index.js"></script>

Using npm

npm install google-recaptcha-v2 --save-dev

Usage

Import required html tag

The easiest method for using the invisible reCAPTCHA widget on your page. The necessary attributes are a class name 'g-recaptcha', your site key in the data-sitekey attribute, and the name of a JavaScript callback to handle completion of the captcha in the data-callback attribute.

<div id="recaptcha" class="g-recaptcha" style="display:none"></div>

you can get data-sitekey from Google reCAPTCHA Admin Console

Define the callback function of man-machine verification

This is data-callback attribute.

function getCaptchaToken(token) {
    // get token from Google reCAPTCHA Server
    if (token) {
        // Next step code: AJAX request the relevant verification interface of the server, check with the API of the Google man-machine verification server, and confirm whether the verification is passed or not.
    }
}

Initialize JSSDK

Example-CDN

<script>
    // Initialize JSSDK of Google reCAPTCHA v2
    GoogleReCaptcha.init({
        siteKey: '_your_site_key_',
        callback: getCaptchaToken
    })
</script>

Example-CommonJS

var GoogleReCaptcha = require('google-recaptcha-v2');
GoogleReCaptcha.init({
    siteKey: '_your_site_key_',
    callback: getCaptchaToken
})

Man-machine verification enabled

you can validate by click button. Like this, just register click function.

var element = document.getElementById('validate');
element.onclick = GoogleReCaptcha.validate;

Method

Initialize Google reCAPTCHA

GoogleReCaptcha.init(options)

  • options => {Object} Required. The options of Google reCAPTCHA v2.

options

  • siteKey => {String} Required. Alias of data-sitekey.
  • callback => {Function} Required. Alias of data-callback. The name of your callback function, executed when the user submits a successful response. The g-recaptcha-response token is passed to your callback.
  • id => {String} Optional. The HTML element to render the reCAPTCHA widget. Specify the ID of the container. If you pass a valid value, Explicit Render will be used first, otherwise Auto Render will be used.
  • host => {String} Optional. That means api hostname, default use www.google.com. Specially, some areas require network proxying, such as China, just set host: www.recaptcha.net.
  • expiredCallback => {Function} Optional. The name of your callback function, executed when the reCAPTCHA response expires and the user needs to re-verify.
  • errorCallback => {Function} Optional. The name of your callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry. You can write a demo like this.
function errorCallback(res) {
    var code = res.code;// error code
    var message = res.message;// error message
    // console.log(message)
    switch (code) {
        // The JSSDK of Google reCAPTCHA load unsuccessfully
        case -1:
            // you can reload the JSSDK of Google reCAPTCHA or check again
            break;
            // Google reCAPTCHA encounters an error(usually network connectivity)
        case 10001:
            break;
        default:
            // set default operation
    }
}
  • debug => {Boolean} Optional. The debug mode, default false. If you set true, you can get some debug message about Google reCAPTCHA on console.

Start man-machine verification

GoogleReCaptcha.validate(event)

  • event => Required. DOM event.

License

google-recaptcha-v2 is MIT licensed.