This is a sample application to test the authentication with Azure Active Directory directly in an angular application, using msal library.
It is strongly based on this sample project here.
This project was generated with Angular CLI version 16.1.0.
The following pre-requisites are required to run the application.
- Active Azure subscription
- Active Azure Active Directory (AAD)
- Privileged access to AAD to register the application and assign permissions to it
The angular application must be first registered in the Azure Active Directory to get identifiers that will then be used by the app to identify itself and get granted access.
By default, an anuglar app runs on http://localhost:4200 and thus I suggest to use this URL as the redirect URL when registering the application.
This process is well documented on many different websites and blogs:
Important Write down the identifiers (client ID and tenant ID) and the redirect URL that were generated upon app registration.
The login URL to setup in the application depends on the Azure AD setup one has. It may vary a bit as explained on this Microsoft's documentation page.
Although the might common probably is the single tenant scenario in which case the URL is https://login.microsoftonline.com/your-tenant-ID-or-name where your-tenant-ID-or-name must be replaced with your tenant ID (a GUID given when registering the app) or it's name (don't know the format, and I personally prefer the GUID one to avoid any doubts).
Create a new environment configuration file in the environments directory for the environment you want to setup.
The following environments are predefined:
- development: create a file environment.dev.ts
- production: create a file environment.prod.ts
Open the created configuration file for the environement to setup and update the following keys with values:
- ENTER_CLIENT_ID: the client ID generated when the app was registered
- ENTER_AUTHORITY: the Login URL as explained above
- ENTER_SCOPE: an array of scopes, the app requests permissions for (defaults to user.read)
- ENTER_URI: the Microsoft Graph API URL the application calls to get user information
Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.