/
Tab.js
199 lines (170 loc) · 6.91 KB
/
Tab.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.
import React from 'react';
import './App.css';
import { app, authentication } from "@microsoft/teams-js";
import { Avatar, Spinner } from '@fluentui/react-components'
/**
* The 'PersonalTab' component renders the main tab content
* of your app.
*/
class Tab extends React.Component {
constructor(props) {
super(props)
this.state = {
context: {},
ssoToken: "",
consentRequired: false,
consentProvided: false,
graphAccessToken: "",
photo: "",
error: false
}
//Bind any functions that need to be passed as callbacks or used to React components
this.ssoLoginSuccess = this.ssoLoginSuccess.bind(this);
this.ssoLoginFailure = this.ssoLoginFailure.bind(this);
this.consentSuccess = this.consentSuccess.bind(this);
this.consentFailure = this.consentFailure.bind(this);
this.unhandledFetchError = this.unhandledFetchError.bind(this);
this.callGraphFromClient = this.callGraphFromClient.bind(this);
this.showConsentDialog = this.showConsentDialog.bind(this);
}
//React lifecycle method that gets called once a component has finished mounting
//Learn more: https://reactjs.org/docs/react-component.html#componentdidmount
componentDidMount() {
// Initialize the Microsoft Teams SDK
app.initialize().then(() => {
// Get the user context from Teams and set it in the state
app.getContext().then((context) => {
this.setState({ context: context });
});
authentication.getAuthToken().then((result) => {
this.ssoLoginSuccess(result)
}).catch((error) => {
this.ssoLoginFailure(error)
});
});
}
ssoLoginSuccess = async (result) => {
this.setState({ ssoToken: result });
this.exchangeClientTokenForServerToken(result);
}
ssoLoginFailure(error) {
console.error("SSO failed: ", error);
this.setState({ error: true });
}
//Exchange the SSO access token for a Graph access token
//Learn more: https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow
exchangeClientTokenForServerToken = async (token) => {
let serverURL = `${process.env.REACT_APP_BASE_URL}/getGraphAccessToken?ssoToken=${token}&upn=${this.state.context.user.userPrincipalName}`;
let response = await fetch(serverURL).catch(this.unhandledFetchError); //This calls getGraphAccessToken route in /api-server/app.js
let data = await response.json().catch(this.unhandledFetchError);
if (!response.ok && data.error === 'consent_required') {
//A consent_required error means it's the first time a user is logging into to the app, so they must consent to sharing their Graph data with the app.
//They may also see this error if MFA is required.
this.setState({ consentRequired: true }); //This displays the consent required message.
this.showConsentDialog(); //Proceed to show the consent dialogue.
} else if (!response.ok) {
//Unknown error
console.error(data);
this.setState({ error: true });
} else {
this.setState({
photo: data //Convert binary data to an image URL and set the url in state
})
}
}
//Show a popup dialogue prompting the user to consent to the required API permissions. This opens ConsentPopup.js.
//Learn more: https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-tab-aad#initiate-authentication-flow
showConsentDialog() {
authentication.authenticate({
url: window.location.origin + "/auth-start",
width: 600,
height: 535
}).then((result) => {
this.consentSuccess(result)
}).catch((error) => {
this.consentFailure(error)
});
}
//Callback function for a successful authorization
consentSuccess(result) {
//Save the Graph access token in state
this.setState({
consentProvided: true
});
authentication.getAuthToken().then((result) => {
this.ssoLoginSuccess(result)
}).catch((error) => {
this.ssoLoginFailure(error)
});
}
consentFailure(reason) {
console.error("Consent failed: ", reason);
this.setState({ error: true });
}
//React lifecycle method that gets called after a component's state or props updates
//Learn more: https://reactjs.org/docs/react-component.html#componentdidupdate
componentDidUpdate = async (prevProps, prevState) => {
//Check to see if a Graph access token is now in state AND that it didn't exist previously
if ((prevState.graphAccessToken === "") && (this.state.graphAccessToken !== "")) {
this.callGraphFromClient();
}
}
// Fetch the user's profile photo from Graph using the access token retrieved either from the server
// or microsoftTeams.authentication.authenticate
callGraphFromClient = async () => {
let upn = this.state.context.user.userPrincipalName;
let graphPhotoEndpoint = `https://graph.microsoft.com/v1.0/users/${upn}/photo/$value`;
let graphRequestParams = {
method: 'GET',
headers: {
'Content-Type': 'image/jpg',
"authorization": "bearer " + this.state.graphAccessToken
}
}
let response = await fetch(graphPhotoEndpoint, graphRequestParams).catch(this.unhandledFetchError);
if (!response.ok) {
console.error("ERROR: ", response);
this.setState({ error: true });
}
let imageBlog = await response.blob().catch(this.unhandledFetchError); //Get image data as raw binary data
this.setState({
photo: URL.createObjectURL(imageBlog) //Convert binary data to an image URL and set the url in state
})
}
//Generic error handler ( avoids having to do async fetch in try/catch block )
unhandledFetchError(err) {
console.error("Unhandled fetch error: ", err);
this.setState({ error: true });
}
render() {
let title = Object.keys(this.state.context).length > 0 ?
'Congratulations ' + this.state.context.user.userPrincipalName + '! This is your tab' : <Spinner />;
let ssoMessage = this.state.ssoToken === "" ?
<Spinner label='Performing Azure AD single sign-on authentication...' /> : null;
let serverExchangeMessage = (this.state.ssoToken !== "") && (!this.state.consentRequired) && (this.state.photo === "") ?
<Spinner label='Exchanging SSO access token for Graph access token...' /> : null;
let consentMessage = (this.state.consentRequired && !this.state.consentProvided) ?
<Spinner label='Consent required.' /> : null;
let content;
if (this.state.error) {
content = <h1>ERROR: Please ensure pop-ups are allowed for this website and retry</h1>
} else {
content =
<div>
<h1>{title}</h1>
<h3>{ssoMessage}</h3>
<h3>{serverExchangeMessage}</h3>
<h3>{consentMessage}</h3>
<img src={this.state.photo} width="200" />
</div>
}
return (
<div>
{content}
</div>
);
}
}
export default Tab;