MSAL Angualr SPA

Overview

Install Node.js and NPM

nvm install latestC:\Users\rquan>nvm install lts
Downloading node.js version 16.15.0 (64-bit)...
Extracting...
Complete
Installation complete. If you want to use this version, type#if you encounter any issue, pls ensure to use windows administrator account
nvm use 16.15.0

Install Code

git clone https://github.com/Azure-Samples/ms-identity-javascript-angular-tutorial.git
cd ms-identity-javascript-angular-tutorial
cd 1-Authentication/1-sign-in/SPA
npm install

Configure App Registration

Run powershell as administrator to create app registration.

PS D:\code\ms-identity-javascript-angular-tutorial> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process -ForcePS D:\code\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\AppCreationScripts> .\Configure.ps1
Creating the AAD application (msal-angular-spa)
'rqpersonaladmin@<xyz>.onmicrosoft.com' added as an application owner to app 'msal-angular-spa'
Done creating the spa application (msal-angular-spa)
Updating the sample code (D:\code\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\AppCreationScripts\..\SPA\src\app\auth-config.ts)

------------------------------------------------------------------------------------------------
IMPORTANT: Please follow the instructions below to complete a few manual step(s) in the Azure portal :
- For 'spa'
- Navigate to 'https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/CallAnAPI/appId/be88c7bb-25a4-4bbb-b268-9321611e7b78/objectId/1fae12a7-d92a-4d31-8526-690c856abc8c/isMSAApp/'
- Navigate to the Manifest page, find the 'replyUrlsWithType' section and change the type of redirect URI to 'Spa'
------------------------------------------------------------------------------------------------

Running Application

PS D:\code\ms-identity-javascript-angular-tutorial\1-Authentication\1-sign-in\SPA> npm start> ms-identity-angular-c1s1@1.0.0 start
> ng serve
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015

References

https://docs.microsoft.com/en-us/azure/active-directory/develop/sample-v2-code

--

--

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.