Skip to content

Commit c77c0e9

Browse files
v-albemiv-albemi
authored
Merge pull request #155620 from jo-arroyo/update-scenario-spa-docs-angular
Update scenario spa docs with msal-angular v2
2 parents 04d1136 + 7923107 commit c77c0e9

File tree

3 files changed

+284
-12
lines changed

3 files changed

+284
-12
lines changed

‎articles/active-directory/develop/scenario-spa-acquire-token.md

Lines changed: 127 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,91 @@ userAgentApplication.acquireTokenSilent(accessTokenRequest).then(function(access
9999
});
100100
```
101101

102-
# [Angular](#tab/angular)
102+
# [Angular (MSAL.js v2)](#tab/angular2)
103103

104104
The MSAL Angular wrapper provides the HTTP interceptor, which will automatically acquire access tokens silently and attach them to the HTTP requests to APIs.
105105

106106
You can specify the scopes for APIs in the `protectedResourceMap` configuration option. `MsalInterceptor` will request these scopes when automatically acquiring tokens.
107107

108+
```javascript
109+
// In app.module.ts
110+
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';
111+
import { MsalInterceptor, MsalModule } from '@azure/msal-angular';
112+
113+
@NgModule({
114+
declarations: [
115+
// ...
116+
],
117+
imports: [
118+
// ...
119+
MsalModule.forRoot( new PublicClientApplication({
120+
auth: {
121+
clientId: 'Enter_the_Application_Id_Here',
122+
},
123+
cache: {
124+
cacheLocation: 'localStorage',
125+
storeAuthStateInCookie: isIE,
126+
}
127+
}), {
128+
interactionType: InteractionType.Popup,
129+
authRequest: {
130+
scopes: ['user.read']
131+
}
132+
}, {
133+
interactionType: InteractionType.Popup,
134+
protectedResourceMap: new Map([
135+
['https://graph.microsoft.com/v1.0/me', ['user.read']]
136+
])
137+
})
138+
],
139+
providers: [
140+
{
141+
provide: HTTP_INTERCEPTORS,
142+
useClass: MsalInterceptor,
143+
multi: true
144+
}
145+
],
146+
bootstrap: [AppComponent]
147+
})
148+
export class AppModule { }
149+
```
150+
151+
For success and failure of the silent token acquisition, MSAL Angular provides events that you can subscribe to. It's also important to remember to unsubscribe.
152+
153+
```javascript
154+
import { MsalBroadcastService } from '@azure/msal-angular';
155+
import { EventMessage, EventType } from '@azure/msal-browser';
156+
157+
// In app.component.ts
158+
export class AppComponent implements OnInit {
159+
private readonly _destroying$ = new Subject<void>();
160+
161+
constructor(private broadcastService: MsalBroadcastService) { }
162+
163+
ngOnInit() {
164+
this.broadcastService.msalSubject$
165+
.pipe(
166+
filter((msg: EventMessage) => msg.eventType === EventType.ACQUIRE_TOKEN_SUCCESS),
167+
takeUntil(this._destroying$)
168+
)
169+
.subscribe((result: EventMessage) => {
170+
// Do something with event payload here
171+
});
172+
}
173+
174+
ngOnDestroy(): void {
175+
this._destroying$.next(undefined);
176+
this._destroying$.complete();
177+
}
178+
}
179+
```
180+
181+
Alternatively, you can explicitly acquire tokens by using the acquire-token methods as described in the core MSAL.js library.
182+
183+
# [Angular (MSAL.js v1)](#tab/angular1)
184+
The MSAL Angular wrapper provides the HTTP interceptor, which will automatically acquire access tokens silently and attach them to the HTTP requests to APIs.
185+
You can specify the scopes for APIs in the `protectedResourceMap` configuration option. `MsalInterceptor` will request these scopes when automatically acquiring tokens.
186+
108187
```javascript
109188
// app.module.ts
110189
@NgModule({
@@ -150,7 +229,6 @@ For success and failure of the silent token acquisition, MSAL Angular provides c
150229
this.subscription= this.broadcastService.subscribe("msal:acquireTokenFailure", (payload) => {
151230
});
152231
}
153-
154232
ngOnDestroy() {
155233
this.broadcastService.getMSALSubject().next(1);
156234
if (this.subscription) {
@@ -335,8 +413,54 @@ myMSALObj.acquireTokenPopup(request);
335413
336414
To learn more, see [Optional claims](active-directory-optional-claims.md).
337415
338-
# [Angular](#tab/angular)
416+
# [Angular (MSAL.js v2)](#tab/angular2)
417+
418+
This code is the same as described earlier, except we recommend bootstrapping the `MsalRedirectComponent` to handle redirects. `MsalInterceptor` configurations can also be changed to use redirects.
419+
420+
```javascript
421+
// In app.module.ts
422+
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';
423+
import { MsalInterceptor, MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
424+
425+
@NgModule({
426+
declarations: [
427+
// ...
428+
],
429+
imports: [
430+
// ...
431+
MsalModule.forRoot( new PublicClientApplication({
432+
auth: {
433+
clientId: 'Enter_the_Application_Id_Here',
434+
},
435+
cache: {
436+
cacheLocation: 'localStorage',
437+
storeAuthStateInCookie: isIE,
438+
}
439+
}), {
440+
interactionType: InteractionType.Redirect,
441+
authRequest: {
442+
scopes: ['user.read']
443+
}
444+
}, {
445+
interactionType: InteractionType.Redirect,
446+
protectedResourceMap: new Map([
447+
['https://graph.microsoft.com/v1.0/me', ['user.read']]
448+
])
449+
})
450+
],
451+
providers: [
452+
{
453+
provide: HTTP_INTERCEPTORS,
454+
useClass: MsalInterceptor,
455+
multi: true
456+
}
457+
],
458+
bootstrap: [AppComponent, MsalRedirectComponent]
459+
})
460+
export class AppModule { }
461+
```
339462
463+
# [Angular (MSAL.js v1)](#tab/angular1)
340464
This code is the same as described earlier.
341465
342466
# [React](#tab/react)

‎articles/active-directory/develop/scenario-spa-app-configuration.md

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,30 @@ const userAgentApplication = new UserAgentApplication(config);
6262

6363
For more information on the configurable options, see [Initializing application with MSAL.js](msal-js-initializing-client-applications.md).
6464

65-
# [Angular](#tab/angular)
65+
# [Angular (MSAL.js v2)](#tab/angular2)
6666

6767
```javascript
68-
// App.module.ts
68+
// In app.module.ts
6969
import { MsalModule } from '@azure/msal-angular';
70+
import { PublicClientApplication } from '@azure/msal-browser';
7071

72+
@NgModule({
73+
imports: [
74+
MsalModule.forRoot( new PublicClientApplication({
75+
auth: {
76+
clientId: 'Enter_the_Application_Id_Here',
77+
}
78+
}), null, null)
79+
]
80+
})
81+
export class AppModule { }
82+
```
83+
84+
# [Angular (MSAL.js v1)](#tab/angular1)
85+
86+
```javascript
87+
// App.module.ts
88+
import { MsalModule } from '@azure/msal-angular';
7189
@NgModule({
7290
imports: [
7391
MsalModule.forRoot({
@@ -77,7 +95,6 @@ import { MsalModule } from '@azure/msal-angular';
7795
})
7896
]
7997
})
80-
8198
export class AppModule { }
8299
```
83100

‎articles/active-directory/develop/scenario-spa-sign-in.md

Lines changed: 137 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ myMsal.loginPopup(loginRequest)
108108
});
109109
```
110110

111-
# [Angular](#tab/angular)
111+
# [Angular (MSAL.js v2)](#tab/angular2)
112112

113113
The MSAL Angular wrapper allows you to secure specific routes in your application by adding `MsalGuard` to the route definition. This guard will invoke the method to sign in when that route is accessed.
114114

@@ -120,6 +120,64 @@ import { ProfileComponent } from './profile/profile.component';
120120
import { MsalGuard } from '@azure/msal-angular';
121121
import { HomeComponent } from './home/home.component';
122122

123+
const routes: Routes = [
124+
{
125+
path: 'profile',
126+
component: ProfileComponent,
127+
canActivate: [
128+
MsalGuard
129+
]
130+
},
131+
{
132+
path: '',
133+
component: HomeComponent
134+
}
135+
];
136+
137+
@NgModule({
138+
imports: [RouterModule.forRoot(routes, { useHash: false })],
139+
exports: [RouterModule]
140+
})
141+
export class AppRoutingModule { }
142+
```
143+
144+
For a pop-up window experience, set the `interactionType` configuration to `InteractionType.Popup` in the Guard configuration. You can also pass the scopes that require consent as follows:
145+
146+
```javascript
147+
// In app.module.ts
148+
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';
149+
import { MsalModule } from '@azure/msal-angular';
150+
151+
@NgModule({
152+
imports: [
153+
MsalModule.forRoot( new PublicClientApplication({
154+
auth: {
155+
clientId: 'Enter_the_Application_Id_Here',
156+
},
157+
cache: {
158+
cacheLocation: 'localStorage',
159+
storeAuthStateInCookie: isIE,
160+
}
161+
}), {
162+
interactionType: InteractionType.Popup, // Msal Guard Configuration
163+
authRequest: {
164+
scopes: ['user.read']
165+
}
166+
}, null)
167+
]
168+
})
169+
export class AppModule { }
170+
```
171+
172+
# [Angular (MSAL.js v1)](#tab/angular1)
173+
The MSAL Angular wrapper allows you to secure specific routes in your application by adding `MsalGuard` to the route definition. This guard will invoke the method to sign in when that route is accessed.
174+
```javascript
175+
// In app-routing.module.ts
176+
import { NgModule } from '@angular/core';
177+
import { Routes, RouterModule } from '@angular/router';
178+
import { ProfileComponent } from './profile/profile.component';
179+
import { MsalGuard } from '@azure/msal-angular';
180+
import { HomeComponent } from './home/home.component';
123181
const routes: Routes = [
124182
{
125183
path: 'profile',
@@ -133,7 +191,6 @@ const routes: Routes = [
133191
component: HomeComponent
134192
}
135193
];
136-
137194
@NgModule({
138195
imports: [RouterModule.forRoot(routes, { useHash: false })],
139196
exports: [RouterModule]
@@ -299,7 +356,38 @@ myMsal.handleRedirectCallback(authCallback);
299356
myMsal.loginRedirect(loginRequest);
300357
```
301358

302-
# [Angular](#tab/angular)
359+
# [Angular (MSAL.js v2)](#tab/angular2)
360+
361+
The code here is the same as described earlier in the section about sign-in with a pop-up window, except that the `interactionType` is set to `InteractionType.Redirect` for the MsalGuard Configuration, and the `MsalRedirectComponent` is bootstrapped to handle redirects.
362+
363+
```javascript
364+
// In app.module.ts
365+
import { PublicClientApplication, InteractionType } from '@azure/msal-browser';
366+
import { MsalModule, MsalRedirectComponent } from '@azure/msal-angular';
367+
368+
@NgModule({
369+
imports: [
370+
MsalModule.forRoot( new PublicClientApplication({
371+
auth: {
372+
clientId: 'Enter_the_Application_Id_Here',
373+
},
374+
cache: {
375+
cacheLocation: 'localStorage',
376+
storeAuthStateInCookie: isIE,
377+
}
378+
}), {
379+
interactionType: InteractionType.Redirect, // Msal Guard Configuration
380+
authRequest: {
381+
scopes: ['user.read']
382+
}
383+
}, null)
384+
],
385+
bootstrap: [AppComponent, MsalRedirectComponent]
386+
})
387+
export class AppModule { }
388+
```
389+
390+
# [Angular (MSAL.js v1)](#tab/angular1)
303391

304392
The code here is the same as described earlier in the section about sign-in with a pop-up window. The default flow is redirect.
305393

@@ -405,7 +493,30 @@ await myMsal.logoutPopup(logoutRequest);
405493

406494
Signing out with a popup window is not supported in MSAL.js v1
407495

408-
# [Angular](#tab/angular)
496+
# [Angular (MSAL.js v2)](#tab/angular2)
497+
498+
```javascript
499+
// In app.module.ts
500+
@NgModule({
501+
imports: [
502+
MsalModule.forRoot( new PublicClientApplication({
503+
auth: {
504+
clientId: 'your_app_id',
505+
postLogoutRedirectUri: 'your_app_logout_redirect_uri'
506+
}
507+
}), null, null)
508+
]
509+
})
510+
511+
// In app.component.ts
512+
logout() {
513+
this.authService.logoutPopup({
514+
mainWindowRedirectUri: "/"
515+
});
516+
}
517+
```
518+
519+
# [Angular (MSAL.js v1)](#tab/angular1)
409520

410521
Signing out with a popup window is not supported in MSAL Angular v1
411522

@@ -492,7 +603,28 @@ const myMsal = new UserAgentApplication(config);
492603
myMsal.logout();
493604
```
494605

495-
# [Angular](#tab/angular)
606+
# [Angular (MSAL.js v2)](#tab/angular2)
607+
608+
```javascript
609+
// In app.module.ts
610+
@NgModule({
611+
imports: [
612+
MsalModule.forRoot( new PublicClientApplication({
613+
auth: {
614+
clientId: 'your_app_id',
615+
postLogoutRedirectUri: 'your_app_logout_redirect_uri'
616+
}
617+
}), null, null)
618+
]
619+
})
620+
621+
// In app.component.ts
622+
logout() {
623+
this.authService.logoutRedirect();
624+
}
625+
```
626+
627+
# [Angular (MSAL.js v1)](#tab/angular1)
496628

497629
```javascript
498630
//In app.module.ts
@@ -506,7 +638,6 @@ myMsal.logout();
506638
})
507639
]
508640
})
509-
510641
// In app.component.ts
511642
this.authService.logout();
512643
```

0 commit comments

Comments
 (0)