Join Medium to view all my articles.

Flutter — Microsoft API Management secured with AD — MSAL for the Web

This is the sixth 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 in Azure.
8. Secure Hosted API — Secure requests with the APIM Gateway

In this article we show how to get an access token by authenticating against an Azure AD from a website.

I started by adding the javascript MSAL package to support website login:

msal_js: ^2.14.0

And a script tag into web/index.html file to load msal js code:

<!-- MSAL.js -->
 <script 
  type="text/javascript" 
  src="https://alcdn.msauth.net/browser/2.14.2/js/msal-browser.min.js"
  integrity="sha384-ggh+EF1aSqm+Y4yvv2n17KpurNcZTeYtUZUvhPziElsstmIEubyEB6AIVpKLuZgr"…