Skip to content

angular-spa

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

angular-spa

README.md

Angular | web | user sign-in, protected web API access (Microsoft Graph) | Microsoft identity platform

This Angular application uses the Angular MSAL v2 library to authenticate a user and then makes a request to the Graph API as the authenticated user. The response to the request is displayed in the web browser.

Screenshot with profile information from Graph

Prerequisites

  • A Microsoft Entra tenant and the permissions or role required for managing app registrations in the tenant.
  • Node.js ^18.13.0 || ^20.9.0
  • Angular 17

Setup

1. Register the app

First, complete the steps in Register an application with the Microsoft identity platform to register the application.

Use these settings in your app registration.

App registration
setting		 Value for this sample app Notes
Name Angular SPA Suggested value for this sample.
You can change the app name at any time.
Supported account types Accounts in this organizational directory only (Single tenant) Suggested value for this sample.
Platform type Single-Page Application Required value for this sample.
Redirect URI http://localhost:4200 Required value for this sample.

ℹ️ Bold text in the tables above matches (or is similar to) a UI element in the Microsoft Entra admin center, while code formatting indicates a value you enter into a text box in the Microsoft Entra admin center.

2. Update code sample in app.module.ts with app registration values

// 'Application (client) ID' of app registration in the Microsoft Entra admin center - this value is a GUID
clientId: 'Enter_the_Application_Id_Here',
    
// Full directory URL, in the form of https://login.microsoftonline.com/<tenant>
authority: 'https://login.microsoftonline.com/Enter_the_Tenant_ID_Here',

// Must be the same redirectUri as what was provided in your Microsoft Entra app registration.
redirectUri: 'Enter_the_Redirect_URI_Here'

3. Install package(s)

To install required packages:

npm install

Run the application

ng serve --open

Follow the instructions that are presented on the web browser. If everything worked, you should receive a response similar to this on the "View Profile" page:

Screenshot with profile information from Graph

About the code

This Angular web application uses the Angular MSAL v2 library to authenticate a user and then makes a request to the Microsoft Graph API as the authenticated user to retrieve their user profile data.

  • MSALGuard is used to protect the web app's routes.
  • MSALBroadcastService is used to consume events emitted by MSAL. Events such as "login success" and "acquire token success" tell the app when the user has sucessfully been authenticated.
  • MSALInterceptor is an Interceptor clsss provided by MSAL Angular to automatically and silently acquire access tokens for known resources, in this case for Graph.
  • HttpClient is used to issue an HTTP GET request to Microsoft Graph with user's access token.

Reporting problems

Sample app not working?

If you can't get the sample working, you've checked Stack Overflow, and you've already searched the issues in this sample's repository, open an issue report the problem.

  1. Search the GitHub issues in the repository - your problem might already have been reported or have an answer.
  2. Nothing similar? Open an issue that clearly explains the problem you're having running the sample app.

All other issues

⚠️ WARNING: Any issue in this repository not limited to running one of its sample apps will be closed without being addressed.

For all other requests, see Support and help options for developers | Microsoft identity platform.

Contributing

If you'd like to contribute to this sample, see CONTRIBUTING.MD.

This project has adopted the Microsoft Open Source Code of Conduct. For more information, see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.