Skip to content

Commit a0925d5

Browse files
AikoBBAikoBB
committed
rewrote the js app to a client app
1 parent 04cf99a commit a0925d5

File tree

1 file changed

+88
-50
lines changed

1 file changed

+88
-50
lines changed

‎articles/communication-services/quickstarts/identity/includes/entra-id/support-entra-id-users-js.md

Lines changed: 88 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -45,86 +45,124 @@ Use the `npm install` command to install the Azure Identity and Azure Communicat
4545
```console
4646
npm install @azure/communication-common --save
4747
npm install @azure/identity --save
48-
npm install express --save
49-
npm install dotenv --save
48+
npm install react react-dom --save
49+
npm install vite --save
5050
```
5151

5252
The `--save` option lists the library as a dependency in your **package.json** file.
5353

54+
Add these scripts to your package.json:
55+
56+
```json
57+
"scripts": {
58+
"dev": "vite",
59+
"build": "vite build",
60+
"preview": "vite preview"
61+
}
62+
```
63+
5464
## Implement the credential flow
5565

66+
In this quickstart, you will create a simple React application that uses the Azure Common SDK to obtain an access token for a Microsoft Entra ID user.
67+
5668
From the project directory:
5769

58-
1. Open a new text file in your code editor
59-
1. Create a basic NodeJS Express server and add the following imports:
70+
1. Create a `index.html` file with the following content:
71+
72+
```html
73+
<!DOCTYPE html>
74+
<html lang="en">
75+
<head>
76+
<meta charset="UTF-8" />
77+
<title>Entra ID Support Client</title>
78+
</head>
79+
<body>
80+
<div id="root"></div>
81+
<script type="module" src="/src/main.jsx"></script>
82+
</body>
83+
</html>
84+
```
85+
1. Create a `src` directory and inside it create a `main.jsx` file with the following content:
6086

6187
```javascript
62-
const { AzureCommunicationTokenCredential } = require('@azure/communication-common');
63-
const { InteractiveBrowserCredential } = require('@azure/identity');
64-
const express = require("express");
88+
import React from "react";
89+
import ReactDOM from "react-dom/client";
90+
import App from "./App";
6591

66-
// You will need to set environment variables in .env
67-
const SERVER_PORT = process.env.PORT || 80;
92+
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
93+
```
94+
1. Create a `src/App.jsx` file with the following content and import the `AzureCommunicationTokenCredential` and `InteractiveBrowserCredential` classes from the Azure Communication Common and Azure Identity SDKs, respectively. Also make sure to update the `clientId`, `tenantId`, and `resourceEndpoint` variables with your Microsoft Entra client ID, tenant ID, and Azure Communication Services resource endpoint URI:
6895

69-
// Quickstart code goes here
96+
```javascript
97+
import React, { useState } from "react";
98+
import { AzureCommunicationTokenCredential } from "@azure/communication-common";
99+
import { InteractiveBrowserCredential } from "@azure/identity";
100+
101+
function App() {
102+
// Set your Microsoft Entra client ID and tenant ID, Azure Communication Services resource endpoint URI.
103+
const clientId = 'YOUR_ENTRA_CLIENT_ID';
104+
const tenantId = 'YOUR_ENTRA_TENANT_ID';
105+
const resourceEndpoint = 'YOUR_COMMUNICATION_SERVICES_RESOURCE_ENDPOINT';
106+
107+
const [accessToken, setAccessToken] = useState("");
108+
const [error, setError] = useState("");
109+
110+
const handleLogin = async () => {
111+
try {
112+
// Quickstart code goes here
113+
setError("");
114+
} catch (err) {
115+
console.error("Error obtaining token:", err);
116+
setError("Failed to obtain token: " + err.message);
117+
}
118+
};
70119

71-
app.listen(SERVER_PORT, () => console.log(`Communication access token application started on ${SERVER_PORT}!`))
72-
```
120+
return (
121+
<div>
122+
<h2>Obtain Access Token for Entra ID User</h2>
123+
<button onClick={handleLogin}>Login and Get Access Token</button>
124+
{accessToken && (
125+
<div>
126+
<h4>Access Token:</h4>
127+
<textarea value={accessToken} readOnly rows={6} cols={60} />
128+
</div>
129+
)}
130+
{error && <div style={{ color: "red" }}>{error}</div>}
131+
</div>
132+
);
133+
}
73134

135+
export default App;
136+
```
74137
You can import any implementation of the [TokenCredential](https://learn.microsoft.com/javascript/api/%40azure/core-auth/tokencredential) interface from the [Azure Identity SDK for JavaScript](https://www.npmjs.com/package/@azure/identity) to authenticate with Microsoft Entra ID. In this quickstart, we use the `InteractiveBrowserCredential` class, which is suitable for browser basic authentication scenarios. For a full list of the credentials offered, see [Credential Classes](https://learn.microsoft.com/javascript/api/overview/azure/identity-readme#credential-classes).
75138

76-
1. Save the new file as `obtain-access-token-for-entra-id-user.js` in the `entra-id-users-support-quickstart` directory.
77-
78139
<a name='step-1-obtain-entra-user-token-via-the-identity-library'></a>
79140

80141
### Step 1: Initialize implementation of TokenCredential from Azure Identity SDK
81142

82-
The first step in obtaining Communication Services access token for Entra ID user is getting an Entra ID access token for your Entra ID user by using [Azure Identity](https://learn.microsoft.com/javascript/api/overview/azure/identity-readme) SDK. The code below retrieves the Contoso Entra client ID and the Fabrikam tenant ID from environment variables named `ENTRA_CLIENT_ID` and `ENTRA_TENANT_ID`. To enable authentication for users across multiple tenants, initialize the `InteractiveBrowserCredential` class with the authority set to `https://login.microsoftonline.com/organizations`. For more information, see [Authority](https://learn.microsoft.com//entra/identity-platform/msal-client-application-configuration#authority).
143+
The first step in obtaining Communication Services access token for Entra ID user is getting an Entra ID access token for your Entra ID user by using [Azure Identity](https://learn.microsoft.com/javascript/api/overview/azure/identity-readme) SDK. To enable authentication for users across multiple tenants, initialize the `InteractiveBrowserCredential` class with the authority set to `https://login.microsoftonline.com/organizations`. For more information, see [Authority](https://learn.microsoft.com//entra/identity-platform/msal-client-application-configuration#authority).
83144

84145
```javascript
85-
// This code demonstrates how to fetch your Microsoft Entra client ID and tenant ID from environment variables.
86-
const clientId = process.env['ENTRA_CLIENT_ID'];
87-
const tenantId = process.env['ENTRA_TENANT_ID'];
88-
89146
// Initialize InteractiveBrowserCredential for use with AzureCommunicationTokenCredential.
90147
const entraTokenCredential = new InteractiveBrowserCredential({
91-
tenantId: tenantId,
92-
clientId: clientId,
148+
tenantId: tenantId,
149+
clientId: clientId,
150+
authorityHost: "https://login.microsoftonline.com/organizations",
93151
});
94152
```
95153

96154
### Step 2: Initialize AzureCommunicationTokenCredential
97155

98-
Instantiate a `AzureCommunicationTokenCredential` with the TokenCredential created above and your Communication Services resource endpoint URI. The code below retrieves the endpoint for the resource from an environment variable named `COMMUNICATION_SERVICES_RESOURCE_ENDPOINT`.
156+
Instantiate a `AzureCommunicationTokenCredential` with the TokenCredential created above and your Communication Services resource endpoint URI.
99157

100158
```javascript
101-
const app = express();
102-
103-
app.get('/', async (req, res) => {
104-
try {
105-
console.log("Azure Communication Services - Obtain Access Token for Entra ID User Quickstart");
106-
// This code demonstrates how to fetch your Azure Communication Services resource endpoint URI
107-
// from an environment variable.
108-
const resourceEndpoint = process.env['COMMUNICATION_SERVICES_RESOURCE_ENDPOINT'];
109-
110-
// Set up AzureCommunicationTokenCredential to request a Communication Services access token for a Microsoft Entra ID user.
111-
const entraTokenCredentialOptions = {
112-
resourceEndpoint: resourceEndpoint,
113-
tokenCredential: entraTokenCredential,
114-
scopes: ["https://communication.azure.com/clients/VoIP"],
115-
};
116-
const entraCommunicationTokenCredential = new AzureCommunicationTokenCredential(
117-
entraTokenCredentialOptions
118-
);
119-
120-
// Obtain an access token for the Entra ID user code goes here.
121-
122-
} catch (err) {
123-
console.error("Error obtaining token:", err);
124-
res.status(500).send("Failed to obtain token");
125-
}
159+
// Set up AzureCommunicationTokenCredential to request a Communication Services access token for a Microsoft Entra ID user.
160+
const entraCommunicationTokenCredential = new AzureCommunicationTokenCredential({
161+
resourceEndpoint: resourceEndpoint,
162+
tokenCredential: entraTokenCredential,
126163
});
127164
```
165+
128166
Providing scopes is optional. When not specified, the `https://communication.azure.com/clients/.default` scope is automatically used, requesting all API permissions for Communication Services Clients that have been registered on the client application.
129167

130168
<a name='step-3-obtain-acs-access-token-of-the-entra-id-user'></a>
@@ -136,13 +174,13 @@ Use the `getToken` method to obtain an access token for the Entra ID user. The `
136174
```javascript
137175
// To obtain a Communication Services access token for Microsoft Entra ID call getToken() function.
138176
let accessToken = await entraCommunicationTokenCredential.getToken();
139-
console.log("Token:", accessToken);
177+
setAccessToken(accessToken.token);
140178
```
141179

142180
## Run the code
143181

144-
From a console prompt, navigate to the directory containing the *obtain-access-token-for-entra-id-user.js* file, then execute the following `node` command to run the app.
182+
From a console prompt, navigate to the directory *entra-id-users-support-quickstart* , then execute the following `npm` command to run the app.
145183

146184
```console
147-
node ./obtain-access-token-for-entra-id-user.js
185+
npm run dev
148186
```

0 commit comments

Comments
 (0)