Skip to content

Commit 52efa2e

Browse files
musalegavinbarron
musale
authored and
gavinbarron
committed
feat: mark Teams, TeamsMsal2 and Msal providers as deprecated in v2.x.x (#2232)
* Mark MgtMsalProvider as deprecated. * Update MSAL2 in packages * Add MSAL 2 in samples * Update in root files * Storybook sign in to use MSAL 2 * Mark TeamsProvider as deprecated * Update usage of Teams to TeamsFx * Mark TeamsMsal2Provider as deprecated * Update TeamsMsal2 to TeamsFx
1 parent 7a65757 commit 52efa2e

File tree

21 files changed

+50
-75
lines changed

21 files changed

+50
-75
lines changed

‎.storybook/addons/signInAddon/signInAddon.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import addons, { makeDecorator } from '@storybook/addons';
22
import { Providers } from '../../../packages/mgt-element/dist/es6/providers/Providers';
33
import { ProviderState } from '../../../packages/mgt-element/dist/es6/providers/IProvider';
4-
import { MsalProvider } from '../../../packages/providers/mgt-msal-provider/dist/es6/MsalProvider';
4+
import { Msal2Provider } from '../../../packages/providers/mgt-msal2-provider/dist/es6/Msal2Provider';
55
import { MockProvider } from '../../../packages/mgt-element/dist/es6/mock/MockProvider';
66
import { CLIENTID, SETPROVIDER_EVENT, GETPROVIDER_EVENT } from '../../env';
77

@@ -22,7 +22,7 @@ export const withSignIn = makeDecorator({
2222
if (_allow_signin) {
2323
const currentProvider = Providers.globalProvider;
2424
if (params.state === ProviderState.SignedIn && (!currentProvider || currentProvider === mockProvider)) {
25-
Providers.globalProvider = new MsalProvider({
25+
Providers.globalProvider = new Msal2Provider({
2626
clientId: CLIENTID
2727
});
2828
} else if (params.state !== ProviderState.SignedIn && currentProvider !== mockProvider) {

‎artifacts/install.ps1‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@ function Get-Packages {
2020
Write-Output $output
2121
}
2222

23-
$packages = Get-Packages mgt-element mgt-msal-provider mgt-proxy-provider mgt-sharepoint-provider mgt-teams-provider mgt-components mgt mgt-react
23+
$packages = Get-Packages mgt-element mgt-msal2-provider mgt-proxy-provider mgt-sharepoint-provider mgt-teamsfx-provider mgt-components mgt mgt-react
2424

2525
npm i $packages

‎auth.html‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,9 @@
11
<html>
22
<head>
33
<script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
4-
<!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script>
5-
<script>
6-
mgt.TeamsProvider.handleAuth();
7-
</script> -->
84
<script type="module">
9-
// import { TeamsProvider } from './packages/providers/mgt-teams-provider/dist/es6/TeamsProvider.js';
10-
// TeamsProvider.handleAuth();
11-
12-
import { TeamsMsal2Provider } from './packages/providers/mgt-teams-msal2-provider/dist/es6/TeamsMsal2Provider.js';
13-
TeamsMsal2Provider.handleAuth();
5+
import { TeamsFxProvider } from './packages/providers/mgt-teamsfx-provider/dist/es6/TeamsFxProvider.js';
6+
// TODO: show how to use TeamsFx in auth.
147
</script>
158
</head>
169
<body>

‎index.html‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -17,33 +17,6 @@
1717
</head>
1818

1919
<body>
20-
<!-- <mgt-teams-provider
21-
client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
22-
auth-popup-url="auth.html"
23-
></mgt-teams-provider> -->
24-
25-
<!-- <mgt-teams-msal2-provider
26-
client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
27-
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
28-
auth-popup-url="auth.html"
29-
></mgt-teams-msal2-provider> -->
30-
31-
<!-- Teams Msal2 provider in SSO mode (see "teams-sso-node" sample) -->
32-
<!-- <mgt-teams-msal2-provider
33-
client-id="72482bff-ecae-44f5-8fdc-513b7f5602e7"
34-
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
35-
auth-popup-url="auth.html"
36-
sso-url="http://localhost:5000/api/token"
37-
http-method="POST"
38-
></mgt-teams-msal2-provider> -->
39-
40-
<!-- <mgt-msal-provider
41-
client-id="a974dfa0-9f57-49b9-95db-90f04ce2111a"
42-
scopes="user.read,user.read.all,mail.readBasic,people.read,people.read.all,sites.read.all,user.readbasic.all,contacts.read,presence.read,presence.read.all,tasks.readwrite,tasks.read,calendars.read,group.read.all"
43-
redirect-uri="http://localhost:3000"
44-
depends-on="mgt-teams-provider"
45-
></mgt-msal-provider> -->
46-
4720
<!-- <mgt-msal2-provider
4821
client-id="2dfea037-938a-4ed8-9b35-c05708a1b241"
4922
redirect-uri="http://localhost:3000"

‎packages/mgt-components/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,21 @@ The components can be used on their own, but they are at their best when they ar
3333
1. Install the packages
3434

3535
```bash
36-
npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal-provider
36+
npm install @microsoft/mgt-element @microsoft/mgt-components @microsoft/mgt-msal2-provider
3737
```
3838

3939
1. Use components in your code
4040

4141
```html
4242
<script type="module">
4343
import {Providers} from '@microsoft/mgt-element';
44-
import {MsalProvider} from '@microsoft/mgt-msal-provider';
44+
import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
4545
4646
// import the components
4747
import '@microsoft/mgt-components';
4848
4949
// initialize the auth provider globally
50-
Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
50+
Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
5151
</script>
5252
5353
<mgt-login></mgt-login>

‎packages/mgt-element/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,32 @@
22

33
[![npm](https://img.shields.io/npm/v/@microsoft/mgt-element?style=for-the-badge)](https://www.npmjs.com/package/@microsoft/mgt-element)
44

5-
The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
5+
The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
66

77
The `@microsoft/mgt-element` package contains all base classes that enable the providers and components to work together. Use this package to set the global provider, or to create your own providers and/or components that work with Microsoft Graph.
88

99
[See docs for full documentation](https://aka.ms/mgt-docs)
1010

1111
## Set and use the global provider
1212

13-
The `@microsoft/mgt-element` package exposes the `Providers` namespace that enables global usage of the authentication providers across your entire app.
13+
The `@microsoft/mgt-element` package exposes the `Providers` namespace that enables global usage of the authentication providers across your entire app.
1414

1515
This example illustrates how to instantiate a new provider (MsalProvider in this case) and use it across your app:
1616

17-
1. Install the packages
17+
1. Install the packages
1818

1919
```bash
20-
npm install @microsoft/mgt-element @microsoft/mgt-msal-provider
20+
npm install @microsoft/mgt-element @microsoft/mgt-msal2-provider
2121
```
2222

2323
1. Create the provider
2424

2525
```ts
2626
import {Providers} from '@microsoft/mgt-element';
27-
import {MsalProvider} from '@microsoft/mgt-msal-provider';
27+
import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
2828
2929
// initialize the auth provider globally
30-
Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
30+
Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
3131
```
3232

3333
1. Use the provider to sign in and call the graph:

‎packages/mgt/README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,12 @@ You can use the components by referencing the loader directly (via unpkg), or in
5151

5252
> NOTE: This link will load the highest available version of @microsoft/mgt in the range `>= 2.0.0 < 3.0.0`, omitting the `@2` fragment from the url results in loading the latest version. This could result in loading a new major version and breaking the application.
5353
54-
You can then start using the components in your html page. Here is a full working example with the Msal provider:
54+
You can then start using the components in your html page. Here is a full working example with the Msal2 provider:
5555

5656
```html
5757
<script src="https://unpkg.com/@microsoft/mgt@2/dist/bundle/mgt-loader.js"></script>
5858

59-
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
59+
<mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
6060

6161
<mgt-login></mgt-login>
6262
<mgt-agenda></mgt-agenda>
@@ -77,7 +77,7 @@ Now you can reference all components and providers at the page you are using:
7777
```html
7878
<script type="module" src="node_modules/@microsoft/mgt/dist/es6/index.js"></script>
7979

80-
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
80+
<mgt-msal2-provider client-id="[CLIENT-ID]"></mgt-msal2-provider>
8181

8282
<mgt-login></mgt-login>
8383
<mgt-agenda></mgt-agenda>

‎packages/providers/mgt-msal-provider/src/MsalProvider.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ export interface MsalConfig extends MsalConfigBase {
111111
/**
112112
* Msal Provider using MSAL.js to aquire tokens for authentication
113113
*
114+
* @deprecated in favor of Msal2Provider.
114115
* @export
115116
* @class MsalProvider
116117
* @extends {IProvider}

‎packages/providers/mgt-msal-provider/src/mgt-msal-provider.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { MsalConfig, MsalProvider } from './MsalProvider';
1111
/**
1212
* Authentication Library Provider for Microsoft personal accounts
1313
*
14+
* @deprecated in favor of MgtMsal2Provider.
1415
* @export
1516
* @class MgtMsalProvider
1617
* @extends {MgtBaseProvider}

‎packages/providers/mgt-teams-msal2-provider/README.md‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22

33
[![npm](https://img.shields.io/npm/v/@microsoft/mgt-teams-msal2-provider?style=for-the-badge)](https://www.npmjs.com/package/@microsoft/mgt-teams-msal2-provider)
44

5+
6+
⚠️⚠️⚠️ This package is no longer receiving new features and will only receive critical bug and security fixes. All new applications should use [`@microsoft/mgt-teamsfx-provider`](https://learn.microsoft.com/graph/toolkit/providers/teamsfx) instead. ⚠️⚠️⚠️
7+
58
The `@microsoft/mgt-teams-msal2-provider` package exposes the `TeamsMsal2Provider` class to be used inside your Microsoft Teams tab applications to authenticate users, to call Microsoft Graph, and to power the Microsoft Graph Toolkit components. The provider is built on top of [msal-browser](https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-browser) and supports both the interactive sign in flow on the client and Single Sign-On (SSO) flow via your own backend. SSO mode is enabled by setting `ssoUrl` \ `sso-url` and requires a backend service to handle the on-behalf-of flow.
69

710
[See the full documentation of the TeamsMsal2Provider](https://learn.microsoft.com/graph/toolkit/providers/teams-msal2)
811

9-
The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
12+
The [Microsoft Graph Toolkit (mgt)](https://aka.ms/mgt) library is a collection of authentication providers and UI components powered by Microsoft Graph.
1013

1114
## Usage
1215

@@ -51,15 +54,16 @@ The TeamsMsal2Provider requires the usage of the Microsoft Teams SDK which is no
5154
3. Alternatively, initialize the provider in html (only `client-id` and `auth-popup-url` is required):
5255

5356
```html
54-
<script type="module" src="../node_modules/@microsoft/mgt-teams-provider/dist/es6/index.js" />
55-
56-
<mgt-teams-msal2-provider client-id="<YOUR_CLIENT_ID>"
57-
auth-popup-url="/AUTH-PATH"
58-
scopes="user.read,people.read..."
59-
authority=""
60-
sso-url="/api/token"
61-
http-method="POST">
62-
></mgt-teams-provider>
57+
<script type="module" src="../node_modules/@microsoft/mgt-teamsfx-provider/dist/es6/index.js" />
58+
59+
<mgt-teamsfx-provider
60+
client-id="<YOUR_CLIENT_ID>"
61+
auth-popup-url="/AUTH-PATH"
62+
scopes="user.read,people.read..."
63+
authority=""
64+
sso-url="/api/token"
65+
http-method="POST">
66+
></mgt-teamsfx-provider>
6367
```
6468

6569
See [provider usage documentation](https://learn.microsoft.com/graph/toolkit/providers) to learn about how to use the providers with the mgt components, to sign in/sign out, get access tokens, call Microsoft Graph, and more.

0 commit comments

Comments
 (0)