How to get the user profile logged in your Angular SPA using Azure Active Directory

Viewed 702

I am trying to implement the authentication service in my Angular application based on the QuickStart that Azure offers in its portal and that is based on these instructions:https://docs.microsoft.com/es-es/azure/active-directory/develop/tutorial-v2-angular-auth-code

This application is for exclusive use within my organization (Single Tenant) and I will only authenticate users of my Active Directory that is synchronized in my Azure tenant

When I do Login()

 login() {
  if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
   if (this.msalGuardConfig.authRequest) {
   this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as PopupRequest)
   .subscribe((response: AuthenticationResult) => {
    this.authService.instance.setActiveAccount(response.account);
  });
 } else {
  this.authService.loginPopup()
  .subscribe((response: AuthenticationResult) => {
    this.authService.instance.setActiveAccount(response.account);
  });
 }
 } else {
  if (this.msalGuardConfig.authRequest) {
  this.authService.loginRedirect({ ...this.msalGuardConfig.authRequest } as RedirectRequest);    
 } else {
 this.authService.loginRedirect();
 }
 }

I get the dialog box to log in and everything goes well but at that very moment I need to know who has logged in and not when you click on the "Profile" button to see it after doing the previous login.

That is, this that works after logging in to the ProfileComponent

const GRAPH_ENDPOINT = 'https://graph.microsoft.com/v1.0/me';

type ProfileType = {
  givenName?: string,
  surname?: string,
  userPrincipalName?: string,
  id?: string
}

getProfile() {
 this.http.get(GRAPH_ENDPOINT)
  .subscribe(profile => {
   this.profile = profile;
});
}

I would like to launch it automatically after logging in to AppComponent but I don't really know where to put it

When you launch the login the first time from AppComponent go here

debug

and pop up the dialog box

login

But once the credentials are approved I lose control of the code I don't know where to get the data of the logged profile

subscribe

The loginRedirect method returns an Observable so I don't know how to subscribe to get some data when finished

Any ideas please?

All the best

0 Answers
Related