Sign In Users and Azure Storage API

Overview

This bog is a sequel to https://cloudjourney.medium.com/secure-azure-storage-api-16cf87dd39a6

  • 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 https://cloudjourney.medium.com/msal-angualr-spa-fb1051859abf

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 https://github.com/Ronnie-personal/identity-for-all/tree/main/msal-angular

Test Code

npm install
npm start

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.

//blob.ts
export interface MyBlob {
blobFile: string;
lastModified: Date;
}

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

Conclusion

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.

References

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cloud Journey

Cloud Journey

All blogs are strictly personal and do not reflect the views of my employer, focus on cloud networking, cloud security and API security.