Skip to content

Commit 3d4568f

Browse files
derisenderisen
committed
2 parents 86fb16c + 57c815f commit 3d4568f

File tree

17 files changed

+538
-225
lines changed

17 files changed

+538
-225
lines changed

‎2-Authorization-I/1-call-graph/README.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,12 +48,14 @@ Here you'll learn about [Access Tokens](https://aka.ms/access-tokens), [acquirin
4848

4949
## Contents
5050

51-
| File/folder | Description |
52-
|---------------------------------|-----------------------------------------------------------------------|
53-
| `src/app/auth-config.ts` | Authentication configuration parameters reside here. |
54-
| `src/app/app.module.ts` | MSAL-Angular configuration parameters reside here. |
55-
| `src/app/app-routing.module.ts` | Configure your MSAL-Guard here. |
56-
| `src/app/graph.service.ts` | Class to call graph API. |
51+
| File/folder | Description |
52+
|-----------------------------------------------------------|-----------------------------------------------------------------------|
53+
| `src/app/auth-config.ts` | Authentication configuration parameters reside here. |
54+
| `src/app/app.module.ts` | MSAL-Angular configuration parameters reside here. |
55+
| `src/app/app-routing.module.ts` | Configure your MSAL-Guard here. |
56+
| `src/app/graph.service.ts` | Class to call graph API. |
57+
| `src/app/account-switch/account-switch.component.ts` | Contains logic to handle multiple account selection with MSAL.js. |
58+
5759

5860
## Prerequisites
5961

‎2-Authorization-I/1-call-graph/SPA/src/app/account-switch/account-switch.component.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
ul {
2+
list-style-type: none;
3+
4+
}
5+
6+
li {
7+
cursor: pointer;
8+
}
9+
10+
span {
11+
font-size: medium;
12+
margin: 0 .5rem;
13+
}

‎2-Authorization-I/1-call-graph/SPA/src/app/account-switch/account-switch.component.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<h2 mat-dialog-title>Pick an account</h2>
2+
<div mat-dialog-content>
3+
<ul>
4+
<li *ngFor="let account of data.accounts" mat-dialog-close (click)="switchAccount(account)" mat-dialog-close="true">
5+
<mat-icon>account_circle</mat-icon>
6+
<span >{{account.username}}</span>
7+
</li>
8+
<li (click)="switchAccount(null)">
9+
<mat-icon>library_add</mat-icon>
10+
<span>New account</span>
11+
</li>
12+
</ul>
13+
</div>
14+
<mat-dialog-actions>
15+
<button mat-button mat-dialog-close mat-dialog-close="true">
16+
Cancel
17+
</button>
18+
</mat-dialog-actions>
19+
20+
21+

‎2-Authorization-I/1-call-graph/SPA/src/app/account-switch/account-switch.component.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { Component, OnInit, Inject } from '@angular/core';
2+
import {
3+
MsalService,
4+
MSAL_GUARD_CONFIG,
5+
MsalGuardConfiguration,
6+
7+
} from '@azure/msal-angular';
8+
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
9+
import {
10+
RedirectRequest,
11+
InteractionRequiredAuthError,
12+
SilentRequest,
13+
AccountInfo,
14+
} from '@azure/msal-browser';
15+
import {
16+
PromptValue
17+
} from '@azure/msal-common';
18+
19+
@Component({
20+
selector: 'app-account-switch-component',
21+
templateUrl: './account-switch.component.html',
22+
styleUrls: ['./account-switch.component.css'],
23+
})
24+
export class AccountSwitchComponent implements OnInit {
25+
accounts: AccountInfo[] = [];
26+
constructor(
27+
@Inject(MAT_DIALOG_DATA) public data: any,
28+
@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
29+
private authService: MsalService
30+
) {}
31+
32+
ngOnInit(): void {}
33+
34+
switchAccount(account: AccountInfo | null) {
35+
const activeAccount = this.authService.instance.getActiveAccount();
36+
this.authService.instance.setActiveAccount(account);
37+
if (!account) {
38+
this.authService.instance.loginRedirect({
39+
...this.msalGuardConfig.authRequest,
40+
prompt: PromptValue.LOGIN,
41+
} as RedirectRequest);
42+
} else if (
43+
account &&
44+
activeAccount?.homeAccountId !== account.homeAccountId
45+
) {
46+
this.authService.instance
47+
.ssoSilent({
48+
...this.msalGuardConfig.authRequest,
49+
account: account,
50+
} as SilentRequest)
51+
.then(() => {
52+
window.location.reload();
53+
})
54+
.catch((error) => {
55+
if (error instanceof InteractionRequiredAuthError) {
56+
this.authService.instance.loginRedirect({
57+
...this.msalGuardConfig.authRequest,
58+
...this.msalGuardConfig.authRequest,
59+
prompt: PromptValue.LOGIN,
60+
} as RedirectRequest);
61+
}
62+
});
63+
}
64+
}
65+
}

‎2-Authorization-I/1-call-graph/SPA/src/app/app.component.html‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,26 @@
88
<button mat-raised-button *ngIf="!loginDisplay" (click)="login()">
99
Login
1010
</button>
11-
<button mat-raised-button color="accent" *ngIf="loginDisplay" (click)="logout()">
12-
Logout
11+
12+
<button mat-raised-button color="accent" *ngIf="loginDisplay" [matMenuTriggerFor]="menu">
13+
<mat-icon>keyboard_arrow_down</mat-icon>
14+
{{name}}
1315
</button>
16+
17+
<mat-menu #menu="matMenu">
18+
<button mat-menu-item (click)="openDialog()">Switch Account</button>
19+
<button mat-menu-item (click)="logout()">Logout</button>
20+
</mat-menu>
21+
1422
</mat-toolbar>
1523

24+
1625
<div class="container">
1726
<!--This is to avoid reload during acquireTokenSilent() because of hidden iframe -->
1827
<router-outlet *ngIf="!isIframe"></router-outlet>
1928
</div>
2029

30+
2131
<footer *ngIf="loginDisplay">
2232
<mat-toolbar>
2333
<div class="footer-text">

0 commit comments

Comments
 (0)