You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: In this quickstart, you build a web app from scratch and add the Immersive Reader API functionality.
4
+
description: Learn how to build a web app using C#, and add the Immersive Reader API functionality.
5
5
#services: cognitive-services
6
-
author: rwallerms
6
+
author: sharmas
7
7
manager: nitinme
8
8
ms.service: azure-ai-immersive-reader
9
9
ms.topic: include
10
-
ms.date: 09/14/2020
11
-
ms.author: rwaller
10
+
ms.date: 02/14/2024
11
+
ms.author: sharmas
12
12
ms.custom: "devx-track-js, devx-track-csharp"
13
13
---
14
14
15
-
[Immersive Reader](https://www.onenote.com/learningtools) is an inclusively designed tool that implements proven techniques to improve reading comprehension for new readers, language learners, and people with learning differences such as dyslexia. You can use Immersive Reader in your applications to isolate text to improve focus, display pictures for commonly used words, highlight parts of speech, read selected text out loud, translate words and phrases in real-time, and more.
16
-
17
-
In this quickstart, you build a web app from scratch and integrate Immersive Reader using the Immersive Reader client library. A full working sample of this quickstart is available [on GitHub](https://github.com/microsoft/immersive-reader-sdk/tree/master/js/samples/quickstart-csharp).
15
+
In this quickstart guide, you build a web app from scratch using C#, and integrate Immersive Reader using the client library. A full working sample of this quickstart is [available on GitHub](https://github.com/microsoft/immersive-reader-sdk/tree/master/js/samples/quickstart-csharp).
18
16
19
17
## Prerequisites
20
18
21
-
* Azure subscription - [Create one for free](https://azure.microsoft.com/free/cognitive-services)
22
-
*[Visual Studio 2022](https://visualstudio.microsoft.com/downloads)
23
-
*An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. You will need some of the values created here when configuring the sample project properties. Save the output of your session into a text file for future reference.
19
+
*An Azure subscription. You can [create one for free](https://azure.microsoft.com/free/ai-services).
20
+
*An Immersive Reader resource configured for Microsoft Entra authentication. Follow [these instructions](../../how-to-create-immersive-reader.md) to get set up. Save the output of your session into a text file so you can configure the environment properties.
21
+
*[Visual Studio 2022](https://visualstudio.microsoft.com/downloads).
24
22
25
23
## Create a web app project
26
24
27
-
Create a new project in Visual Studio, using the ASP.NET Core Web Application template with built-in Model-View-Controller, and ASP.NET Core 6. Name the project "QuickstartSampleWebApp".
25
+
Create a new project in Visual Studio, using the ASP.NET Core Web Application template with built-in Model-View-Controller, and ASP.NET Core 6. Name the project *QuickstartSampleWebApp*.
:::image type="content" source="../../media/quickstart-csharp/1-create-project.png" alt-text="Screenshot of Visual Studio screen to create new project.":::
30
28
31
-

29
+
:::image type="content" source="../../media/quickstart-csharp/2-configure-project.png" alt-text="Screenshot of Visual Studio screen to configure project.":::
32
30
33
-

31
+
:::image type="content" source="../../media/quickstart-csharp/3-create-mvc.png" alt-text="Screenshot of Aspnet core web app screen.":::
34
32
35
33
## Set up authentication
36
34
37
-
### Configure authentication values
38
-
39
-
Right-click on the project in the _Solution Explorer_ and choose **Manage User Secrets**. This will open a file called _secrets.json_. This file isn't checked into source control. Learn more [here](/aspnet/core/security/app-secrets?tabs=windows). Replace the contents of _secrets.json_ with the following, supplying the values given when you created your Immersive Reader resource.
35
+
Right-click on the project in the **Solution Explorer** and choose **Manage User Secrets**. This opens a file called *secrets.json*. This file isn't checked into source control. To learn more, see [Safe storage of app secrets](/aspnet/core/security/app-secrets?tabs=windows). Replace the contents of *secrets.json* with the following, supplying the values given when you created your Immersive Reader resource.
40
36
41
37
> [!IMPORTANT]
42
38
> Remember to never post secrets publicly. For production, use a secure way of storing and accessing your credentials like [Azure Key Vault](../../../../key-vault/general/overview.md).
@@ -52,31 +48,31 @@ Right-click on the project in the _Solution Explorer_ and choose **Manage User S
52
48
53
49
### Install Identity Client NuGet package
54
50
55
-
The following code uses objects from the **Microsoft.Identity.Client** NuGet package so you'll need to add a reference to that package in your project.
51
+
The following code uses objects from the `Microsoft.Identity.Client` NuGet package so you need to add a reference to that package in your project.
56
52
57
53
> [!IMPORTANT]
58
-
> The [Microsoft.IdentityModel.Clients.ActiveDirectory](https://www.nuget.org/packages/Microsoft.IdentityModel.Clients.ActiveDirectory) NuGet package and Azure AD Authentication Library (ADAL) have been deprecated. No new features have been added since June 30, 2020. We strongly encourage you to upgrade, see the [migration guide](../../../../active-directory/develop/msal-migration.md) for more details.
54
+
> The [Microsoft.IdentityModel.Clients.ActiveDirectory](https://www.nuget.org/packages/Microsoft.IdentityModel.Clients.ActiveDirectory) NuGet package and Azure AD Authentication Library (ADAL) have been deprecated. No new features have been added since June 30, 2020. We strongly encourage you to upgrade. For more information, see the [migration guide](/entra/identity-platform/msal-migration).
59
55
60
-
Open the NuGet Package Manager Console from **Tools -> NuGet Package Manager -> Package Manager Console** and run the following command:
56
+
Open the NuGet Package Manager Console from **Tools** -> **NuGet Package Manager** -> **Package Manager Console** and run the following command:
Open _Controllers\HomeController.cs_, and add the following code after the _using_ statements at the top of the file.
64
+
Open *Controllers\HomeController.cs*, and add the following code after the `using` statements at the top of the file.
69
65
70
66
```csharp
71
67
usingMicrosoft.Identity.Client;
72
68
```
73
69
74
-
Now, we'll configure the controller to obtain the Microsoft Entra ID values from _secrets.json_. At the top of the _HomeController_ class, after ```public class HomeController : Controller {```, add the following code.
70
+
Configure the controller to obtain the Microsoft Entra ID values from *secrets.json*. At the top of the `HomeController` class, after ```public class HomeController : Controller {```, add the following code.
privatereadonlystringClientSecret; //Microsoft Entra Application Service Principal password
80
76
privatereadonlystringSubdomain; // Immersive Reader resource subdomain (resource 'Name' if the resource was created in the Azure portal, or 'CustomSubDomain' option if the resource was created with Azure CLI PowerShell. Check the Azure portal for the subdomain on the Endpoint in the resource Overview page, for example, 'https://[SUBDOMAIN].cognitiveservices.azure.com/')
@@ -123,7 +119,7 @@ public HomeController(Microsoft.Extensions.Configuration.IConfiguration configur
123
119
}
124
120
125
121
/// <summary>
126
-
/// Get an Azure AD authentication token
122
+
/// Get a Microsoft Entra ID authentication token
127
123
/// </summary>
128
124
publicasyncTask<string>GetTokenAsync()
129
125
{
@@ -148,21 +144,22 @@ public async Task<JsonResult> GetTokenAndSubdomain()
148
144
}
149
145
catch (Exceptione)
150
146
{
151
-
stringmessage="Unable to acquire Azure AD token. Check the console for more information.";
147
+
stringmessage="Unable to acquire Microsoft Entra token. Check the console for more information.";
152
148
Debug.WriteLine(message, e);
153
149
returnnewJsonResult(new { error=message });
154
150
}
155
151
}
156
152
```
157
153
158
154
## Add sample content
159
-
First, open _Views\Shared\Layout.cshtml_. Before the line ```</head>```, add the following code:
155
+
156
+
First, open *Views\Shared\Layout.cshtml*. Before the line ```</head>```, add the following code:
160
157
161
158
```html
162
159
@RenderSection("Styles", required: false)
163
160
```
164
161
165
-
Now, we'll add sample content to this web app. Open _Views\Home\Index.cshtml_ and replace all automatically generated code with this sample:
162
+
Nowadd sample content to this web app. Open *Views\Home\Index.cshtml* and replace all automatically generated code with this sample:
166
163
167
164
```html
168
165
@{
@@ -228,13 +225,13 @@ Now, we'll add sample content to this web app. Open _Views\Home\Index.cshtml_ an
228
225
</div>
229
226
```
230
227
231
-
Notice that all of the text has a **lang** attribute, which describes the languages of the text. This attribute helps the Immersive Reader provide relevant language and grammar features.
228
+
Notice that all of the text has a `lang` attribute, which describes the languages of the text. This attribute helps the Immersive Reader provide relevant language and grammar features.
232
229
233
230
## Add JavaScript to handle launching Immersive Reader
234
231
235
-
The Immersive Reader library provides functionality such as launching the Immersive Reader, and rendering Immersive Reader buttons. Learn more[here](../../reference.md).
232
+
The Immersive Reader library provides functionality such as launching the Immersive Reader, and rendering Immersive Reader buttons. To learn more, see the [JavaScript SDK reference](../../reference.md).
236
233
237
-
At the bottom of _Views\Home\Index.cshtml_, add the following code:
234
+
At the bottom of *Views\Home\Index.cshtml*, add the following code:
238
235
239
236
```html
240
237
@section Scripts
@@ -310,15 +307,15 @@ From the menu bar, select **Debug > Start Debugging**, or press **F5** to start
0 commit comments