Skip to content

Commit d7247a0

Browse files
SLdragongavinbarron
SLdragon
and
gavinbarron
authored
feat: update TeamsFxProvider.ts for v3.0.0 (#1983)
* Update TeamsFxProvider.ts for Graph Toolkit 3.0 * Fix typo in comment * style: format code --------- Co-authored-by: turenlong <[email protected]> Co-authored-by: Gavin Barron <[email protected]>
1 parent bbd5da4 commit d7247a0

File tree

3 files changed

+60
-94
lines changed

3 files changed

+60
-94
lines changed

‎packages/providers/mgt-teamsfx-provider/README.md‎

Lines changed: 14 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@ To learn more about authentication providers, see [Providers](./providers.md).
1818

1919
1. Initialize the provider and login to get the required access token
2020

21-
### Use TeamsUserCredential (Recommended)
21+
- Initialize the provider use `TeamsUserCredential` inside your component.
2222

23-
1. Initialize the provider inside your component.
2423
```ts
2524
// Import the providers and credential at the top of the page
2625
import {Providers} from '@microsoft/mgt-element';
@@ -37,55 +36,31 @@ To learn more about authentication providers, see [Providers](./providers.md).
3736
const provider = new TeamsFxProvider(credential, scope);
3837
Providers.globalProvider = provider;
3938
```
40-
1. Use the `credential.login(scopes)` method to get the required access token.
4139

42-
```ts
43-
// Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups.
44-
await credential.login(this.scope);
45-
Providers.globalProvider.setState(ProviderState.SignedIn);
46-
```
47-
48-
### Use TeamsFx class
49-
> Note: TeamsFx class will be deprecated and removed from future release of TeamsFx SDK, and it is recommended to use `TeamsUserCredential` instead
50-
51-
1. Initialize the provider inside your component.
52-
53-
```ts
54-
// Import the providers and credential at the top of the page
55-
import {Providers} from '@microsoft/mgt-element';
56-
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
57-
import {TeamsUserCredential} from "@microsoft/teamsfx";
58-
59-
const scope = ["User.Read"];
60-
const teamsfx = new TeamsFx();
61-
const provider = new TeamsFxProvider(teamsfx, scope);
62-
Providers.globalProvider = provider;
63-
```
64-
65-
1. Use the `teamsfx.login(scopes)` method to get the required access token.
40+
- Use the `credential.login(scopes)` method to get the required access token.
6641

6742
```ts
6843
// Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups.
69-
await teamsfx.login(this.scope);
44+
await credential.login(this.scope);
7045
Providers.globalProvider.setState(ProviderState.SignedIn);
7146
```
7247

7348
1. Now you can add any component in your HTML page or in your `render()` method when using React and it will use the TeamsFx context to access Microsoft Graph.
7449
7550
```html
76-
<!-- Using HTML -->
77-
<mgt-person query="me" view="threeLines"></mgt-person>
51+
<!-- Using HTML -->
52+
<mgt-person query="me" view="threeLines"></mgt-person>
7853
```
7954

8055
```ts
81-
// Using React
82-
public render(): void {
83-
return (
84-
<div>
85-
<Person personQuery="me" view={PersonViewType.threelines}></Person>
86-
</div>
87-
);
88-
}
56+
// Using React
57+
public render(): void {
58+
return (
59+
<div>
60+
<Person personQuery="me" view={PersonViewType.threelines}></Person>
61+
</div>
62+
);
63+
}
8964
```
9065

9166
For a sample that shows you how to initialize the TeamsFx provider, see the [Contacts Exporter sample](https://github.com/OfficeDev/TeamsFx-Samples/tree/dev/hello-world-tab-with-backend).
@@ -95,4 +70,4 @@ For a sample that shows you how to initialize the TeamsFx provider, see the [Con
9570
* [Microsoft Graph Toolkit repository](https://aka.ms/mgt)
9671
* [Microsoft Graph Toolkit playground](https://mgt.dev)
9772
* [TeamsFx docs](https://aka.ms/teamsfx-docs)
98-
* [TeamsFx SDK document](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk)
73+
* [TeamsFx SDK document](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk)

‎packages/providers/mgt-teamsfx-provider/package.json‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,8 @@
3939
"lint": "tslint -c ../../../tslint.json 'src/**/*.ts'",
4040
"postpack": "cpx *.tgz ../../../artifacts"
4141
},
42-
"peerDependencies": {
43-
"@microsoft/teamsfx": "0.6.0 - 2.x.x"
44-
},
45-
"devDependencies": {
46-
"@microsoft/teamsfx": "0.6.0 - 2.x.x"
47-
},
4842
"dependencies": {
43+
"@azure/core-auth": "^1.3.0",
4944
"@microsoft/mgt-element": "*"
5045
},
5146
"publishConfig": {

‎packages/providers/mgt-teamsfx-provider/src/TeamsFxProvider.ts‎

Lines changed: 45 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,14 @@ import {
1212
GraphEndpoint,
1313
MICROSOFT_GRAPH_DEFAULT_ENDPOINT
1414
} from '@microsoft/mgt-element';
15-
import { TeamsFx, TeamsUserCredential } from '@microsoft/teamsfx';
15+
import { TokenCredential } from '@azure/core-auth';
16+
17+
/**
18+
* Interface represents TeamsUserCredential in TeamsFx library
19+
*/
20+
export interface TeamsFxUserCredential extends TokenCredential {
21+
login(scopes: string | string[], resources?: string[]): Promise<void>;
22+
}
1623

1724
/**
1825
* TeamsFx Provider handler
@@ -32,16 +39,6 @@ export class TeamsFxProvider extends IProvider {
3239
return 'MgtTeamsFxProvider';
3340
}
3441

35-
/**
36-
* returns teamsfx instance, if you construct TeamsFxProvider with TeamsUserCredential, this value should be null
37-
*
38-
* @readonly
39-
* @memberof TeamsFxProvider
40-
*/
41-
public get teamsfx(): TeamsFx {
42-
return this._teamsfx;
43-
}
44-
4542
/**
4643
* Privilege level for authentication
4744
*
@@ -53,20 +50,12 @@ export class TeamsFxProvider extends IProvider {
5350
private scopes: string | string[] = [];
5451

5552
/**
56-
* TeamsUserCredential instance
57-
*
58-
* @type {TeamsFx}
59-
* @memberof TeamsFxProvider
60-
*/
61-
private readonly _credential: TeamsUserCredential;
62-
63-
/**
64-
* TeamsFx instance
53+
* TeamsFxUserCredential instance
6554
*
6655
* @type {TeamsFx}
6756
* @memberof TeamsFxProvider
6857
*/
69-
private readonly _teamsfx: TeamsFx;
58+
private readonly _credential: TeamsFxUserCredential;
7059

7160
/**
7261
* Access token provided by TeamsFx
@@ -76,19 +65,40 @@ export class TeamsFxProvider extends IProvider {
7665
*/
7766
private _accessToken: string = '';
7867

79-
constructor(teamsfx: TeamsFx, scopes: string | string[], baseURL?: GraphEndpoint);
80-
constructor(teamsUserCredential: TeamsUserCredential, scopes: string | string[], baseURL?: GraphEndpoint);
81-
constructor(authConfig: TeamsFx | TeamsUserCredential, scopes: string | string[], baseURL?: GraphEndpoint) {
68+
/**
69+
* Constructor of TeamsFxProvider.
70+
*
71+
* @example
72+
* ```typescript
73+
* import {Providers} from '@microsoft/mgt-element';
74+
* import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
75+
* import {TeamsUserCredential, TeamsUserCredentialAuthConfig} from "@microsoft/teamsfx";
76+
*
77+
* const authConfig: TeamsUserCredentialAuthConfig = {
78+
* clientId: process.env.REACT_APP_CLIENT_ID,
79+
* initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
80+
* };
81+
* const scope = ["User.Read"];
82+
*
83+
* const credential = new TeamsUserCredential(authConfig);
84+
* const provider = new TeamsFxProvider(credential, scope);
85+
* Providers.globalProvider = provider;
86+
* ```
87+
*
88+
* @param {TeamsFxUserCredential} credential - TeamsUserCredential instance in TeamsFx library.
89+
* @param {string | string[]} scopes - The list of scopes for which the token will have access.
90+
* @param {GraphEndpoint} baseURL - Graph endpoint.
91+
*
92+
*/
93+
constructor(
94+
credential: TeamsFxUserCredential,
95+
scopes: string | string[],
96+
baseURL: GraphEndpoint = MICROSOFT_GRAPH_DEFAULT_ENDPOINT
97+
) {
8298
super();
8399

84-
if (!this._teamsfx && !this._credential) {
85-
if ((authConfig as TeamsFx).getCredential) {
86-
this._teamsfx = authConfig as TeamsFx;
87-
this._credential = null;
88-
} else {
89-
this._credential = authConfig as TeamsUserCredential;
90-
this._teamsfx = null;
91-
}
100+
if (!this._credential) {
101+
this._credential = credential;
92102
}
93103

94104
this.validateScopesType(scopes);
@@ -101,12 +111,7 @@ export class TeamsFxProvider extends IProvider {
101111
this.scopes = scopesArr;
102112
}
103113

104-
if (baseURL) {
105-
this.baseURL = baseURL;
106-
} else {
107-
this.baseURL = MICROSOFT_GRAPH_DEFAULT_ENDPOINT;
108-
}
109-
114+
this.baseURL = baseURL;
110115
this.graph = createFromProvider(this);
111116
}
112117

@@ -118,12 +123,7 @@ export class TeamsFxProvider extends IProvider {
118123
*/
119124
public async getAccessToken(): Promise<string> {
120125
try {
121-
let accessToken;
122-
if (this._teamsfx) {
123-
accessToken = await this._teamsfx.getCredential().getToken(this.scopes);
124-
} else {
125-
accessToken = await this._credential.getToken(this.scopes);
126-
}
126+
const accessToken = await this._credential.getToken(this.scopes);
127127
this._accessToken = accessToken ? accessToken.token : '';
128128
if (!this._accessToken) {
129129
throw new Error('Access token is null');
@@ -146,11 +146,7 @@ export class TeamsFxProvider extends IProvider {
146146
const token: string = await this.getAccessToken();
147147

148148
if (!token) {
149-
if (this._teamsfx) {
150-
await this._teamsfx.login(this.scopes);
151-
} else {
152-
await this._credential.login(this.scopes);
153-
}
149+
await this._credential.login(this.scopes);
154150
}
155151

156152
this._accessToken = token ?? (await this.getAccessToken());

0 commit comments

Comments
 (0)