Flutter — Microsoft API Management secured with AD — Hosted Gateway

This is the eighth part of a mini 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 on Azure.
8. Secure Hosted API — Secure requests with the APIM Gateway

In this article we show how to secure requests to the Azure hosted Digests API with your APIM Gateway.

Before an application can get a token from the Microsoft identity platform (AAD), it must be registered in the Azure portal.

Registration integrates your app with the Microsoft identity platform and establishes the information that it uses to get tokens.

We have already registered the DigestableMe application and added the iOS, Android and the SPA platforms.

To secure and new Digests API I created a new registration and added the web platform to it with a redirect url to support requests from Postman:

I then exposed the API and assigned permissions to allow DigestableMe to use it.

I added the Digests API to the API’s in the APIM and create some gateway policies to get the gateway to validate the access token and forward requests to the backend API App.

Ta Da

XP

This section lists the actions you need to take using the Azure Portal UI to add and secure the digests API with the APIM gateway and how to call it using Postman.

It includes some additional information about debugging JWT tokens and updating the app registration access token version for OAuth2.

Register API App

Add the web platform to support Postman

Add the web platform to the api app registration with a redirect to support requests from Postman

url: https://oauth.pstmn.io/v1/callback

Grant your app registration permission to the API

Expose the API

Add your new API to the APIM Gateway

See myprevious article on APIMif it’s new to you.

Run the DigestsAPI that you previously created and save the OpenAPI specification to file.

In you API management service in the Azure portal Select APIs

Link the API App and APIM

Go to the API app you created and under the API section select API Management:

And complete the form to link to the APIM

Note: Whilst I would have liked to use this option it failed, so I linked it without and deleted the extra operations created in the APIM.

Add an APIM policy to redirect request to the backend API App Service

Now that the you have linked the API App service to the APIM service:

You can setup a policy to redirect requests from the gateway to the service:

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

Add a product

Products let you group APIs, define terms of use, and runtime policies. API consumers can subscribe to a product on the developer portal to obtain a key to call your APIs.

Without a product been setup and published calls to the API via Postman will fail:

{
    "statusCode": 401,
    "message": "Access denied due to missing subscription key. Make sure to include subscription key when making requests to an API."
}

I decided to name the product Digests and then added it to the Azure APIM service:

Add an APIM policy to secure requests to the Gateway

Add a validate JWT token policy to the API inbound requests:

Edit the new policy and add the openid-config:

<validate-jwt header-name=”Authorization” failed-validation-httpcode=”401" failed-validation-error-message=”Unauthorised. Access token is missing or invalid.”>
 <openid-config url=”https://login.microsoftonline.com/a3988af1-cea6-4ed2-b818-63b00f7967b5/v2.0/.well-known/openid-configuration" />
</validate-jwt>

Using postman to access the API via a secured gateway

Updating an OpenAPI Specification in Azure APIM

Once your API is published you will need to make changes to it.

In addition to revision and versions:

You can just update the specification, by clicking on the pencil to the right of Frontend:

Read a JWT Token

You can learn about and decode your JWT auth and access tokens online at https://jwt.io/ e.g.

Token version and TokenInvalidSignature error

After completing all the steps and getting and using a valid access token Postman was still returning a 401 unauthorised error.

After a fair amount of googling without success I decode the access token and noticed an unusual issuer entry:

"iss": "https://sts.windows.net/a39...23421dfdaf"

It turns out that you need to update your app registrations to use oath v2.

To update it open the app registration manifest and add the version:

"accessTokenAcceptedVersion": null,

To

"accessTokenAcceptedVersion": 2,

Now the access token issuer is correct and the token signature is valid:

BackBurner

Continuous Deployment

More work on CI/CD to support environmental deployment and update the API specification changes e.g.

Securing your API App

We have secured access via the APIM gateway:

https://apim-xxx.azure-api.net/digests/recipes

But you can still access the API App directly without security:

https://api-xxx.azurewebsites.net/digests/recipes

In a production system you would want to restrict access to requests from your APIM, this can be done by configuring the networking in the API App:

Links

• User and admin consent in Azure Active Directory
• Authentication and authorisation basics
• APIOps basics
• Permission Naming
• What is Azure API Management?
• Create and publish a Product
• APIM Policies