Use google recaptcha with Angular and WebAPI

Question

I'm using Angular js front end application and web API backend. I want to use google recaptcha in the front end application. I can get widget displayed by referring following URL. https://developers.google.com/recaptcha/docs/display. This document doesn't talk about server-side validation with the secret key. But I have noticed some asp.net developers use server side implementation to validate google recaptcha response with the secret key. Do I need to do server-side validation with the secret key and what is the best way to do that in relating to angular and web API?

Answer 1

Yes, you need to do server side validation otherwise your unauthenticated API endpoints aren't protected by direct calls that don't go through your website.

The solution is pretty straight-foward and is detailed here: https://developers.google.com/recaptcha/docs/verify

But a very simple example of a method that would validated the g-recaptcha-response given by the website would look like this:

    public bool Validate(string encodedResponse)
    {
        if (string.IsNullOrEmpty(encodedResponse)) return false;

        var secret = **your secret**;
        if (string.IsNullOrEmpty(secret)) return false;

        var client = new System.Net.WebClient();

        var googleReply = client.DownloadString(
            $"https://www.google.com/recaptcha/api/siteverify?secret={secret}&response={encodedResponse}");

        return JsonConvert.DeserializeObject<RecaptchaResponse>(googleReply).Success;
    }

RecaptchaResponse is a simple class we have that looks like this:

public class RecaptchaResponse
{
    [JsonProperty("success")]
    public bool Success { get; set; }

    [JsonProperty("error-codes")]
    public IEnumerable<string> ErrorCodes { get; set; }

    [JsonProperty("challenge_ts")]
    public DateTime ChallengeTs { get; set; }

    [JsonProperty("hostname")]
    public string Hostname { get; set; }
}