maslick / formuljar

a simple web form with extra security

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

=formuljar=

PROD-ENV-DEPLOYMENT TEST-ENV-DEPLOYMENT License: MIT

a simple web form with extra security

πŸš€ Features

  • Google reCaptcha v3 (server-side verification) πŸ₯Š
  • Integration with Telegram (notifications) 🎱
  • Integration with Google Spreadsheets (audit) 🧩
  • Integration with your CRM (coming soon...) πŸ’Ή
  • Support for referral/affiliate links πŸ€‘
  • Serverless framework on AWS: API GW, Lambda, SQS, S3, Cloudfront ❀️


🍭 Demo

πŸ’‘ Motivation

Often times businesses need a simple static web form to get user feedback and/or generate sales leads, so that customers fill out a web form with their contact data. The business then needs to get a notification (e.g. via Telegram) and store customer info in a document (e.g. Google Spreadsheets).

The integration part with 3rd party services is pretty much straightforward. However, several challenges may arise:

1️⃣ Your backend server may be overloaded πŸ™… by a number of automated requests πŸ’£

An attacker πŸ•΅οΈβ€β™‚οΈ (e.g. your competitor) may get the form handler URL and issue a number of dummy POST requests, thus making your backend send a lot of notifications and polluting your spreadsheet with fake data. Here we can use reCaptcha to process only the requests produced by a human.

2️⃣ You may need to process requests asynchronously πŸ“ and respond immediately! πŸ‡

You don't want your users to wait! Integration with 3rd party services such as Telegram, Spreadsheets, etc. may take some time, so you need to decouple the web request and business logic by using a message queue (e.g. AWS SQS).

3️⃣ Your solution should scale well πŸ“‘

Hosting on Heroku for $7/month is a good option, but it doesn't scale well. Better use Serverless on AWS with almost infinite scaling capabilities.

4️⃣ Your solution should be cheap! πŸ’Έ

You could host your app on Heroku. There are 2 options here: a free plan (limited availability, no custom domain, no TLS) or a Hobby plan ($7 per dyno per month). However, there is a better hosting solution which is almost free, and that is - AWS πŸ‘Œ

βœ… Installation

♠️ reCaptcha

  1. Go to https://www.google.com/recaptcha/admin and create a new site.
  2. Go over to Settings and copy both CAPTCHA_PUBLIC and CAPTCHA_SECRET.
  3. Add necessary domains where you want to use reCaptcha (e.g. d2dc90ktgsfnzk.cloudfront.net, localhost, formuljar.maslick.ru).

β™₯️ Telegram

  1. Send a new message to @BotFather: /newbot.
  2. Give your bot a name (e.g. Formuljar).
  3. Choose a username for your bot (e.g. formuljar_bot).
  4. You will get a TELEGRAM_BOT_TOKEN (e.g. 1234567890:ABCdefgHijklmnoPQrsTUVwXyZ).
  5. You can also set a profile pic by issuing /setuserpic.
  6. Create a channel. Set its type to private and invite your bot (e.g. @formuljar_bot) as admin πŸ‘©β€πŸ’Ό with the ability to post messages.
  7. Start a conversation with @getidsbot.
  8. Write a sample message into your channel and forward it to @getidsbot.
  9. Switch to @getidsbot and find your TELEGRAM_CHAT_ID (Origin chat -> id): e.g. -1001375717457.

♣️ Google Spreadsheets

  1. Log in to GCP console https://console.cloud.google.com/
  2. Create a new project.
  3. Enable Google Sheets API.
  4. Click Manage and head over to Credentials. Create a new service account.
  5. Create a new API key. Download the JSON. Copy the JSON into the GOOGLE_CREDENTIALS env. variable.
  6. Create a new Spreadsheet and Share the document with your service account email (see JSON -> client_email).
  7. Get the id of your document (e.g. https://docs.google.com/spreadsheets/d/1JnW6kWGL-Xily71-xxxxxx-Bw_lfW2Lb_SyCjx3uBTyQ -> 1JnW6kWGL-Xily71-xxxxxx-Bw_lfW2Lb_SyCjx3uBTyQ). This will be your SPREADSHEET_ID env. variable.

♦️ Serverless

$ export CAPTCHA_PUBLIC=...
$ export CAPTCHA_SECRET=...
$ export TELEGRAM_CHAT_ID=...
$ export TELEGRAM_BOT_TOKEN=
$ export GOOGLE_CREDENTIALS=...
$ export SPREADSHEET_ID=...
$ export SHEET_NAME=...

$ npm i -g serverless
$ sls config credentials --provider aws --key <key-id> --secret <secret>
$ sls deploy --stage prod --verbose

About

a simple web form with extra security


Languages

Language:JavaScript 72.0%Language:HTML 12.0%Language:CSS 10.8%Language:Shell 5.2%