How to validate recaptcha with Laravel and Vue.js? - php

Question

RESOLVED : see changes in repository, in vue component, controller, new RUle Recaptcha, and blade file : https://github.com/IllichOulianov/m1_serveur_projet
I want to include a recaptcha in a comment form, using this package https://github.com/DanSnow/vue-recaptcha/ . It is correctly displayed under the input fields, the recaptcha behaves correctly when clicked, but I always get a 422 response in the console after verifying recaptcha and submitting :
POST http://localhost:8000/comments 422 (Unprocessable Entity)
dispatchXhrRequest # app.js:285
xhrAdapter # app.js:119
dispatchRequest # app.js:724
Promise.then (async)
request # app.js:531
Axios.(anonymous function) # app.js:551
wrap # app.js:984
submit # app.js:1851
submit # app.js:36913
invokeWithErrorHandling # app.js:40775
invoker # app.js:41100
original._wrapper # app.js:46453
and this response in the devtools network tab :
{"message":"The given data was invalid.","errors":{"g-recaptcha-response": > ["The g-recaptcha-response field is required."]}}
I tried some things but none worked. I guess the trouble lies in the html element, the script fields and/or the validation rules. What do I need to add/modify ?
My codes, and repository if needed : https://github.com/IllichOulianov/m1_serveur_projet
CommentForm.vue :
<template>
<div>
<form #submit.prevent="submit">
<div class="form-group">
<input type="text" class="form-control" placeholder="Votre nom" name="name" id="name" v-model="fields.name" />
<div v-if="errors && errors.name" class="text-danger">{{ errors.name[0] }}</div>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Votre e-mail" name="email" id="email" v-model="fields.email" />
<div v-if="errors && errors.email" class="text-danger">{{ errors.email[0] }}</div>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Votre commentaire" id="content" name="content" rows="5" v-model="fields.content"></textarea>
<div v-if="errors && errors.content" class="text-danger">{{ errors.content[0] }}</div>
</div>
<div class="form-group">
<vue-recaptcha sitekey="XXXXX"></vue-recaptcha>
<div v-if="errors && errors.recaptcha" class="text-danger">{{ errors.recaptcha[0] }}</div>
</div>
<button type="submit" class="btn btn-primary">Publier le commentaire (après modération)</button>
</form>
</div>
</template>
<script>
import VueRecaptcha from 'vue-recaptcha';
export default {
components:{VueRecaptcha},
data() {
return {
fields: {
name:'',
email:'',
content:'',
article_id:window.article_id,
},
errors: {},
}
},
methods: {
submit() {
this.errors = {};
axios.post('/comments', this.fields).then(response => {
alert('Message sent!');
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
},
},
}
</script>
COmmentCOntroller
public function store(Request $request,CommentsRepositoryInterface $interface) {
$this->validate($request, [
'name'=>'bail|required|min:3|alpha_num',
'email'=>'bail|required|email',
'content'=>'bail|required|between:3,5000',
'g-recaptcha-response'=>'required|recaptcha'
]);
$interface->save($request);
return response()->json(null, 200);
}
IN my blade file:
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>
<script type="text/javascript">article_id={{$article->id}};</script>
[...]
<div id="app">
<comment-form></comment-form>
</div>
<script src={{asset("js/app.js")}}></script>
Thanks !