Flutter — Microsoft API Management secured with AD — APIM Service

This is the second part of a series to show how to secure your Flutter applications using Microsoft technologies:

1. Web API — Setting up your Web API with Visual Studio.
2. APIM Service — Creating an API management service in Azure.
3. Secure Gateway — Securing requests through the API gateway.
4. MSAL — Authenticating your Flutter app on iOS.
5. MSAL — Authenticating your Flutter app on Android.
6. MSAL — Authenticating your Flutter app on the Web.
7. Hosted API — Hosting your Web API’s in Azure.
8. Secure Hosted API — Secure requests with the APIM Gateway

This blog post shows you how to setup a Microsoft API Management service in Azure and host an unsecured API Gateway locally.

Azure Account with CLI

First up you will need an Azure login and a subscription, then install the CLI.

And test you can login:

Azure API Management

Now you have an account lets create the API Management service using the CLI.

-- List available locations
az account list-locations -o table

-- Create a new resource group
az group create --name rg-apim-digestableme --location uksouth

-- Create APIM service
az apim create --name apim-digestableme --resource-group rg-apim-digestableme \
  --publisher-name DigestableMe --publisher-email admin@digestableme.com \
  --no-wait

-- Check creation status as it takes a while
az apim show --name apim-digestableme --resource-group rg-apim-digestableme --output table

See get-started-create-service-instance-cli.md for more details.

Once created it will take some time around 20–30mins to complete the provisioning in Azure.

You can add it to your Azure dashboard for easy access.

Docker Desktop

Download install and run docker desktop.

Self hosted local API Gateway

From your APIM service dashboard select Gateways under Deployment + infrastructure

Add a new gateway and select it from the list and select deployment from the settings menu.

Select the Docker tab under Deployment scripts:

Then click on env.conf to download the config file to disk:

Copy the run command and run it locally.

You should now see the new container running in the Docker desktop application

Click on the container name to view the logs and you should see it communicating with your Azure APIM service.

Then go back to the Gateway in Azure and check that the gateway is reporting 1 instance with a heartbeat.

See instructions to host the gateway locally in docker for more details.

Add the Recipes API to the Gateway

Go to your Azure portal and select APIs in the API management service you created.

Choose OpenAPI in Create from definition

And load the swagger.json file you saved in the previous blog post, then hit the create button.

Once added you can set the api suffix in the settings tab which will be reflected in the base url.

Make sure you add your api gateway to the gateways list.

Point the new API at your local backend service.

Make a note of your machine IP or DNS name. You can find your IP address in window settings (windows:settings.network and internet.ethernet.properties) and your host and dns suffix with the ipconfig /all command.

Under APIM service APIs section in Azure select

Add a new backend and point it at your Web API using your machines dns name or IP Address:

https://:/

e.g. https://172.16.44.138:44374/

The port number is the one you specified in the launch settings file when setting up the API.

Add a policy to redirect gateway requests to your local API.

Select your API and all operations in your Azure portal APIM service.

Click on the code link next to any policy section to display policies for all operations and then paste the following policies, ensuring that the backend-id matches the backend your set up in the previous step, save the changes.

<policies>
    <inbound>
        <base />
        <set-backend-service backend-id="LocalRecipesAPI" />
    </inbound>
    <backend>
        <forward-request timeout="10" />
    </backend>
    <outbound>
        <base />
    </outbound>
    <on-error>
        <base />
    </on-error>
</policies>

Monitor the local API gateway logs in docker and wait for the service to update the changes to the gateway.

Now we can test it works via the gateway by using the localhost with the api suffix you configured in the gateway:

https://localhost/api/recipes

If you get an issue check the API Gateway logs in docker.

If not, Congratulations on setting up a working local API gateway, now let’s secure it.

Ta Da

Gateway log excerpt

[Info] 2022-08-31T01:38:04.328, isRequestSuccess: True, totalTime: 110, category: GatewayLogs, callerIpAddress: 172.17.0.1, timeGenerated: 08/31/2022 13:38:04, region: uksouth, correlationId: acd9290b-c156-4970-b527-331a1b540902, method: GET, url: https://localhost/api/recipes, backendResponseCode: 200, responseCode: 200, responseSize: 535, cache: none, backendTime: 107, apiId: recipies-api, operationId: GetRecipes, clientProtocol: HTTP/2, backendProtocol: HTTP/1.1, backendId: LocalRecipesAPI, apiRevision: 1, clientTlsVersion: 1.2, backendMethod: GET, backendUrl: https://172.16.44.138:44374/recipes, correlationId: acd9290b-c156-4970-b527-331a1b540902

Links

• All Azure CLI Command Reference List A — Z
• Create a API Management service with Azure CLI
• Instructions to host the gateway locally in docker