/AzureFunctionsPractice

Primary LanguageTypeScript

Azure Functions Serverless Typescript Practice

Deploy to Azure

Examples Illustrated

  • Multi endpoint azure function REST
  • Azure Active Directory Authentication With OAuth
  • Azure CosmosDB Persistence For CRUD Operations From REST API
  • ARM Template Deployment
  • GitHub Build/Deployment Hook

Table of Contents:

Deploy To Azure QuickStart

  • Click Deploy to Azure button
  • Enter the name for your app
  • Enter 'aadClientId' & 'aadTenant'
    • These details must be gotten from the azure portal
    • Go to Azure Active Directory in Azure Portal
    • Select App registrations under the Manage section on the side
    • Select an existing app or select New registration
    • After that copy the APPLICATION (CLIENT) ID, this will be your 'aadClientId'
    • Select Properties under the Manage section on the side
    • Copy Directory ID value, this will look like 13118708-99c4-4f22-9dfd-c588c56e2785 and be your 'aadTenant'

Typescript Functions App QuickStart

Setup Dependencies:

Create TypeScript Functions App:

  • Open VSCode
    • Open Azure Extension
    • Open Functions Section
    • Click Create New Project Icon
    • Select the folder you're working in
    • Select TypeScript
    • Add & then name an HTTP Trigger it that's what you like or select Skip for now
  • Add A Function
    • Open VSCode
    • Open Azure Extension
    • Open Functions Section
    • Click the Create New Function icon
    • Select function type and name it

You can continue adding as many functions as you need to the one Azure Functions App you've created in your folder with VSCode.

Resources Used:

Other resources:

Outdated Typescript setup but still helpful:

Outdated Typescript boilerplate with mongoose for mongodb:

Authentication

Setting Up Auth For Functions App

  • Open Functions App In Portal
    • Click Platform Features
    • Click Authentication / Authorization under the networking section
    • Turn App Service Authentication On
    • Under "Action to take when request is not authenticated" Select Log in with Azure Active Directory
    • Under Authentication Providers click "Azure Active Directory"
    • Selected "Express" for Management mode
    • Select your Azure AD App you're working on in the portal if it's not already selected
    • Click OK
    • Click Save

alt test

Then in an HttpTrigger you can extract user details out of the request header with the following code:

    extractUser(req: HttpRequest): User {
        const user = {
            email: req.headers["x-ms-client-principal-name"],
            authProvider: req.headers["x-ms-client-principal-idp"],
            userAgent: req.headers["user-agent"],
            clientIp: req.headers["client-ip"],
        } as User;

        return user;
    }

This will return something that looks like this:

{
  "email": "YOUR AUTHENTICATED EMAIL ADDRESS WOULD BE HERE",
  "authProvider": "aad",
  "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36",
  "clientIp": "YOUR IP WOULD BE HERE"
}

Resources Referenced:

Auth Endpoints:

Other Resources:

Azure CosmosDB

SQL API

NOSQL API

Resources Used:

Other Resources:

Settings And Environment Variables

During development environment variables are stored in the local.settings.json which is git ignored.

During development these settings need to be added either through the azure portal or through the azure functions vscode extension.

They are then accessed like this:

const endpoint = process.env['COSMOS_SQL_ENDPOINT']

Deploying

Azure Resource Explorer(ARM) Templates

ARM Template Auth Config:

More Resources Used:

Testing

There are example tests for the RESTful CRUD operations. They can be run with the debugger. These are implemented with ts-jest to add TypeScript support to the jest testing library.

Run/Debug Tests: Insure that you have your local.settings.json COSMOS_SQL_ENDPOINT & COSMOS_SQL_MASTERKEY configured to a deployed instance from the deployment script and then, with all vscode tasks killed run the vscode compound debug launch "Functions/Jest" to run and debug the tests.

alt test

During development Postman was used to hit the endpoints.

In the request body of postman change from text to JSON (application/json) ans send the following body. This works with POST and GET requests.

{
    name: "Gian"
}

Logging

Resources Referenced: