Kotlin + Spring + Vue: Spam Protection (reCAPTCHA)

We have a registration feature,

that means now it's time to think about spam protection. Let's do it using Google powerful tool - reCAPTCHA.

reCAPTCHA is a CAPTCHA-like system designed to establish that a computer user is human (normally in order to protect websites from bots) and, at the same time, assist in the digitization of books or improve machine learning.

Wikipedia

Objectives

Enable reCAPTCHA at the pages of SignUp and SignIn
Make server-side verification

Setting Up reCAPTCHA

Visit Google reCAPTCHA admin panel.
Click Add new site.
Use the following settings:

Save key and secret (and it's better to copy to application.settings):

Backend

Environment Variables

Add the following environment variables (or add these arguments to the startup settings):

GOOGLE_RECAPTCHA_KEY_SITE
GOOGLE_RECAPTCHA_KEY_SECRET

application.properties

Add the relevant application properties:

google.recaptcha.key.site=${GOOGLE_RECAPTCHA_KEY_SITE}
google.recaptcha.key.secret=${GOOGLE_RECAPTCHA_KEY_SECRET}

pom.xml

Add a new dependency to pom.xml:

<dependency>
<groupId>com.mashape.unirest</groupId>
<artifactId>unirest-java</artifactId>
<version>1.4.9</version>
</dependency>

Models

Update LoginUser and NewUser by adding new String field - recaptchaToken:

LoginUser:

NewUser:

Service

Add a service to validate reCAPTCHA tokens to /service:

AuthController

Update AuthController in following way - validating the token from request:

import com.kotlinspringvue.backend.service.ReCaptchaService

…

@Autowired
lateinit var captchaService: ReCaptchaService

…

if (!captchaService.validateCaptcha(loginRequest.recaptchaToken!!)) {
return ResponseEntity(ResponseMessage("Validation failed (ReCaptcha v2)"),
HttpStatus.BAD_REQUEST)
}
else [if]...

…

if (!captchaService.validateCaptcha(newUser.recaptchaToken!!)) {
return ResponseEntity(ResponseMessage("Validation failed (ReCaptcha v2)"),
HttpStatus.BAD_REQUEST)
} else...

Frontend

First of all, install and save the reCAPTCHA package:

$ npm install --save vue-recaptcha

Then update <head> of your index.html (public/index.html) - add:

SignIn.vue and SignUp.vue

Update <template>:

<b-button v-on:click="validateCaptcha" variant="primary">Login</b-button>

...

<vue-recaptcha
ref="recaptcha"
size="invisible"
:sitekey="sitekey"
@verify="onCapthcaVerified"
@expired="onCaptchaExpired"
/>

Update <script>:

import VueRecaptcha from 'vue-recaptcha'

…

export default

components: { VueRecaptcha },
…
data() {
…
siteKey: 'site_key'
…
}

methods:

validateCaptcha() {

this.$refs.recaptcha.execute()

},

onCapthcaVerified(recaptchaToken) {

AXIOS.post(`/auth/signin`, {'username': this.$data.username, 'password': this.$data.password, 'recapctha_token': recaptchaToken})
.then(response => {
  this.$store.dispatch('login', {'token': response.data.accessToken, 'roles': response.data.authorities, 'username': response.data.username});
  this.$router.push('/home')
}, error => {
  this.showAlert(error.response.data.message);
})
.catch(e => {
console.log(e);
  this.showAlert('Server error. Please, report this error website owners');
})
},

onCaptchaExpired() {
this.$refs.recaptcha.reset()
}

NOTE: do that both for SignIn.vue and SignUp.vue

Ways to Improve

Hide stuff from bots

vaadim

Search This Blog