Sign In Users and Azure Storage API

Cloud Journey
5 min readJun 17, 2022



This bog is a sequel to

  • Round 1, develop Angular SPA code, sign in user who is from same organization and call Microsoft Graph API by using the authorization code flow with PKCE
  • Round 2, customize code to call MyStorageApi

Round 1

Generate Angular Application

Regarding installing latest npm, please refer to my other blog

npm install -g @angular/cli                         
ng new msal-angular --routing=true --style=css --strict=false
cd msal-angular
npm install @angular/material @angular/cdk
npm install @azure/msal-browser @azure/msal-angular
ng generate component home
ng generate component profile

App Registration

Create app registration and configure redirect URL for this SPA type of application.

Update Code

You will need to update following list of code files, please refer to my code repository for the complete code stack


Test Code

npm install
npm start

If you encounter any issues during test, open developer tool from browser and check the exception errors from developer tool’s console.

Open http://localhost:4200, after login and give consent, Microsoft graph API is called successfully and return user profile information.

Round 2

Round 2 code is developed on top of round 1 code stack with modification.

Update Angular Code

Open Angular project folder from VSCode, under /src/app add blob.service.ts and blob.ts, blob.ts needs to be consistent with API model class, in blob.service.ts call MyBlobFile API.

export interface MyBlob {
blobFile: string;
lastModified: Date;

app.module.ts has MSAL for Angular configuration, including MSAL Guard and MSAL Interceptor configuration.

Under src/app/blob-view, add blob-view.components.ts

Update following list of code files as well:

For more details, please refer to github repo

Update API Code

To deal with cors issues, please update your API code stack, add cors configuration to Program.cs.

Round 2 Test

From VSCode, start Angular application.

PS D:\identity-for-all\msal-angular-my-storage-api> npm start

From Visual Studio, open SecureApi project, under Properties -> launchSettings.json, ASPNETCORE_ENVIRONMENT has been configured as “Local”. Kick off the project by clicking the green arrow icon.

Open http://localhost:4200 from browser, after login, click BlobList button, it shows the list of files in Azure storage container. You may choose a file to download by clicking download button, then the file is downloaded from Azure storage to your local drive.


In this blog post, we demonstrated MSAL for Angular 2, we use Microsoft identity platform to sign in user who is from same organiztion, and call secured APIs to work with Azure storage.

In next blog, we will explore Azure AD B2C, to work with external user.


c# — Im not able to access Response.Headers(“Content-Disposition”) on client even after enable CORS — Stack Overflow
How to Add Custom Headers in ASP.NET Core Web API (
Angular Material 13 Tutorial: Navigation UI with Toolbar and Menu | Techiediaries
Angular Material — Demos > Colors (
The color system — Material Design



Cloud Journey

All blogs are strictly personal and do not reflect the views of my employer.

Recommended from Medium


See more recommendations