@azure/msal-angular 4.0.13 → 4.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (89) hide show
  1. package/IMsalService.d.ts +17 -0
  2. package/README.md +1 -1
  3. package/constants.d.ts +5 -0
  4. package/esm2020/IMsalService.mjs +6 -0
  5. package/esm2020/azure-msal-angular.mjs +5 -0
  6. package/esm2020/constants.mjs +10 -0
  7. package/esm2020/msal.broadcast.config.mjs +6 -0
  8. package/esm2020/msal.broadcast.service.mjs +66 -0
  9. package/esm2020/msal.guard.config.mjs +6 -0
  10. package/esm2020/msal.guard.mjs +218 -0
  11. package/esm2020/msal.interceptor.config.mjs +6 -0
  12. package/esm2020/msal.interceptor.mjs +270 -0
  13. package/esm2020/msal.module.mjs +46 -0
  14. package/esm2020/msal.navigation.client.mjs +53 -0
  15. package/esm2020/msal.redirect.component.mjs +31 -0
  16. package/esm2020/msal.service.mjs +88 -0
  17. package/esm2020/packageMetadata.mjs +4 -0
  18. package/esm2020/public-api.mjs +18 -0
  19. package/fesm2015/azure-msal-angular.mjs +762 -0
  20. package/fesm2015/azure-msal-angular.mjs.map +1 -0
  21. package/fesm2020/azure-msal-angular.mjs +758 -0
  22. package/fesm2020/azure-msal-angular.mjs.map +1 -0
  23. package/index.d.ts +5 -0
  24. package/msal.broadcast.config.d.ts +3 -0
  25. package/msal.broadcast.service.d.ts +19 -0
  26. package/msal.guard.config.d.ts +9 -0
  27. package/msal.guard.d.ts +43 -0
  28. package/msal.interceptor.config.d.ts +13 -0
  29. package/msal.interceptor.d.ts +70 -0
  30. package/msal.module.d.ts +13 -0
  31. package/msal.navigation.client.d.ts +19 -0
  32. package/msal.redirect.component.d.ts +15 -0
  33. package/msal.service.d.ts +33 -0
  34. package/package.json +26 -56
  35. package/packageMetadata.d.ts +2 -0
  36. package/{src/public-api.ts → public-api.d.ts} +17 -35
  37. package/.beachballrc +0 -3
  38. package/.editorconfig +0 -16
  39. package/.eslintrc.json +0 -3
  40. package/CHANGELOG.json +0 -2315
  41. package/CHANGELOG.md +0 -869
  42. package/FAQ.md +0 -182
  43. package/angular.json +0 -51
  44. package/docs/angular-universal.md +0 -64
  45. package/docs/configuration.md +0 -609
  46. package/docs/errors.md +0 -89
  47. package/docs/events.md +0 -262
  48. package/docs/initialization.md +0 -206
  49. package/docs/known-issues.md +0 -19
  50. package/docs/logging.md +0 -47
  51. package/docs/msal-guard.md +0 -208
  52. package/docs/msal-interceptor.md +0 -160
  53. package/docs/multi-tenant.md +0 -90
  54. package/docs/performance.md +0 -50
  55. package/docs/public-apis.md +0 -29
  56. package/docs/redirects.md +0 -257
  57. package/docs/security.md +0 -4
  58. package/docs/ssosilent.md +0 -84
  59. package/docs/v0-v1-upgrade-guide.md +0 -61
  60. package/docs/v1-v2-upgrade-guide.md +0 -70
  61. package/docs/v2-v3-upgrade-guide.md +0 -52
  62. package/docs/v3-v4-upgrade-guide.md +0 -36
  63. package/karma.conf.js +0 -44
  64. package/ng-package.json +0 -7
  65. package/src/IMsalService.ts +0 -34
  66. package/src/constants.ts +0 -20
  67. package/src/msal.broadcast.config.ts +0 -8
  68. package/src/msal.broadcast.service.spec.ts +0 -471
  69. package/src/msal.broadcast.service.ts +0 -84
  70. package/src/msal.guard.config.ts +0 -27
  71. package/src/msal.guard.spec.ts +0 -525
  72. package/src/msal.guard.ts +0 -290
  73. package/src/msal.interceptor.config.ts +0 -39
  74. package/src/msal.interceptor.spec.ts +0 -1168
  75. package/src/msal.interceptor.ts +0 -388
  76. package/src/msal.module.ts +0 -51
  77. package/src/msal.navigation.client.spec.ts +0 -96
  78. package/src/msal.navigation.client.ts +0 -59
  79. package/src/msal.redirect.component.spec.ts +0 -64
  80. package/src/msal.redirect.component.ts +0 -26
  81. package/src/msal.service.spec.ts +0 -468
  82. package/src/msal.service.ts +0 -104
  83. package/src/packageMetadata.ts +0 -3
  84. package/src/test.ts +0 -19
  85. package/tsconfig.json +0 -25
  86. package/tsconfig.lib.json +0 -27
  87. package/tsconfig.lib.prod.json +0 -10
  88. package/tsconfig.spec.json +0 -17
  89. package/typedoc.json +0 -10
@@ -1,208 +0,0 @@
1
- # MSAL Guard
2
-
3
- MSAL Angular provides `MsalGuard`, a class you can use to protect routes and require authentication before accessing the protected route. This doc provides more information about configuring and considerations when using the `MsalGuard`.
4
-
5
- `MsalGuard` is a convenience class you can use improve the user experience, but it should not be relied upon for security. Attackers can potentially get around client-side guards, and you should ensure that the server does not return any data the user should not access.
6
-
7
- You may also need a route guard that addresses specific needs. We encourage you to write your own guard if `MsalGuard` does not meet all those needs.
8
-
9
- ## Configurations
10
-
11
- ### Configuring the `MsalGuard` in the *app.module.ts* and *app-routing.module.ts*
12
-
13
- The `MsalGuard` can be added to your application as a provider in the *app.module.ts*, with its configuration. The imports takes in an instance of MSAL, as well as two Angular-specific configuration objects. The second argument is a [`MsalGuardConfiguration`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.guard.config.ts) object, which contain the values for `interactionType`, an optional `authRequest`, and an optional `loginFailedRoute`.
14
-
15
- The `MsalGuard` is then used to protect routes in the *app-routing.module.ts*. The code sample below demonstrates adding the `MsalGuard` to the `Profile` route. Protecting the `Profile` route means that even if a user does not sign in using the `Login` button, if they try to access the `Profile` route or click the `Profile` button, the `MsalGuard` will prompt the user to authenticate via popup or redirect before showing the `Profile` page.
16
-
17
- Your configuration may look like the below. See our [configuration doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/configuration.md) on other ways to configure MSAL Angular for your app, and the sections below for more details on the `MsalConfiguration` object and interfaces for routing.
18
-
19
- ```javascript
20
- // app.module.ts
21
- import { NgModule } from '@angular/core';
22
- import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
23
- import { MsalModule, MsalRedirectComponent, MsalGuard } from '@azure/msal-angular'; // Import MsalInterceptor
24
- import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
25
- import { AppComponent } from './app.component';
26
- import { AppRoutingModule } from './app-routing.module';
27
-
28
- @NgModule({
29
- declarations: [
30
- AppComponent,
31
- ],
32
- imports: [
33
- MsalModule.forRoot( new PublicClientApplication({
34
- // MSAL Configuration
35
- }), {
36
- // MSAL Guard Configuration
37
- interactionType: InteractionType.Redirect,
38
- authRequest: {
39
- scopes: ['user.read']
40
- },
41
- loginFailedRoute: '/login-failed'
42
- }, {
43
- // MSAL Interceptor Configurations
44
- }),
45
- AppRoutingModule
46
- ],
47
- providers: [
48
- // ...
49
- MsalGuard
50
- ],
51
- bootstrap: [AppComponent, MsalRedirectComponent]
52
- })
53
- export class AppModule { }
54
- ```
55
-
56
- ```javascript
57
- // app-routing.module.ts
58
- import { NgModule } from '@angular/core';
59
- import { Routes, RouterModule } from '@angular/router';
60
- import { HomeComponent } from './home/home.component';
61
- import { ProfileComponent } from './profile/profile.component';
62
- import { MsalGuard } from '@azure/msal-angular';
63
-
64
- const routes: Routes = [
65
- {
66
- path: 'profile',
67
- component: ProfileComponent,
68
- canActivate: [MsalGuard]
69
- },
70
- {
71
- path: '',
72
- component: HomeComponent
73
- },
74
- ];
75
-
76
- @NgModule({
77
- imports: [RouterModule.forRoot(routes)],
78
- exports: [RouterModule]
79
- })
80
- export class AppRoutingModule { }
81
- ```
82
-
83
- ### Interaction Type
84
-
85
- Setting the interaction type determines how the `MsalGuard` will interactively prompt for login. The `InteractionType` can be imported from `@azure/msal-browser` and set to `Popup` or `Redirect`.
86
-
87
- ### Optional authRequest
88
-
89
- The optional `authRequest` is an advanced featured that is not required. However, we recommend setting `authRequest` on the `MsalGuardConfiguration` with `scopes` so that consent may be obtained for the scopes upfront. If consent for `scopes` are not consented to upfront, scopes can be obtained incrementally. This may result in a consent dialogue being presented to your app user multiple times.
90
-
91
- Consenting to scopes upfront is demonstrated in the code samples above, and in our [samples](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples).
92
-
93
- All possible parameters for the request object can be found here: [`PopupRequest`](https://azuread.github.io/microsoft-authentication-library-for-js/ref/msal-browser/modules/_src_request_popuprequest_.html) and [`RedirectRequest`](https://azuread.github.io/microsoft-authentication-library-for-js/ref/msal-browser/modules/_src_request_redirectrequest_.html).
94
-
95
- ### Login Failed Route
96
-
97
- The `loginFailedRoute` string can be set on `MsalGuardConfiguration`. The `MsalGuard` will redirect to this route if login is required and fails.
98
-
99
- See the Angular sample for examples of implementing it in the [configuration](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/app.module.ts#L66) and [app routing module](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-angular-samples/angular-modules-sample/src/app/app-routing.module.ts#L20).
100
-
101
- Note that redirecting on failure is not available for Angular 9 applications that use the `CanLoad` interface due to base type differences.
102
-
103
- ### Interfaces
104
-
105
- In addition to `canActivate`, `MsalGuard` also implements `canActivateChild` and `canLoad`, and these can be added to your route definitions in *app-routing.module.ts*. You can see these used in our [older MSAL Angular v2 Angular 11 sample application](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/msal-lts/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app-routing.module.ts), as well as below. For more information on interfaces, see the [Angular docs](https://angular.io/api/router).
106
-
107
- ```js
108
- const routes: Routes = [
109
- {
110
- path: 'profile',
111
- canActivateChild: [MsalGuard],
112
- children: [
113
- {
114
- path: '',
115
- component: ProfileComponent
116
- },
117
- {
118
- path: 'detail',
119
- component: DetailComponent
120
- }
121
- ]
122
- },
123
- {
124
- path: 'lazyLoad',
125
- loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule),
126
- canLoad: [MsalGuard]
127
- },
128
- ];
129
- ```
130
-
131
- ## Considerations when using the MSAL Guard
132
-
133
- ### Using the MSAL Guard on the home page
134
-
135
- Setting the `MsalGuard` on the initial page is our recommendation if you want users to be prompted to log in when they reach your application. We do not recommend calling `login` in the `ngOnInit` in `app.component.ts`, as this can cause looping with redirects.
136
-
137
- Our additional recommendations depend on your routing strategy, and can be found in the sections below.
138
-
139
- ### Using the MSAL Guard with path routing
140
-
141
- When using the `PathLocationStrategy` and redirects with your Angular app, we recommend using a dedicated route for redirects, which will help prevent looping. This route should also be your `redirectUri`, and should not be protected by the `MsalGuard`.
142
-
143
- ```javascript
144
- const routes: Routes = [
145
- {
146
- path: 'profile',
147
- component: ProfileComponent,
148
- canActivate: [MsalGuard]
149
- },
150
- {
151
- // Dedicated route for redirects
152
- path: 'auth',
153
- component: MsalRedirectComponent
154
- },
155
- {
156
- path: '',
157
- component: HomeComponent
158
- }
159
- ];
160
- ```
161
-
162
- To log users in upon reaching your app, when using the `PathLocationStrategy`, we recommend:
163
- - Setting the `MsalGuard` on your initial page
164
- - Set your `redirectUri` to `'http://localhost:4200/auth'`
165
- - Adding an `'auth'` path to your routes, setting the `MsalRedirectComponent` as the component (this route should not be protected by the `MsalGuard`)
166
- - Making sure the `MsalRedirectComponent` is bootstrapped
167
- - Optionally: adding `MsalGuard` to all your routes if you want all your routes protected
168
-
169
- Our [Angular 15 sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/samples/msal-angular-samples/angular-modules-sample) uses the `PathLocationStrategy` and demonstrates how to protect routes with the `MsalGuard`.
170
-
171
- ### Using the MSAL Guard with hash routing
172
-
173
- When using the `HashLocationStrategy` with your Angular app, we strongly recommend setting placeholder routes (such as `/code`) in your *app-routing.module.ts* to prevent triggering the Angular router when AAD returns the auth code response in the hash, as you may experience issues completing authentication without doing so. These placeholder routes should not be protected by the `MsalGuard`, and should not point to a component that triggers interaction or makes protected API calls on page load.
174
-
175
- ```javascript
176
- const routes: Routes = [
177
- {
178
- path: 'profile',
179
- component: ProfileComponent,
180
- canActivate: [MsalGuard]
181
- },
182
- {
183
- // Needed for hash routing
184
- path: 'code',
185
- component: HomeComponent
186
- },
187
- {
188
- path: '',
189
- component: HomeComponent
190
- }
191
- ];
192
- ```
193
-
194
- The `redirectUri` in the MSAL Configuration should also be set to the home page.
195
-
196
- To log users in upon reaching your app, when using the `HashLocationStrategy`, we recommend:
197
- - Setting the `MsalGuard` on your initial page
198
- - Not setting the `MsalGuard` on placeholder routes (e.g. `/code`, `/error`)
199
- - Making sure the `MsalRedirectComponent` is bootstrapped
200
- - Optionally: adding `MsalGuard` to all the rest of your routes if you want all your routes protected
201
-
202
- See our [older MSAL Angular v2 Angular 11 sample](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/msal-lts/samples/msal-angular-v2-samples/angular11-sample-app/src/app/app-routing.module.ts), which uses the `HashLocationStrategy` and demonstrates how to protect routes with `MsalGuard`.
203
-
204
- ## Changes from msal-angular v1 to v2
205
-
206
- * **Configuration**: `MsalAngularConfiguration` has been deprecated and no longer works. Configuring the `MsalGuard` is now done through the `MsalGuardConfiguration`.
207
- * **Interfaces**: `MsalGuard` now implements `CanActivateChild` and `CanLoad` in addition to `CanActivate`. See the section above on `Interfaces` for more details.
208
- * **Redirect on failure**: `MsalGuard` configuration now has a `loginFailedRoute` that can be configured. See the section above on the `loginFailedRoute` for details.
@@ -1,160 +0,0 @@
1
- # MSAL Interceptor
2
-
3
- MSAL Angular provides an `Interceptor` class that automatically acquires tokens for outgoing requests that use the Angular `http` client to known protected resources. This doc provides more information about the configuring and using the `MsalInterceptor`.
4
-
5
- While we recommend using the `MsalInterceptor` instead of the `acquireTokenSilent` API directly, please note that using the `MsalInterceptor` is optional. You may wish to explicitly acquire tokens using the acquireToken APIs instead.
6
-
7
- Please note that the `MsalInterceptor` is provided for your convenience and may not fit all use cases. We encourage you to write your own interceptor if you have specific needs that are not addressed by the `MsalInterceptor`.
8
-
9
- ## Configuration
10
-
11
- ### Configuring the `MsalInterceptor` in the *app.module.ts*
12
-
13
- The `MsalInterceptor` can be added to your application as a provider in the *app.module.ts*, with its configuration. The imports takes in an instance of MSAL, as well as two Angular-specific configuration objects. The third argument is a [`MsalInterceptorConfiguration`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.interceptor.config.ts) object, which contain the values for `interactionType`, a `protectedResourceMap`, and an optional `authRequest`.
14
-
15
- Your configuration may look like the below. See our [configuration doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/configuration.md) on other ways to configure MSAL Angular for your app.
16
-
17
- ```javascript
18
- import { NgModule } from '@angular/core';
19
- import { HTTP_INTERCEPTORS, HttpClientModule } from "@angular/common/http";
20
- import { AppComponent } from './app.component';
21
- import { MsalModule, MsalRedirectComponent, MsalGuard, MsalInterceptor } from '@azure/msal-angular'; // Import MsalInterceptor
22
- import { InteractionType, PublicClientApplication } from '@azure/msal-browser';
23
-
24
- @NgModule({
25
- declarations: [
26
- AppComponent,
27
- ],
28
- imports: [
29
- MsalModule.forRoot( new PublicClientApplication({
30
- // MSAL Configuration
31
- }), {
32
- // MSAL Guard Configuration
33
- }, {
34
- // MSAL Interceptor Configurations
35
- interactionType: InteractionType.Redirect,
36
- protectedResourceMap: new Map([
37
- ['Enter_the_Graph_Endpoint_Here/v1.0/me', ['user.read']]
38
- ])
39
- })
40
- ],
41
- providers: [
42
- {
43
- provide: HTTP_INTERCEPTORS, // Provides as HTTP Interceptor
44
- useClass: MsalInterceptor,
45
- multi: true
46
- },
47
- MsalGuard
48
- ],
49
- bootstrap: [AppComponent, MsalRedirectComponent]
50
- })
51
- export class AppModule { }
52
- ```
53
-
54
- ### Interaction Type
55
-
56
- While the `MsalInterceptor` is designed to acquire tokens silently, in the event that a silent request fails, it will fall back to acquiring tokens interactively. The `InteractionType` can be imported from `@azure/msal-browser` and set to `Popup` or `Redirect`.
57
-
58
- ```javascript
59
- {
60
- interactionType: InteractionType.Redirect,
61
- protectedResourceMap: new Map([
62
- ['Enter_the_Graph_Endpoint_Here/v1.0/me', ['user.read']]
63
- ])
64
- }
65
- ```
66
-
67
- ### Protected Resource Map
68
-
69
- The protected resources and corresponding scopes are provided as a `protectedResourceMap` in the `MsalInterceptor` configuration.
70
-
71
- The URLs you provide in the `protectedResourceMap` collection are case-sensitive. For each resource, add scopes being requested to be returned in the access token.
72
-
73
- For example:
74
-
75
- * `["user.read"]` for Microsoft Graph
76
- * `["<Application ID URL>/scope"]` for custom web APIs (that is, `api://<Application ID>/access_as_user`)
77
-
78
-
79
- Scopes can be specified for a resource in the following ways:
80
-
81
- 1. An array of scopes, which will be added to every HTTP request to that resource, regardless of HTTP method.
82
-
83
- ```javascript
84
- {
85
- interactionType: InteractionType.Redirect,
86
- protectedResourceMap: new Map<string, Array<string> | null>([
87
- ["https://graph.microsoft.com/v1.0/me", ["user.read", "profile"]],
88
- ["https://myapplication.com/user/*", ["customscope.read"]]
89
- ]),
90
- }
91
- ```
92
-
93
- 1. An array of `ProtectedResourceScopes`, which will attach scopes only for specific HTTP methods.
94
-
95
- ```javascript
96
- {
97
- interactionType: InteractionType.Redirect,
98
- protectedResourceMap: new Map<string, Array<string|ProtectedResourceScopes> | null>([
99
- ["https://graph.microsoft.com/v1.0/me", ["user.read"]],
100
- ["http://myapplication.com", [
101
- {
102
- httpMethod: "POST",
103
- scopes: ["write.scope"]
104
- }
105
- ]]
106
- ])
107
- }
108
- ```
109
-
110
- Note that scopes for a resource can contain a combination of strings and `ProtectedResourceScopes`. In the below example, a `GET` request will have the scopes `"all.scope"` and `"read.scope"`, whereas as `PUT` request would just have `"all.scope"`.
111
-
112
- ```javascript
113
- {
114
- interactionType: InteractionType.Redirect,
115
- protectedResourceMap: new Map<string, Array<string|ProtectedResourceScopes> | null>([
116
- ["http://myapplication.com", [
117
- "all.scope",
118
- {
119
- httpMethod: "GET",
120
- scopes: ["read.scope"]
121
- },
122
- {
123
- httpMethod: "POST",
124
- scopes: ["info.scope"]
125
- }
126
- ]]
127
- ])
128
- }
129
- ```
130
-
131
- 1. A scope value of `null`, indicating that a resource is to be unprotected and will not get tokens. Resources not included in the `protectedResourceMap` are not protected by default. Specifying a particular resource to be unprotected can be useful when some routes on a resource are to be protected, and some are not. Note that the order in `protectedResourceMap` matters, so null resource should be put before any similar base urls or wildcards.
132
-
133
- ```javascript
134
- {
135
- interactionType: InteractionType.Redirect,
136
- protectedResourceMap: new Map<string, Array<string> | null>([
137
- ["https://graph.microsoft.com/v1.0/me", ["user.read", "profile"]],
138
- ["https://myapplication.com/unprotected", null],
139
- ["https://myapplication.com/unprotected/post", [{ httpMethod: 'POST', scopes: null }]],
140
- ["https://myapplication.com", ["custom.scope"]]
141
- ]),
142
- }
143
- ```
144
-
145
- Other things to note regarding the `protectedResourceMap`:
146
-
147
- * **Wildcards**: `protectedResourceMap` supports using `*` for wildcards. When using wildcards, if multiple matching entries are found in the `protectedResourceMap`, the first match found will be used (based on the order of the `protectedResourceMap`).
148
- * **Relative paths**: If there are relative resource paths in your application, you may need to provide the relative path in the `protectedResourceMap`. This also applies to issues that may arise with ngx-translate. Be aware that the relative path in your `protectedResourceMap` may or may not need a leading slash depending on your app, and may need to try both.
149
-
150
- ### Optional authRequest
151
-
152
- For more information on the optional `authRequest` that can be set in the `MsalInterceptorConfiguration`, please see our [multi-tenant doc here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/multi-tenant.md#dynamic-auth-request).
153
-
154
- ## Changes from msal-angular v1 to v2
155
-
156
- * Note that the `unprotectedResourceMap` in MSAL Angular v1's `MsalAngularConfiguration` has been deprecated and no longer works.
157
- * `protectedResourceMap` has been moved to the `MsalInterceptorConfiguration` object, and can be passed as `Map<string, Array<string|ProtectedResourceScopes>>`. `MsalAngularConfiguration` has been deprecated and no longer works.
158
- * Putting the root domain in the `protectedResourceMap` to protect all routes is no longer supported. Please use wildcard matching instead.
159
-
160
- For more information on how to configure scopes, please see our [FAQs](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/FAQ.md).
@@ -1,90 +0,0 @@
1
- # Multi-Tenant
2
-
3
- By default, there is multi-tenant support for your application since MSAL sets the tenant in the authority to 'common' if it is not specified in the config. This allows any Microsoft account to authenticate to your application. If you are not interested in multi-tenant behavior, you will need to set the `authority` config property when instantiating MSAL in the `app.module.ts` as shown below.
4
-
5
- ```js
6
- @NgModule({
7
- imports: [
8
- MsalModule.forRoot({ // MSAL Configuration
9
- auth: {
10
- clientId: 'CLIENT_ID_HERE',
11
- authority: 'https://login.microsoftonline.com/TENANT_ID_HERE',
12
- redirectUri: 'http://localhost:4200',
13
- postLogoutRedirectUri: 'http://localhost:4200'
14
- },
15
- // Additional configuration here
16
- });
17
- ]
18
- })
19
- export class AppModule {}
20
- ```
21
-
22
- If you allow multi-tenant authentication, and you do not wish to allow all Microsoft account users to use your application, you must provide your own method of filtering the token issuers to only those tenants who are allowed to login.
23
-
24
- ## Changing the tenant
25
- The tenant can also be set dynamically by instantiating a new instance of MSAL in the relevant component, as shown below.
26
-
27
- ```js
28
- import { PublicClientApplication } from '@azure/msal-browser';
29
- import { MsalService } from '@azure/msal-angular';
30
-
31
- @Component({})
32
- export class AppComponent implements OnInit {
33
- constructor(
34
- private authService: MsalService
35
- ) {}
36
-
37
- ngOnInit(): void {
38
- this.authService.instance = new PublicClientApplication({
39
- auth: {
40
- clientId: 'CLIENT_ID_HERE',
41
- authority: 'https://login.microsoftonline.com/TENANT_ID_HERE',
42
- redirectUri: 'http://localhost:4200',
43
- postLogoutRedirectUri: 'http://localhost:4200'
44
- }
45
- });
46
- }
47
- ```
48
-
49
- ## Dynamic auth request
50
-
51
- By default the MsalGuard and the MsalInterceptor use the static properties set in the config. Both can also be configured with a method for the `authRequest`, allowing the parameters used for authentication to be changed dynamically.
52
-
53
- ### MsalInterceptor - dynamic auth request (multi tenant tokens)
54
-
55
- If `organizations` or `common` is used as the tenant, all tokens will be requested for the users' home tenant. However, this may not be the desired outcome. If a user is invited as a guest, the tokens may be from the wrong authority.
56
-
57
- Setting the `authRequest` in the **MsalInterceptorConfig** to a method allows you to dynamically change the auth request. For instance, you may set the authority based on the home tenant of the account when using guest users.
58
- Properties on `authRequest` may be changed, but should always extend the `originalAuthRequest` like below:
59
-
60
- ```js
61
- export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
62
- const protectedResourceMap = new Map<string, Array<string>>();
63
- protectedResourceMap.set("https://graph.microsoft.com/v1.0/me", ["user.read"]);
64
-
65
- return {
66
- interactionType: InteractionType.Popup,
67
- protectedResourceMap,
68
- authRequest: (msalService, httpReq, originalAuthRequest) => {
69
- return {
70
- ...originalAuthRequest,
71
- authority: `https://login.microsoftonline.com/${originalAuthRequest.account?.tenantId ?? 'organizations'}`
72
- };
73
- }
74
- };
75
- }
76
- ...
77
-
78
- @NgModule({
79
- declarations: [...],
80
- imports: [...],
81
- providers: [
82
- ...
83
- {
84
- provide: MSAL_INTERCEPTOR_CONFIG,
85
- useFactory: MSALInterceptorConfigFactory
86
- }
87
- ]
88
- });
89
-
90
- ```
@@ -1,50 +0,0 @@
1
- # Performance
2
-
3
- ## How to configure `@azure/msal-angular` to use your router's navigate function for client-side navigation
4
-
5
- By default, when MSAL.js needs to navigate from one page in your application to another it will reassign `window.location`, causing a full frame redirect to the other page and causing your application to re-render. If you're using the Angular Router this may be undesireable since the Router enables "client-side" navigation and shows or hides only the parts of the page as necessary.
6
-
7
- Currently there is one scenario where MSAL.js will navigate from one page in your application to another. If your application is doing **all** of the following things, continue reading:
8
-
9
- - Your application is using the redirect flow, instead of the popup flow, to login
10
- - `PublicClientApplication` is configured with `auth.navigateToLoginRequestUrl: true` (default)
11
- - Your application has pages that may call `loginRedirect`/`acquireTokenRedirect` with a shared `redirectUri` i.e. You call `loginRedirect` from `http://localhost/protected` with a redirectUri of `http://localhost`
12
-
13
- If your application is doing all of the things above you can override the method MSAL uses to navigate by importing the `MsalCustomNavigationClient` and calling `setNavigationClient`.
14
-
15
- **NOTE**: Due to a security fix, the `MsalCustomNavigationClient` will not be using the Angular `Router` to navigate client-side when `navigateToLoginRequestUrl` is set to true and handling redirects. This is a known issue that will be addressed in a future release.
16
-
17
- ### Example Implementation
18
-
19
- The example below will show how to implement this when using the Angular `Router`. More information on the Angular Router can be found [here](https://angular.io/guide/router), and you can find a full sample app that implements this for [Angular here](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/msal-lts/samples/msal-angular-v2-samples/angular10-sample-app).
20
-
21
- ```javascript
22
- import { Component, OnInit, Inject } from '@angular/core';
23
- import { Router } from '@angular/router';
24
- import { Location } from '@angular/common';
25
- import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration, MsalCustomNavigationClient } from '@azure/msal-angular';
26
-
27
- @Component({
28
- selector: 'app-root',
29
- templateUrl: './app.component.html',
30
- styleUrls: ['./app.component.css']
31
- })
32
- export class AppComponent implements OnInit, OnDestroy {
33
-
34
- constructor(
35
- @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
36
- private authService: MsalService,
37
- private msalBroadcastService: MsalBroadcastService,
38
- private router: Router,
39
- private location: Location
40
- ) {
41
- const customNavigationClient = new MsalCustomNavigationClient(this.authService, this.router, this.location);
42
- this.authService.instance.setNavigationClient(customNavigationClient);
43
- }
44
-
45
- ngOnInit(): void {
46
- // Additional code
47
- }
48
- }
49
-
50
- ```
@@ -1,29 +0,0 @@
1
- # Public APIs for MSAL Angular
2
-
3
- Before you start here, make sure you understand how to [initialize the application object](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/initialization.md).
4
-
5
- The login APIs in MSAL retrieve an `authorization code` which can be exchanged for an [ID token](https://docs.microsoft.com/azure/active-directory/develop/id-tokens) for a signed in user, while consenting scopes for an additional resource, and an [access token](https://docs.microsoft.com/azure/active-directory/develop/access-tokens) containing the user consented scopes to allow your app to securely call the API.
6
-
7
- You can read more about ID tokens on our [Azure Docs pages](https://docs.microsoft.com/azure/active-directory/develop/id-tokens).
8
-
9
- ## Public APIs
10
-
11
- `@azure/msal-angular` exposes the following, along with their configurations. See the [library references](https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_angular.html) for properties and methods.
12
-
13
- 1. [`MsalService`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.service.ts/)
14
- 1. [`MsalGuard`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.guard.ts/)
15
- * [`MsalGuardConfiguration`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.guard.config.ts/)
16
- 1. [`MsalInterceptor`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.interceptor.ts/)
17
- * [`MsalInterceptorConfiguration`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.interceptor.config.ts/)
18
- 1. [`MsalBroadcastService`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.broadcast.service.ts/)
19
- 1. [`MsalModule`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.module.ts/)
20
-
21
-
22
- The login and acquire token functions using Angular observables are found on the [IMsalService](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/IMsalService.ts/).
23
-
24
- `@azure/msal-angular` also exposes the following:
25
-
26
- 1. [`MsalRedirectComponent`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.redirect.component.ts): Used for handling redirects. See the [redirect doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/redirects.md) for more details.
27
- 1. [`MsalCustomNavigationClient`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/src/msal.navigation.client.ts): Used for client-side navigation. See the [performance doc](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/performance.md) for more details.
28
-
29
- Additional functions from `@azure/msal-browser` are found on [`IPublicClientApplication`](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/src/app/IPublicClientApplication.ts), with corresponding documentation [here](https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md).