Utilisez google recaptcha avec Angular et WebAPI

Question

Je suis en train d'utiliser une application frontale Angular js et un backend Web API. Je veux utiliser Google reCAPTCHA dans l'application frontale. Je peux afficher le widget en me référant à l'URL suivante. https://developers.google.com/recaptcha/docs/display. Ce document ne parle pas de la validation côté serveur avec la clé secrète. Mais j'ai remarqué que certains développeurs asp.net utilisent une implémentation côté serveur pour valider la réponse de Google reCAPTCHA avec la clé secrète. Dois-je faire une validation côté serveur avec la clé secrète et quelle est la meilleure façon de le faire en relation avec Angular et Web API?

Answer 1

Oui, vous devez effectuer une validation côté serveur, sinon vos points de terminaison API non authentifiés ne sont pas protégés contre des appels directs qui ne passent pas par votre site Web.

La solution est assez simple et est détaillée ici: https://developers.google.com/recaptcha/docs/verify

Mais un exemple très simple d'une méthode qui validerait la g-recaptcha-response donnée par le site Web ressemblerait à ceci:

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

        var secret = **votre 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(googleReply).Success;
    }

RecaptchaResponse est une classe simple que nous avons qui ressemble à ceci:

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

    [JsonProperty("error-codes")]
    public IEnumerable CodesErreur { get; set; }

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

    [JsonProperty("hostname")]
    public string NomHôte { get; set; }
}