How to implement and use Google reCaptcha with Vue.js and .Net

How to implement and use Google reCaptcha with Vue.js and .Net

This article will cover how to implement google reCaptcha v2 using Vue.js and .Net. Let us start.

First we need to create a reCaptcha instance. You will need a google account for this. Go to here.

To use reCaptcha you first need to create an account, for that you will need a google account, just fill in this screen below, as in our example we are using reCaptcha v2 we will select it in the reCAPTCHA type field in the first step, as we are testing and developing, the domain will be set to localhost, but when going to production be sure to modify this field with your domain.

google recaptcha

In this example I will use the reCapathca "I'm not a robot" Checkbox type as seen in the image below:

enter image description here

Once that is done, you will have your keys available, the site key should be used on the front end, and to keep it safe we ​​will use environment variables_, since the secret key will be used on back end in nosse _web.config

enter image description here

Front-End

To use reCaptcha I followed the documentation steps, but with the help of a package from yarn to vue, vue-recaptcha, which provides me with a basically ready component, just implement it and capture the event from validation you can see more about it

Instalation

yarn add vue-recaptcha yarn add axios

In my dev.env.js where I store my environment variables I will set the site key and url of my api, which in this case will be running on localhost

module.exports = {
  NODE_ENV: '"development"',
  RECAPTCHA_PUBLIC_KEY:'"6__________yourkey________________c"',
  process.env.API_URL: '"http://localhost:55348/api'" 
})   

I'll start by creating the post service on my route with the axios that will post to google api and return me an object validating whether or not it was successful

services/recaptchaValidate.js:

import axios from 'axios'

export default {
  validate (params) {
    return new Promise((resolve, reject) => {
      axios.post(`${process.env.API_URL}/recaptcha/validate`, params)
        .then(response => {
          if (response.data.hasErrors) {
            reject(response.data.message)
          } else {
            resolve(response.data)
          }
        })
        .catch(error => {
          if (error.response.data.hasOwnProperty('hasErrors')) {
            reject(error.response.data.message)
          } else {
            reject(error.message)
          }
        })
    })
  }
}

This done I created a component for recaptcha in my project named Recaptcha.vue, which will issue my validation to the parent component that will receive my validation to enable or not the forward button.

<template>
     <VueRecaptcha :sitekey="this.sitekey" :loadRecaptchaScript="true" @verify="validate"/>
 </template>
 <script>
    import VueRecaptcha from 'vue-recaptcha'
    import Validation from '@/services/recaptchaValidate'
    export default {
      components: {VueRecaptcha},
      data () {
        return {
          sitekey: process.env.RECAPTCHA_PUBLIC_KEY
        }
      },
      methods: {
        validate (response) {
          Validation.validate({Response: response}).then(result => {
            this.$emit('validate', result.objectResult.success)
          }).catch(error => console.log(error))
        }
      }
    }
  </script>

The Parent component:

<template>
 <b-row>
  <b-col class="p-5 mb-2">
    <div class="text-center justify-center align-center">
      <Recaptcha v-if="!logged" @validate="validate"/>
    </div>
  </b-col>
</b-row>
<b-row no-gutters>
  <b-col class="p-0">
    <div class="text-center">
      <a @click="checkFrom('next')" :class="this.validateRecaptcha ? '' : 'disabled'" class="btn btn-primary text-white m-1">Forward</a>
    </div>
  </b-col>
</b-row>
</template>
import Recaptcha from '@/components/recaptcha/Recaptcha'
export default {
    components: {Recaptcha},
    data () {
        return {
            validateRecaptcha: false
        }
    },
    methods: {
        validate (success) {
        this.validateRecaptcha = success
    }
}

Back-End

Web.config to store my secret key and the url to google reCaptcha API:

<configuration>
    <appSettings>
        <add key="RECAPTCHA_SECRET_KEY" value="6______yourkey________o"/>
        <add key="RECAPTCHA_GOOGLE_URL" value="https://www.google.com/recaptcha/api/siteverify"/>
    </appSettings>
</configuration>

I am creating a model to handle the request that will be received by my route named RecaptchaRequest.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Recaptcha.Models.Requests
{
    public class RecaptchaRequest
    {
        public string Response { get; set; }
    }
}

I am creating a model to handle the response of google API named RecaptchaResponse.cs:

using System;
using System.Collections.Generic;
using System.Web;

namespace Recaptcha.Models.Responses
{
    public class RecaptchaResponse
    {
        public bool Success { get; set; }
        public string Hostname { get; set; }
    }
}

I will not go into the details of how my BaseController is made, but it is a set of methods where I manipulate the responses to return the consumer of my route, feel free to do it your own way, because the goal is just show how to access the google API, so below follows my controller named RecaptchaController.cs:

using Recaptcha.Business;
using Recaptcha.Models.Requests;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace Recaptcha.Controllers
{
    [RoutePrefix("api/recaptcha")]
    public class RecaptchaController : BaseController
    {
        [HttpPost]
        [Route("validate")]
        public async System.Threading.Tasks.Task<HttpResponseMessage> ValidateAsync(RecaptchaRequest recaptchaRequest)
        {
            if (!Token.IsValid)
                return GetResponseFromInvalidToken();

            var response = await RecaptchaBusiness.RetrieveResponse(recaptchaRequest);
            return GetResponseFromResults(HttpStatusCode.OK, "", response);
        }
    }
}

And finally my Business named RecaptchaBusiness.cs where I make the request via post to google api and get the json that I send to my front, informing if who accessed the checkbox is or is not a robot

  using Recaptcha.Models.Requests;
    using Recaptcha.Models.Responses;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Net.Http;

    namespace Recaptcha.Business
    {
        public class RecaptchaBusiness
        {
            private static readonly HttpClient client = new HttpClient();
            public static async System.Threading.Tasks.Task<RecaptchaResponse> RetrieveResponse(RecaptchaRequest recaptchaRequest)
            {
                var values = new Dictionary<string, string>
                {
                    { "secret", ConfigurationManager.AppSettings["RECAPTCHA_SECRET_KEY"].ToString()},
                    { "response", recaptchaRequest.Response}
                };

                var content = new FormUrlEncodedContent(values);

                var response = await client.PostAsync(ConfigurationManager.AppSettings["RECAPTCHA_GOOGLE_URL"].ToString(), content);

                var recaptchaResponse = new RecaptchaResponse();
                return await response.Content.ReadAsAsync<RecaptchaResponse>();

            }
        }
    }

Remembering that validation cannot be done by the client (front) if you try this, you get that hellish CORS error

I hope this tutorial will surely help and you if you liked this post, please consider sharing it with others.

Thank for reading !

vue-js javascript c-sharp asp-net

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Develop this one fundamental skill if you want to become a successful developer

Throughout my career, a multitude of people have asked me&nbsp;<em>what does it take to become a successful developer?</em>

Build a Simple CRUD App with ASP.NET Core and Vue

This tutorial walks you through building a basic CRUD application with ASP.NET Core and Vue.js.

How to implement JWT Authentication in ASP.NET Core 3.0 API with C#

In this tutorial we'll go through a simple example of how to implement JWT (JSON Web Token) authentication in an ASP.NET Core 3.0 API with C#

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?