{"id":36343,"date":"2019-04-17T10:39:07","date_gmt":"2019-04-17T17:39:07","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/premier-developer\/?p=36343"},"modified":"2019-04-09T05:12:50","modified_gmt":"2019-04-09T12:12:50","slug":"angular-how-to-hide-logic-from-users-by-moving-it-out-of-the-browser-and-into-azure-functions","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/angular-how-to-hide-logic-from-users-by-moving-it-out-of-the-browser-and-into-azure-functions\/","title":{"rendered":"Angular How-to: Hide Logic from Users by Moving it out of the Browser and into Azure Functions"},"content":{"rendered":"<p>Premier Consultant <a href=\"https:\/\/www.linkedin.com\/in\/atkinsonlaurie\/\">Laurie Atkinson<\/a>, explorers how to code small, short-lived calculations or other functionality using Microsoft\u2019s serverless compute platform, Azure Functions. Choose the Consumption plan and only pay for compute resources when your functions are running.<\/p>\n<hr \/>\n<p><span data-contrast=\"auto\">A common question from developers building Single Page Applications is how to hide <\/span><span data-contrast=\"auto\">proprietary calculations<\/span><span data-contrast=\"auto\"> or other <\/span><span data-contrast=\"auto\">logic from end users. The answer is always to move that logic out of the JavaScript running in the browser and onto a server<\/span><span data-contrast=\"auto\">, which<\/span><span data-contrast=\"auto\"> leads to building and hosting an API service. <\/span><span data-contrast=\"auto\">However, i<\/span><span data-contrast=\"auto\">n the new world of serverless computing, there is a simpler option. <\/span><a href=\"https:\/\/azure.microsoft.com\/en-us\/services\/functions\/\"><span data-contrast=\"none\">Azure Functions<\/span><\/a> <span data-contrast=\"auto\">is <\/span><span data-contrast=\"auto\">a compute service that enables you to run code on-demand without <\/span><span data-contrast=\"auto\">the hassle of building an entire application or <\/span><span data-contrast=\"auto\">managing <\/span><span data-contrast=\"auto\">any<\/span><span data-contrast=\"auto\"> infrastructure.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">\u00a0<\/span><\/p>\n<p>This post provides the steps to create a function app and then call that function app from Angular.<\/p>\n<h2>Log in to Azure<\/h2>\n<p>Sign in to the Azure portal at <a href=\"https:\/\/portal.azure.com\">https:\/\/portal.azure.com<\/a> with your Azure account. If you do not have an <a href=\"https:\/\/docs.microsoft.com\/azure\/guides\/developer\/azure-developer-guide#understanding-accounts-subscriptions-and-billing\">Azure subscription<\/a>, you can create a <a href=\"https:\/\/azure.microsoft.com\/en-us\/free\/\">free account<\/a>.<\/p>\n<h2>Create a Function App in VS Code<\/h2>\n<p>You can create your function code in the <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-create-first-azure-function\">Azure portal<\/a> or <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-create-your-first-function-visual-studio\">Visual Studio<\/a> or <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-create-first-function-vs-code\">VS Code<\/a>. Since VS Code is such a popular editor for Angular developers, this demo will use that option.<\/p>\n<h3>1) Install the tools<\/h3>\n<ul>\n<li>Use npm to globally install version 2.x of the <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-run-local#v2\">Azure Functions Core Tools<\/a>.\n<pre class=\"nums-toggle:false lang:default decode:true\">npm install -g azure-functions-core-tools<\/pre>\n<\/li>\n<li>Install the <strong>Azure Functions for Visual Studio Code<\/strong> Extension into VS Code.\n<img decoding=\"async\" width=\"803\" height=\"451\" class=\"wp-image-36344\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-16.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-16.png 803w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-16-300x168.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-16-768x431.png 768w\" sizes=\"(max-width: 803px) 100vw, 803px\" \/><\/li>\n<\/ul>\n<ul>\n<li>This extension adds a new Azure icon to the Activity Bar, which opens a sidebar with options to create a new project and a function, as well as to deploy your function.<\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">NOTE: If you do not see the Azure icon, navigate to <\/span><b><span data-contrast=\"auto\">File &gt; Preferences &gt; Settings<\/span><\/b><span data-contrast=\"auto\"> and make sure that the <\/span><b><span data-contrast=\"auto\">Show Explorer<\/span><\/b><span data-contrast=\"auto\"> checkbox is checked.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559685&quot;:360,&quot;335559739&quot;:0,&quot;335559740&quot;:240}\">\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-36377\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/show_functions.png\" alt=\"\" width=\"648\" height=\"312\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/show_functions.png 648w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/show_functions-300x144.png 300w\" sizes=\"(max-width: 648px) 100vw, 648px\" \/><\/p>\n<h3>2) Create your project<\/h3>\n<ul>\n<li>In the Azure sidebar, click on the Folder icon to create a new project and when prompted select a folder for your code.\n<img decoding=\"async\" width=\"366\" height=\"368\" class=\"wp-image-36345\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-17.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-17.png 366w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-17-150x150.png 150w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-17-298x300.png 298w\" sizes=\"(max-width: 366px) 100vw, 366px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Select a language for your function. I\u2019ll choose my favorite language \u2013 <strong>TypeScript<\/strong>.\n<img decoding=\"async\" width=\"635\" height=\"222\" class=\"wp-image-36346\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-18.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-18.png 635w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-18-300x105.png 300w\" sizes=\"(max-width: 635px) 100vw, 635px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Select <strong>Azure Functions v2<\/strong>.\n<img decoding=\"async\" width=\"661\" height=\"173\" class=\"wp-image-36347\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-19.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-19.png 661w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-19-300x79.png 300w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Choose the <strong>HTTP Trigger<\/strong> template.\n<img decoding=\"async\" width=\"645\" height=\"356\" class=\"wp-image-36348\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-20.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-20.png 645w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-20-300x166.png 300w\" sizes=\"(max-width: 645px) 100vw, 645px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Give the Azure Function App a name. This app will be created with one function, but you can continue to add more functions to it later.\n<img decoding=\"async\" width=\"682\" height=\"116\" class=\"wp-image-36349\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-21.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-21.png 682w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-21-300x51.png 300w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/><\/li>\n<\/ul>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-bindings-http-webhook#trigger---configuration\">Choose authorization level<\/a> to be used during development. In production, you should secure the HTTP trigger by <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-bindings-http-webhook#secure-an-http-endpoint-in-production\">requiring authentication, using API Management, or App Service Environment<\/a>. For this demo, just select <strong>Anonymous<\/strong> or refer to <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-bindings-http-webhook#authorization-keys\">this documentation<\/a> on how to obtain a key which should be included in the request either in the URL or in the header.\n<img decoding=\"async\" width=\"681\" height=\"174\" class=\"wp-image-36350\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-22.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-22.png 681w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-22-300x77.png 300w\" sizes=\"(max-width: 681px) 100vw, 681px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Finally, choose to <strong>Add to a workspace<\/strong>.\n<img decoding=\"async\" width=\"658\" height=\"169\" class=\"wp-image-36351\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-23.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-23.png 658w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-23-300x77.png 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/li>\n<\/ul>\n<h3>3) Code your function<\/h3>\n<ul>\n<li>If using TypeScript, get the Azure functions type definitions (@azure\/functions) listed in the devDependencies of the package.json.\n<pre class=\"nums-toggle:false lang:default decode:true \">npm install<\/pre>\n<\/li>\n<li>Place your custom code in the index.ts file. Note that the TypeScript function name is not exposed and can be anything. For example.\n<strong><strong><strong>index.ts<\/strong><\/strong><\/strong><\/p>\n<pre class=\"lang:default decode:true\">import { AzureFunction, Context, HttpRequest } from \"@azure\/functions\" \r\n \r\nconst funkyCalc01: AzureFunction = async function (context: Context, req: HttpRequest): Promise&lt;void&gt; { \r\n    context.log('Super secret calculation #1 has been triggered'); \r\n    let input1 = 0; \r\n    let input2 = 0; \r\n \r\n    if ('input1' in req.query &amp;&amp; 'input2' in req.query) { \r\n        input1 = +req.query.input1; \r\n        input2 = +req.query.input2; \r\n    } else if (req.body &amp;&amp; 'input1' in req.body &amp;&amp; 'input2' in req.body) { \r\n        input1 = +req.body.input1; \r\n        input2 = +req.body.input2; \r\n    } else { \r\n        context.res = { \r\n            status: 400, \r\n            body: \"input1 and input2 required on query string or in the request body\" \r\n        }; \r\n        return; \r\n    } \r\n \r\n    \/\/ Do some complicated, proprietary calculations \r\n    const result = input1 + input2; \r\n \r\n    context.res = { \r\n        body: result \r\n    }; \r\n}; \r\n \r\nexport default funkyCalc01;<\/pre>\n<\/li>\n<\/ul>\n<h3>4) Test your function locally<\/h3>\n<ul>\n<li>Click <strong>F5<\/strong> in VS Code to start the app.<\/li>\n<li>If you skipped step 1, you will see this popup. If so, go ahead and install v2 of the Azure Function Core Tools.\n<img decoding=\"async\" width=\"530\" height=\"121\" class=\"wp-image-36352\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-24.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-24.png 530w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-24-300x68.png 300w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/>\nThen, you should see this output in the VS Code Terminal Window.\n<img decoding=\"async\" width=\"919\" height=\"241\" class=\"wp-image-36353\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-25.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-25.png 919w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-25-300x79.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-25-768x201.png 768w\" sizes=\"(max-width: 919px) 100vw, 919px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Navigate to your locally hosted page and pass in the parameters that your function expects. <a href=\"http:\/\/localhost:7071\/api\/super-secret-calculator?input1=10&amp;input2=20\">http:\/\/localhost:7071\/api\/super-secret-calculator?input1=10&amp;input2=20<\/a>\n<img decoding=\"async\" width=\"1298\" height=\"504\" class=\"wp-image-36354\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-26.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-26.png 1298w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-26-300x116.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-26-768x298.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-26-1024x398.png 1024w\" sizes=\"(max-width: 1298px) 100vw, 1298px\" \/><\/li>\n<\/ul>\n<ul>\n<li>To test input in the body of a POST, you can use <a href=\"https:\/\/www.getpostman.com\/\">Postman<\/a>.\n<img decoding=\"async\" width=\"821\" height=\"544\" class=\"wp-image-36355\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-27.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-27.png 821w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-27-300x199.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-27-768x509.png 768w\" sizes=\"(max-width: 821px) 100vw, 821px\" \/><\/li>\n<\/ul>\n<h3>5) Test your function in Azure<\/h3>\n<ul>\n<li>Log into your Azure subscription from inside VS Code.\n<img decoding=\"async\" width=\"442\" height=\"368\" class=\"wp-image-36356\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-28.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-28.png 442w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-28-300x250.png 300w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/>\nYou will be redirected to a login page and when it is complete, you should see this message.\n<img decoding=\"async\" width=\"1736\" height=\"1201\" class=\"wp-image-36357\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-29.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-29.png 1736w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-29-300x208.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-29-768x531.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-29-1024x708.png 1024w\" sizes=\"(max-width: 1736px) 100vw, 1736px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Deploy your function app from inside VS Code by clicking the up-arrow icon in the Azure sidebar.\n<img decoding=\"async\" width=\"337\" height=\"367\" class=\"wp-image-36358\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-30.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-30.png 337w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-30-275x300.png 275w\" sizes=\"(max-width: 337px) 100vw, 337px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Click <strong>Create New Function App in Azure<\/strong>.\n<img decoding=\"async\" width=\"643\" height=\"90\" class=\"wp-image-36359\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-31.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-31.png 643w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-31-300x42.png 300w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Enter the name for your function app in Azure.\n<img decoding=\"async\" width=\"727\" height=\"130\" class=\"wp-image-36360\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-32.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-32.png 727w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-32-300x54.png 300w\" sizes=\"(max-width: 727px) 100vw, 727px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Wait for the app to be provisioned in Azure.\n<img decoding=\"async\" width=\"373\" height=\"100\" class=\"wp-image-36361\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-33.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-33.png 373w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-33-300x80.png 300w\" sizes=\"(max-width: 373px) 100vw, 373px\" \/>\nAfter waiting a bit, you should see a notification in VS Code that the action is complete.\n<img decoding=\"async\" width=\"550\" height=\"312\" class=\"wp-image-36362\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-34.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-34.png 550w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-34-300x170.png 300w\" sizes=\"(max-width: 550px) 100vw, 550px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Click on <strong>View Output<\/strong> to see the newly generated URL to your function and navigate there in the browser.\n<img decoding=\"async\" width=\"983\" height=\"108\" class=\"wp-image-36363\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-35.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-35.png 983w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-35-300x33.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-35-768x84.png 768w\" sizes=\"(max-width: 983px) 100vw, 983px\" \/>\n<img decoding=\"async\" width=\"1620\" height=\"326\" class=\"wp-image-36364\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-36.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-36.png 1620w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-36-300x60.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-36-768x155.png 768w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-36-1024x206.png 1024w\" sizes=\"(max-width: 1620px) 100vw, 1620px\" \/><\/li>\n<\/ul>\n<p>NOTE: The deployment automatically creates a new resource group and storage account for you. For example:\n<img decoding=\"async\" width=\"931\" height=\"113\" class=\"wp-image-36365\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-37.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-37.png 931w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-37-300x36.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-37-768x93.png 768w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/p>\n<p>NOTE: If you need to find the URL later, it is available by right-clicking on the function in the Azure sidebar.\n<img decoding=\"async\" width=\"438\" height=\"360\" class=\"wp-image-36366\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-38.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-38.png 438w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-38-300x247.png 300w\" sizes=\"(max-width: 438px) 100vw, 438px\" \/><\/p>\n<p>And there is also a shortcut available for navigation into your Azure portal.\n<img decoding=\"async\" width=\"540\" height=\"454\" class=\"wp-image-36367\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-39.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-39.png 540w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-39-300x252.png 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/p>\n<h2>Call the Azure Function from an Angular app<\/h2>\n<ul>\n<li>Create an Angular service to make an HTTP request to the Azure function.<\/li>\n<\/ul>\n<p><strong>my-data-access.service.ts\n<\/strong><\/p>\n<pre class=\"lang:default decode:true \">import { Injectable } from '@angular\/core'; \r\nimport { HttpClient } from '@angular\/common\/http'; \r\n \r\n@Injectable({ providedIn: 'root' }) \r\nexport class MyDataAccessService { \r\n   private functionUrl = 'https:\/\/super-secret-calculator.azurewebsites.net\/api\/super-secret-calculator'; \r\n  constructor(protected http: HttpClient) { } \r\n  calculateResult(num1: number, num2: number) { \r\n    return this.httpClient.get(`${this.functionUrl}?input1=${num1}&amp;input2=${num2}`); \r\n  } \r\n}<\/pre>\n<p><strong>my-app.component.ts\n<\/strong><\/p>\n<pre class=\"lang:default decode:true \">   \/\/ Call your method from another service or component \r\n    this.myDataAccessService.calculateResult(this.num1, this.num2) \r\n      .subscribe((result: number) =&gt; { \r\n        this.calculationResult = result; \r\n    });<\/pre>\n<ul>\n<li>Test it out and you are likely to receive this error indicating that the CORS request has been blocked.\n<img decoding=\"async\" width=\"911\" height=\"125\" class=\"wp-image-36368\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-40.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-40.png 911w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-40-300x41.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-40-768x105.png 768w\" sizes=\"(max-width: 911px) 100vw, 911px\" \/><\/li>\n<\/ul>\n<p>Access to XMLHttpRequest at &#8216;https:\/\/super-secret-calculator.azurewebsites.net\/api\/super-secret-calculator?input1=1&amp;input2=2&#8217; from origin &#8216;http:\/\/localhost:4200&#8217; has been blocked by CORS policy: Response to preflight request doesn&#8217;t pass access control check: No &#8216;Access-Control-Allow-Origin&#8217; header is present on the requested resource.<\/p>\n<ul>\n<li>To resolve this error, enable CORS on your Azure Function App in the Azure Portal. This option is found by navigating to <strong>Platform features<\/strong> tab for this function app and selecting <strong>CORS<\/strong>.\n<img decoding=\"async\" width=\"982\" height=\"272\" class=\"wp-image-36369\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-41.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-41.png 982w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-41-300x83.png 300w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-41-768x213.png 768w\" sizes=\"(max-width: 982px) 100vw, 982px\" \/><\/li>\n<\/ul>\n<ul>\n<li>Also include the origin URL of your Angular app, which is <a href=\"http:\/\/localhost:4200\">http:\/\/localhost:4200<\/a> during development.\n<img decoding=\"async\" width=\"435\" height=\"632\" class=\"wp-image-36370\" src=\"http:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-42.png\" srcset=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-42.png 435w, https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/04\/word-image-42-206x300.png 206w\" sizes=\"(max-width: 435px) 100vw, 435px\" \/><\/li>\n<\/ul>\n<p>Your Angular app should now be able to call your Azure function successfully and you are now working with a serverless backend. You can continue to add additional functions to this function app and deploy from VS Code.<\/p>\n<p>I hope this post helps illustrate how this cost-effective solution for backend services can integrate smoothly with your current development environment.<\/p>\n<h2>Additional information and resources<\/h2>\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-scale\">Scaling and hosting options<\/a><\/p>\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-continuous-deployment\">Continuous deployment<\/a><\/p>\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-reference\">Developer Guide<\/a><\/p>\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/app-service\/configure-authentication-provider-aad\">Authenticate with Azure AD<\/a> and <a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/using-adal-js-with-angular4\/\">configure Angular to use adal library<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A common question from developers building Single Page Applications is how to hide proprietary calculations or other logic from end users. The answer is always to move that logic out of the JavaScript running in the browser and onto a server, which leads to building and hosting an API service. However, in the new world of serverless computing, there is a simpler option. Azure Functions is a compute service that enables you to run code on-demand without the hassle of building an entire application or managing any infrastructure.<\/p>\n","protected":false},"author":582,"featured_media":36371,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[122],"tags":[51,156,52,3],"class_list":["post-36343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-azure-functions","tag-laurie-atkinson","tag-team"],"acf":[],"blog_post_summary":"<p>A common question from developers building Single Page Applications is how to hide proprietary calculations or other logic from end users. The answer is always to move that logic out of the JavaScript running in the browser and onto a server, which leads to building and hosting an API service. However, in the new world of serverless computing, there is a simpler option. Azure Functions is a compute service that enables you to run code on-demand without the hassle of building an entire application or managing any infrastructure.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/36343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=36343"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/36343\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/36371"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=36343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=36343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=36343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}