build License

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).

vuejs

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

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

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

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

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

• Backend in Go

  • echo
  • go-redis

• Frontend in Javascript

  • vue.js
  • vuetify
  • vuex
  • vue-router

• 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