Search code examples
formsnuxt.jsrecaptcha

Static Website, File Upload and recaptcha

I am just thinking what the best approach is to implement a simple form with file upload on a static website without any backend.

Scenario:

I have static website (NuxtJS) where a form can be filled and files can be uploaded. To protect this form I wanted to use recaptcha by Google but as I read a little further in their documentation it seems that I need a backend which is a overkill for a static website. Furthermore I wanted to support file upload... quite complicated without a backend.

What I thought of:

Maybe an existing product which does exactly what I am looking for? Or should I build a AWS Lambda Pipeline (of course with an S3 Bucket) to function as my "backend" for recaptcha and file upload. Is there any approach which makes this scenario simpler, or am I thinking to complicated at the moment.

Use Case / Flow Chart:

  1. Users enters Website.
  2. Fills out form.
  3. (optional) uploads files
  4. Checks recaptcha
  5. Clicks Send - Sends "Message" in our companies slack channel / or email.
Solution

  • However I solved this "common" task with a custom "backend" hosted on AWS Lambda which makes the whole stuff "serverless".

    For those who are interested in "how to setup a server less backend" here's the current flow-chart which I made use of.

    enter image description here

    As you can see after the recaptcha is validated on client side and a token is generated, it is sent to the AWS API Gateway which triggers a Lambda Function (NodeJS Implementation of a Backend) where the token is validated and for file uploads pre-signed Uris are generated. Notice: The API Gateway and the S3 Bucket need a valid CORS Configuration to communicate with each other and the world.