MSAL Angualr SPA
2 min readMay 31, 2022
--
Overview
We will go over MS sample identity code.
Install Node.js and NPM
Install nvm
For windows, goes to here https://github.com/coreybutler/nvm-windows/releases
For Linux, goes to https://github.com/nvm-sh/nvm
Install Latest Node
To install the LTS (long term support version) or “latest”
nvm install latestC:\Users\rquan>nvm install lts
Downloading node.js version 16.15.0 (64-bit)...
Extracting...
CompleteInstallation 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 installConfigure 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 serveCompiling @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
Open http://localhost:4200 and click login, after consent, the app shows your name, UPN and OID.
From browser web developer tools, you can check more logging information.
References
https://docs.microsoft.com/en-us/azure/active-directory/develop/sample-v2-code
https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
