Vue Basic Captcha

Template project of a Vue.js application with basic authentication & captcha integration in Go

This template is great for making a quick responsive Vue.js project protected by username/password with captcha with vuetify and vuex out of the box. Redis is used to store the session & the username/password (password is hashed & salted).

Install Demo

Using binaries

Download the latest release

start ngrok on port 6004
update host & captcha secret key in config.json
run ./main or ./main.exe
go to http://your.host.ngrok.io:6004

Using binaries, you must have redis installed

Using Docker

git clone git://github.com/bertrandmartel/vue-basic-captcha.git
cd vue-basic-captcha

start ngrok on port 6004 and note down the port in the HOSTNAME variable in docker-compose below

Create docker-compose.yml :

version: '2'

services:
  backend:
    build: .
    environment:
      REDIS_HOST: redis
      HOSTNAME: your.host.com
      CAPTCHA_SECRET_KEY: [captcha secret key here]
  redis:
    image: redis:6.0

docker-compose up

Create a user using the provisioning tool :

docker exec -it $(docker ps | grep vue-basic-captcha_backend | cut -d ' ' -f1) sh
cd ../provisioning/add
./add

go to http://your.host.ngrok.io:6004

Developer mode

In developer mode, you must have redis installed

git clone git://github.com/bertrandmartel/vue-basic-captcha.git
cd vue-basic-captcha
cd backend
make install

create .env.secret in backend directory with content :

HOSTNAME=your.host.ngrok.io
CAPTCHA_SECRET_KEY=[captcha secret key here]

Then run the backend :

make run

in another tab

cd frontend
npm i
vue ui

go to http://your.host.ngrok.io:6004

Provisioning tools

2 programs provide way to add & remove a user to/from Redis :

add a user

cd ./provisioning
go run ./add

delete a user

cd ./provisioning
go run ./delete

Configuration

2 way of configuring this app :

config.json

{
    "version": "0.1",
    "port": 6004,
    "serverPath": "http://localhost",
    "hostname": "your.host.com",
    "captchaSecretKey": "[captcha secret key here]"
}

environment variables

Name	Sample values	Description
REDIS_HOST	redis / localhost	Redis hostname
HOSTNAME	your.host.com	hostname to be checked in captcha response
CAPTCHA_SECRET_KEY	[captchaKey]	captcha secret key

Open Source components

Backend in Go
- echo
- go-redis
Frontend in Javascript
- vue.js
- vuetify
- vuex
- vue-router

External resources

bcrypt is used to hash/salt the password in provisioning tools and when comparigng hashes. This post was very helpful
Login view inspired by this post