info : hormis la partie spécifique à django (mais adaptable) ce tutoriel reste valable peut importe votre framework.

Taches coté google

Création du projet dans google cloud

Pour utiliser ce service nous allons devoir créer un projet sur google cloud.

Pour ce faire vous devez suivre ce lien

Obtenir la GOOGLE_APPLICATION_CREDENTIALS

Afin de permettre à notre site web de contacter l'API de google qui va nous renvoyer le score du captcha il nous faut un fichier json.

  • Toujours dans google cloud sélectionnez votre projet
  • accédez au tableau de bord du projet
  • dans la catégorie API et Service sélectionnez la sous catégorie identifiant
  • tout en base dans la catégorie Comptes de service cliquez sur le lien Gérer les comptes de service
  • maintenant en haut cliquez sur CREER UN COMPTE DE SERVICE
  • remplissez le champs nom du service, l'id est généré automatiquement, vous pouvez ajouter une description puis cliquer sur créer et continuer
  • maintenant pour le role choisissez agent recaptcha (vous pouvez utiliser le champs de recherche pour le trouver puis cliquez sur continuer et ok
  • cliquez sur le compte de service nouvellement créé et choisissez CLES dans le menu du haut puis ajouter une clef et créer une clef puis json
  • le fichier json a été automatiquement téléchargé, déplacez le à la racine de votre projet

Activer recaptcha sur votre projet dans google cloud

  • Depuis le tableau de bord de votre projet dans le panneau de gauche Securité -> Protection -> recaptchaenterprise
  • Cliquez sur activer puis créer, nommez la, choisissez site web pour le type de plafeforme
  • Enfin utilisez ajoutez un domaine et ajoutez celui de votre site et faite un autre ajout avec votre ip local pour les tests puis cliquez sur créez un code d'intégration js vous est fourni
  • c'est ici que vous pouvez récupérer votre id (utilisée coté serveur et client)

Code coté front

Intégration javascript et html

  • voici un exemple en ajax avec jquery
<script src="https://www.google.com/recaptcha/enterprise.js?render=idkeyaremplacer"></script>
<script>
$("form#contact_form").submit(function (e) {

        e.preventDefault();
        var form = $(this);
        grecaptcha.enterprise.ready(function () {
            grecaptcha.enterprise.execute('idkeyaremplacer', {action: 'contact'}).then(function (token) {
                $('<input>').attr({
                    type: 'hidden',
                    name: 'g-recaptcha-response',
                    value : token
                }).appendTo(form);
                $.ajax({
                    type: "POST",
                    url: form.attr('action'),
                    data: form.serialize(),
                    dataType: 'json',
                    success: function (data) {
                        form.find(".loading").hide();
                        form.find(".sent-message").show();
                    },
                    error: function () {
                        form.find(".loading").hide();
                        form.find(".error-message").show();
                    },
                });
            });
        });
    });
});
</script>
  • pour ce qui est du formulaire html il n'a aucune particularité

Code coté serveur

Importer la variable d'environnement crédential dans votre projet

  • dans vos setting.py (local et prod)
os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = "monfichier.json"

Préparer la fonction de d'appel à l'API google

  • dans votre fichier utils.py (créez en un dans votre app si besoin)
from google.cloud import recaptchaenterprise_v1
from google.cloud.recaptchaenterprise_v1 import Assessment
def create_assessment(
        project_id: str, recaptcha_site_key: str, token: str, recaptcha_action: str
) -> Assessment:
    """Create an assessment to analyze the risk of a UI action.
    Args:
        project_id: GCloud Project ID
        recaptcha_site_key: Site key obtained by registering a domain/app to use recaptcha services.
        token: The token obtained from the client on passing the recaptchaSiteKey.
        recaptcha_action: Action name corresponding to the token.
    """

    client = recaptchaenterprise_v1.RecaptchaEnterpriseServiceClient()

    # Set the properties of the event to be tracked.
    event = recaptchaenterprise_v1.Event()
    event.site_key = recaptcha_site_key
    event.token = token

    assessment = recaptchaenterprise_v1.Assessment()
    assessment.event = event

    project_name = f"projects/{project_id}"

    # Build the assessment request.
    request = recaptchaenterprise_v1.CreateAssessmentRequest()
    request.assessment = assessment
    request.parent = project_name

    response = client.create_assessment(request)

    # Check if the token is valid.
    if not response.token_properties.valid:
        print(
            "The CreateAssessment call failed because the token was "
            + "invalid for for the following reasons: "
            + str(response.token_properties.invalid_reason)
        )
        return

    # Check if the expected action was executed.
    if response.token_properties.action != recaptcha_action:
        print(
            "The action attribute in your reCAPTCHA tag does"
            + "not match the action you are expecting to score"
        )
        return
    else:
        # Get the risk score and the reason(s)
        # For more information on interpreting the assessment,
        # see: https://cloud.google.com/recaptcha-enterprise/docs/interpret-assessment
        for reason in response.risk_analysis.reasons:
            print(reason)
        print(
            "The reCAPTCHA score for this token is: "
            + str(response.risk_analysis.score)
        )
        # Get the assessment name (id). Use this to annotate the assessment.
        assessment_name = client.parse_assessment_path(response.name).get("assessment")
        print(f"Assessment name: {assessment_name}")
    return response

Appeler l'API et tester la réponse dans le code afférant

  • Sous django généralement dans votre view.py (exemple)
def contact(request):
    re_captcha_reponse = create_assessment(
        project_id="myprojectid",# à récupérer sur le tableau de bord de votre projet dans google cloud
        recaptcha_site_key="sitekey",
        recaptcha_action="contact",
        token=request.POST["g-recaptcha-response"]
    )
    messagetouser = ""
    if re_captcha_reponse.risk_analysis.score > 0.5 and re_captcha_reponse.token_properties.action == "contact":
        send_mail(
            request.POST["name"],
            request.POST["message"],
            request.POST["email"],
            [EMAIL_TO],
            fail_silently=False,
        )
    return HttpResponse("bien reçu")

Tâches coté serveur

A la mise en ligne ne pas oublier d'ajouter l'api google au projet.

Avec l'environnement virtuel du projet activée (venv)

pip install google-cloud-recaptcha-enterprise