Skip to content
This repository was archived by the owner on May 3, 2024. It is now read-only.

Commit af658af

Browse files
derisenderisen
authored
Merge pull request #13 from diberry/diberry/0618-react-app-msal
4-Deployment\2-deploy-static
2 parents daceef2 + db48f83 commit af658af

File tree

2 files changed

+61
-45
lines changed

2 files changed

+61
-45
lines changed

‎4-Deployment/2-deploy-static/App/src/components/DataDisplay.jsx

Lines changed: 59 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,84 @@ import "../styles/App.css";
22
import { protectedResources } from "../authConfig";
33

44
export const ProfileData = (props) => {
5+
6+
// Display data, remove IDs and Phone numbers
57
const tableRows = Object.entries(props.graphData).map((entry, index) => {
8+
9+
const name = entry[0] || "";
10+
const val = (!entry[1] || entry[1].toString().length===0)
11+
? ""
12+
: (entry[0].toString().toLowerCase().includes("phone") || entry[0].toString().toLowerCase().includes("principal") || entry[0].toString().toLowerCase().includes("mail") || entry[0].toString().toLowerCase().includes("id"))
13+
? `...`
14+
: entry[1];
15+
616
return (<tr key={index}>
7-
<td><b>{entry[0]}: </b></td>
8-
<td>{entry[1]}</td>
17+
<td><b>{name}: </b></td>
18+
<td><i>{val}</i></td>
919
</tr>)
1020
});
1121

1222
return (
1323
<>
14-
<div className="data-area-div">
15-
<p>Calling <strong>Microsoft Graph API</strong>...</p>
16-
<ul>
17-
<li><strong>resource:</strong> <mark>User</mark> object</li>
18-
<li><strong>endpoint:</strong> <mark>https://graph.microsoft.com/v1.0/me</mark></li>
19-
<li><strong>scope:</strong> <mark>user.read</mark></li>
20-
</ul>
21-
<p>Contents of the <strong>response</strong> is below:</p>
22-
</div>
23-
<div className="data-area-div">
24-
<table>
25-
<thead>
26-
</thead>
27-
<tbody>
28-
{tableRows}
29-
</tbody>
30-
</table>
31-
</div>
24+
<div className="data-area-div">
25+
<p>Calling <strong>Microsoft Graph API</strong>...</p>
26+
<ul>
27+
<li><strong>resource:</strong> <mark>User</mark> object</li>
28+
<li><strong>endpoint:</strong> <mark>https://graph.microsoft.com/v1.0/me</mark></li>
29+
<li><strong>scope:</strong> <mark>user.read</mark></li>
30+
</ul>
31+
<p>Contents of the <strong>response</strong> is below:</p>
32+
</div>
33+
<div className="data-area-div">
34+
<table>
35+
<thead>
36+
</thead>
37+
<tbody>
38+
{tableRows}
39+
</tbody>
40+
</table>
41+
</div>
3242
</>
3343
);
3444
}
3545

3646
export const FunctionData = (props) => {
47+
48+
// Display data, remove IDs and Phone numbers
3749
const tableRows = Object.entries(props.functionData.response).map((entry, index) => {
50+
51+
const name = entry[0] || "";
52+
const val = (!entry[1] || entry[1].toString().length===0)
53+
? ""
54+
: (entry[0].toString().toLowerCase().includes("phone") || entry[0].toString().toLowerCase().includes("principal") || entry[0].toString().toLowerCase().includes("mail") || entry[0].toString().toLowerCase().includes("id"))
55+
? `...`
56+
: entry[1];
57+
3858
return (<tr key={index}>
39-
<td><b>{entry[0]}: </b></td>
40-
<td>{entry[1]}</td>
59+
<td><b>{name}: </b></td>
60+
<td><i>{val}</i></td>
4161
</tr>)
4262
});
4363

4464
return (
4565
<>
46-
<div className="data-area-div">
47-
<p>Calling <strong>protected Azure Function API (which in turn calls Microsoft Graph)</strong>...</p>
48-
<ul>
49-
<li><strong>endpoint:</strong> <mark>{protectedResources.functionApi.endpoint}</mark></li>
50-
<li><strong>scope:</strong> <mark>{protectedResources.functionApi.scopes[0]}</mark></li>
51-
</ul>
52-
<p>Contents of the <strong>response</strong> is below:</p>
53-
</div>
54-
<div className="data-area-div">
55-
<table>
56-
<thead>
57-
</thead>
58-
<tbody>
59-
{tableRows}
60-
</tbody>
61-
</table>
62-
</div>
66+
<div className="data-area-div">
67+
<p>Calling <strong>protected Azure Function API (which in turn calls Microsoft Graph)</strong>...</p>
68+
<ul>
69+
<li><strong>endpoint:</strong> <mark>{protectedResources.functionApi.endpoint}</mark></li>
70+
<li><strong>scope:</strong> <mark>{protectedResources.functionApi.scopes[0]}</mark></li>
71+
</ul>
72+
<p>Contents of the <strong>response</strong> is below:</p>
73+
</div>
74+
<div className="data-area-div">
75+
<table>
76+
<thead>
77+
</thead>
78+
<tbody>
79+
{tableRows}
80+
</tbody>
81+
</table>
82+
</div>
6383
</>
6484
);
6585
}

‎4-Deployment/2-deploy-static/README.md

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,17 +78,13 @@ The first thing that we need to do is to declare the unique [resource](https://d
7878
- Keep **State** as **Enabled**.
7979
- Select the **Add scope** button on the bottom to save this scope.
8080
1. In the app's registration screen, select the **API permissions** blade in the left to open the page where we add access to the APIs that your application needs.
81-
- Select the **Add a permission** button and then,
82-
- Ensure that the **Microsoft APIs** tab is selected.
83-
- In the *Commonly used Microsoft APIs* section, select **Microsoft Graph**
84-
- In the **Delegated permissions** section, select the **User.Read** in the list. Use the search box if necessary.
85-
- Select the **Add permissions** button at the bottom.
81+
- Keep the Graph API User.Read permission, already provided by default.
8682
- Select the **Add a permission** button and then,
8783
- Ensure that the **My APIs** tab is selected.
8884
- In the list of APIs, select the API `msal-react-spa`.
8985
- In the **Delegated permissions** section, select the **Access 'msal-react-spa'** in the list. Use the search box if necessary.
9086
- Select the **Add permissions** button at the bottom.
91-
1. In the app's registration screen, select the **Manifest** blade. Then:
87+
2. In the app's registration screen, select the **Manifest** blade. Then:
9288
- Find the key `"accessTokenAcceptedVersion"` and replace the existing value with **2** i.e. `"accessTokenAcceptedVersion": 2`.
9389

9490
#### Configure the app (msal-react-spa) to use your app registration

0 commit comments

Comments
 (0)