如何将Azure Httptrigger连接到网站？

Question

I have limited experience with creating websites/front-end - just HTML/CSS - and work mostly on the backend - Node.js in Azure functions.

I have created an Azure function (httptrigger) that I would like a button on my website to hit.

For example, like a search bar, I want a user to type something and click search. After they click search I want to hit the http trigger with the search contents in the query string.

After hitting my trigger, I would then want it to return some data to show on the webpage.

I am struggling with adding the search content to the query string (and perhaps securely hiding the httptrigger endpoint?) and how I would send data back to the html website.

At the moment, I have built the httptrigger to work and return html data via context.res= {body: html} which works fine when I post the httptrigger url into my browser, but of course I want this to send data back and affect the current webpage with the search bar, by adding the results below it.

Any pointers or tips here would be greatly appreciated as I'm not too experienced sewing the front end together with this.

Thanks!

Answer 1

So my suggestion is to break this down a little bit and possibly create some new more specific questions based on that breakdown. As it is this is pretty broad.

Realize that from your web site's (front end) perspective there isn't anything different about hitting and Azure Function Http Trigger then any other REST endpoint and the answer to how to wire it in on the front end is going to vary greatly based on any frameworks you may be using (sometimes those frameworks even want data returned in a specific way as well).

With that knowledge in mind I would focus first on ensuring your Azure Function is properly configured and generating a JSON result you expect before trying to work with the UI. I can give you some suggestions in that regard:

• You mentioned "hiding" your endpoint. You need to identify first how you want to secure it as you won't be able to "hide" it as long as it's on the internet. If it's an anonymous site you're going to have limited options. If you are behind a login you have many more options but most best practices utilize some sort of token based approach (Oauth, Custom, etc). Azure Functions do have the concept of Function Keys you can pass in but this really only applies to non browser usage of the APIs where they can be kept secret. Any key you add into your front end would be visible to everyone and essentially useless (unless you just want to block folks randomly hitting your endpoints).
• Update the CORS settings in Azure Functions to ensure the domain(s) that are using your API are configured otherwise you'll get blocked by cross-domain restrictions in browsers. More can be found at https://docs.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors
• Create a function with some mock data in the format you want (you can circle back later and pull it from a real data source once you have it working). Snippet example below using a couple hard coded states.

 module.exports = function(context, req) { if (req.query.filter) { // Do something with the filter parameter when loading results context.res = { body: '[{"name": "New York","abbreviation": "NY"},{"name": "Ohio","abbreviation": "OH"}]', headers: { 'Content-Type': 'application/json' } }; } else { context.res = { status: 400, body: "Please pass a filter on the query string" }; } context.done(); }; 

Once you have a working function that returns back your data then move on to tackle your UI integration.