Comment envoyer un post https javascript ou un webhook à partir d'un formulaire de page web html statique ?

Question

J'ai une page web HTML statique avec un formulaire. Lorsque le formulaire est rempli, j'aimerais que le bouton "submit" envoie un message http à un webhook situé ailleurs pour traitement.

J'ai le site web d'Hugo, qui est composé uniquement de pages html statiques. L'une de ces pages contient un formulaire. Si quelqu'un remplit ce formulaire et clique sur le bouton d'envoi, j'aimerais que ces données soient envoyées à une fonction Azure, un Runbook Azure, etc. via un webhook que j'ai configuré pour traiter les données du formulaire.

Ce genre de chose est-il possible ?

Notez que le site web d'Hugo est hébergé sur un serveur où PHP ou tout autre traitement côté serveur n'est pas disponible. C'est pourquoi je cherche un autre moyen. Ma seule idée était un javascript côté client, si possible, mais je ne suis pas très doué en Javascript.

C'est ce que j'ai fait jusqu'à présent, si c'est possible, mais le webhook n'est jamais reçu. Donc quelque chose ne va pas, ou n'est pas ce que je pense et n'est pas faisable :

<script>
function sendWebhook() {
    var content = {"value1" : "test data"};
    var url = "https://s16events.azure-automation.net/webhooks?token=<myToken>";
    var options =  {
    "method" : "post",
    "contentType" : "application/json",
    "payload" : JSON.stringify(content)
};
return UrlFetchApp.fetch(url, options);
}
</script>
<input id="contact-submit" type="button" class="btn btn-transparent" value="Submit" onclick="sendWebhook()" />

Answer 1

Si vous voulez appeler un webhook à partir d'un html statique via js , je crains que ce soit impossible pour le moment car Azure automation webhook ne supporte pas CORS pour le moment. Voir voix de l'utilisateur ici .

Mais vous pouvez appeler Azure Function depuis un html statique avec CORS configuré . C'est mon code de fonction déclenchée http en utilisant c# :

#r "Newtonsoft.Json"

using System.Net;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using Newtonsoft.Json;

public static async Task<IActionResult> Run(HttpRequest req, ILogger log)
{
    log.LogInformation("C# HTTP trigger function processed a request.");

    string value1 = req.Query["value1"];

    string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    dynamic data = JsonConvert.DeserializeObject(requestBody);
    value1 = value1 ?? data?.value1;

    return value1 != null
        ? (ActionResult)new OkObjectResult($"Hello, {value1}")
        : new BadRequestObjectResult("Please pass a value1 on the query string or in the request body");
}

Il vous répondra avec la valeur de "value1" dans votre html.

Voici le code pour le html :

<script>
function sendWebhook() {

    var http = new XMLHttpRequest();
    var url = '<URL OF YOUR AZURE FUNCTION>';
    var content = {"value1" : "test data"};
    http.open('POST', url, true);

    //Send the proper header information along with the request
    http.setRequestHeader('Content-type', 'application/json');

    http.onreadystatechange = function() {//Call a function when the state changes.
        if(http.readyState == 4 && http.status == 200) {
            alert(http.responseText);
        }
    }
    http.send(JSON.stringify(content));

}
</script>

<input id="contact-submit" type="button" class="btn btn-transparent" value="Submit" onclick="sendWebhook()" />

Allons dans votre fonction Azure =>Platform features=>CORS pour énumérer toutes les Origines avec "*" afin que nous puissions tester localement :

Résultat du test :

Comme vous pouvez le constater, vos données de valeur 1 ont été enregistrées.