https://github.com/khandelwal-arpit/angular-azure-auth
Demonstrate authenticating Angular apps with Azure Active Directory using MSAL Angular.
https://github.com/khandelwal-arpit/angular-azure-auth
angular azure-ad azure-authentication msal
Last synced: about 2 months ago
JSON representation
Demonstrate authenticating Angular apps with Azure Active Directory using MSAL Angular.
- Host: GitHub
- URL: https://github.com/khandelwal-arpit/angular-azure-auth
- Owner: khandelwal-arpit
- License: mit
- Created: 2020-11-09T17:10:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-09T17:19:49.000Z (over 4 years ago)
- Last Synced: 2025-01-11T17:49:06.093Z (4 months ago)
- Topics: angular, azure-ad, azure-authentication, msal
- Language: TypeScript
- Homepage:
- Size: 3.2 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Angular MSAL Based Authentication
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.2.0. The objective of this project is to demonstrate authenticating Angular apps with Azure Active Directory using MSAL Angular 1.0.
## MSAL library
Microsoft released Version 1.0 of its Library for Angular that facilitates the implementation of OAuth 2.0 token based authentication into Azure Active Directory. The library was released on May 3rd 2020 ending a long phase of workarounds and beta versions of the Angular variant of the MSAL library for Single Page Applications (SPA).
## Prerequisites
- NPM, Angular CLI (v10)
- Azure AD, get your free Azure account here: https://azure.microsoft.com/en-us/free/
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Code scaffolding
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`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
## Environment Configurations
Replace the following in the environment.ts config with your application specific values:
- clientId: '{YOUR-APP-CLIENT_ID}',
- authority: 'https://login.microsoftonline.com/{YOUR-APP-TENANT-ID}/'
## Configure a new app registration in Azure AD
Azure AD App Registrations
Configure Redirect URI
Configure SPA
Client Id & Tenant Id
## Application Screenshots
Launch Page
Login Page
Password Page
Profile Page
