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

app-routing.modules.ts
app.module.ts
app.component.ts
app.component.html
profile.components.ts
profile.component.html
home.component.ts
home.component.html

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.

//blob.ts
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:
app.components.ts
app.component.html
app-routing.module.ts
blob-view.component.css
blob-view.component.html

For more details, please refer to github repo https://github.com/Ronnie-personal/identity-for-all/tree/main/msal-angular-my-storage-api/src/app

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.

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.

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

References

ms-identity-javascript-angular-tutorial/3-Authorization-II/1-call-api at main ·…

ms-identity-javascript-angular-tutorial/3-Authorization-II/2-call-api-b2c at main ·…

Tutorial: Create an Angular app that uses the Microsoft identity platform for authentication using…

GitHub - DanWahlin/Angular-JumpStart: Angular and TypeScript JumpStart example application

GitHub - Ismaestro/angular-example-app: Angular 13 Example App + Angular CLI + i18n + GraphQL

I get an error when trying to authorize from the api managment developer portal. · Issue #37280 ·…

Enable Cross-Origin Requests (CORS) in ASP.NET Core

“https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/”
“https://www.youtube.com/watch?v=G6f5yN5YdF8”
“https://stackoverflow.com/questions/70657156/enabling-cors-in-asp-net-core-6”
“https://www.youtube.com/watch?v=YrZIKnb-Iwo”
“https://www.thecodebuzz.com/set-appsettings-json-dynamically-dev-and-release-environments-asp-net-core/”
“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 (code-maze.com)”
“https://ej2.syncfusion.com/angular/documentation/menu/how-to/right-to-left/”
“Angular Material 13 Tutorial: Navigation UI with Toolbar and Menu | Techiediaries”
“Angular Material — Demos > Colors (angularjs.org)”
“The color system — Material Design”