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

@opengsn/captcha-paymaster

v0.0.9

Published

A sample paymaster that pays only for validate captcha

Downloads

4

Readme

Captcha Support for Paymaster

This project demonstrate how a paymaster can use an external service (CAPTCHA) to avoid spam from anonymous calling users. The paymaster agrees to pay for requests, but wants to make sure a user can't abuse it.

This project adds captcha check to paymaster requests

It involves 3 components:

  1. A CaptchaPaymaster: a paymaster that requires a signed approvalData before it accepts a request.

  2. Captcha validation service, which takes the captcha response from the webapp, validates it with google, and generates a signed approvalData acceptable by the paymaster.

  3. The webapp, which uses "Google Recaptcha", the validation service and the CaptchaPaymaster.

Usage

  1. The paymaster in this project accepts all requests. You might want to fork it, inherit the CaptchaPaymaster, and add your restriction (e.g. limit only to specific target contract)

  2. register with Google's Captcha service https://www.google.com/recaptcha/admin/create

    • The example below uses reCaptcha v2 (with "I'm not a robot" button).
  3. For testing purposes, you can deploy the validation service locally, by installing netlify-cli

  4. Deploy the validation server. This project is deployable directly to netlify. It is already deployed as gsn-captcha-paymaster.netlify.app

    Note that you need to provide 2 environment variables to the netlify app:

    • RECAPTCHA_SECRET_KEY - google's recaptcha secret key
    • PRIVATE_KEY - the private key that signs the approval

    Without these items, the netlify deployment would fail.

  5. Go back to Google's reCaptcha admin page, and update the netlify URL you deployed to (you can add localhost for testing)

  6. Deploy the CaptchaPaymaster. Through truffle console, it can be deployed with:

     paymaster = await CaptchaPaymaster.new(signer,url, "captcha:")
    • signer - the address of the signer (for the above private key)
    • url of the the above validation service. e.g. 'https://gsn-captcha-paymaster.netlify.app/.netlify/functions/validate-captcha',
    • prefix for signing. currently has to be "captcha:"
    • make sure to connect it to the RelayHub and fund it.
  7. Add "recaptcha" button to your webapp (see html/index.html for sample)

  8. in you webapp, define your RelayProvider to use the above paymaster, and use the generated approval data:

    import { createCaptchaAsyncApprovalCallback } from '@opengsn/captcha-paymaster'
       
    ...
       
    gsnProvider = new RelayProvider(provider, { ..., paymasterAddress: myCaptchaPaymasterAddress }, {
       asyncApprovalData: createCaptchaAsyncApprovalCallback(web3,
                               async() => grecaptcha.getResponse()) 
    })
  9. Now transactions will only pass through if the user successfully proven he's not a robot...

Technical Application flow

This is what happens under the hood:

  1. The user has to click the "I'm not a robot" button. In the background, a new captcha response is created.
  2. When clicking the "Action" button, the RelayProvider attempts to create a request, and calls asyncApprovalData callback.
  3. the callback calls a read function on the provider, to collect user's address, nonce, and current timestamp
  4. Then the callback then calls the captcha validation service with the above user data.
  5. The validation service uses Google API to validate the captcha, and signs the user's data and timestamp.
  6. The RelayProvider can now use the returned "approvalData", and pass it with the next GSN request.
  7. When processing this request, the paymaster validates the content is valid (time not expired, user and nonce matches the request) and that the signature is valid.
  8. The paymaster approves the request, and the transaction can be processed.

Note that in this sample, we explicitly don't attempt to refresh the captcha automatically: If you dont press the "I'm not a robot" checkbox, a request will be sent with last captcha value, which might be stale or completely invalid. This comes to demonstrate that its not the client that validates the captcha, but the paymaster