Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
This tutorial is the final part of a series that demonstrates building an Angular single-page application (SPA) and adding authentication using the Microsoft identity platform. In Part 2 of this series, you created an Angular SPA and prepared it for authentication with your workforce tenant.
In this tutorial, you
- Add data processing to your Angular application.
- Test the application and extract user data.
To configure your Angular application to interact with the Microsoft Graph API, complete the following steps:
Open the
src/app/profile/profile.component.ts
file and replace the contents with the following code snippet:// Required for Angular import { Component, OnInit } from '@angular/core'; // Required for the HTTP GET request to Graph import { HttpClient } from '@angular/common/http'; type ProfileType = { businessPhones?: string, displayName?: string, givenName?: string, jobTitle?: string, mail?: string, mobilePhone?: string, officeLocation?: string, preferredLanguage?: string, surname?: string, userPrincipalName?: string, id?: string } @Component({ selector: 'app-profile', templateUrl: './profile.component.html' }) export class ProfileComponent implements OnInit { profile!: ProfileType; tokenExpiration!: string; constructor( private http: HttpClient ) { } // When the page loads, perform an HTTP GET request from the Graph /me endpoint ngOnInit() { this.http.get('https://microsoftgraph.chinacloudapi.cn/v1.0/me') .subscribe(profile => { this.profile = profile; }); this.tokenExpiration = localStorage.getItem('tokenExpiration')!; } }
The
ProfileComponent
in Angular fetches user profile data from Microsoft Graph's/me
endpoint. It definesProfileType
to structure properties likedisplayName
andmail
. InngOnInit
, it usesHttpClient
to send a GET request, assigning the response toprofile
. It also retrieves and stores the token expiration time fromlocalStorage
intokenExpiration
.Open the
src/app/profile/profile.component.html
file and replace the contents with the following code snippet:<div class="profile"> <p><strong>Business Phones:</strong> {{profile?.businessPhones}}</p> <p><strong>Display Name:</strong> {{profile?.displayName}}</p> <p><strong>Given Name:</strong> {{profile?.givenName}}</p> <p><strong>Job Title:</strong> {{profile?.jobTitle}}</p> <p><strong>Mail:</strong> {{profile?.mail}}</p> <p><strong>Mobile Phone:</strong> {{profile?.mobilePhone}}</p> <p><strong>Office Location:</strong> {{profile?.officeLocation}}</p> <p><strong>Preferred Language:</strong> {{profile?.preferredLanguage}}</p> <p><strong>Surname:</strong> {{profile?.surname}}</p> <p><strong>User Principal Name:</strong> {{profile?.userPrincipalName}}</p> <p><strong>Profile Id:</strong> {{profile?.id}}</p> <br><br> <p><strong>Token Expiration:</strong> {{tokenExpiration}}</p> <br><br> <p>Refreshing this page will continue to use the cached access token until it nears expiration, at which point a new access token will be requested.</p> </div>
This code defines an HTML template that displays user profile information, using Angular's interpolation syntax to bind properties from the
profile
object (For example.,businessPhones
,displayName
,jobTitle
). It also shows thetokenExpiration
value and includes a note stating that refreshing the page will use the cached access token until it nears expiration, after which a new token will be requested.
For the application to work, you need to run the Angular application and sign in to authenticate with your Microsoft Entra tenant and extract user data.
To test the application, complete the following steps:
Run the Angular application by executing the following command in the terminal:
ng serve --open
Select the Sign in button to authenticate with your Microsoft Entra tenant.
After signing in, select the View Profile link to navigate to the Profile page. Verify that the user profile information is displayed, including the user's name, email, job title, and other details.
Select the Sign out button to sign out of the application.
Learn how to use the Microsoft identity platform by trying out the following tutorial series on how to build a web API.