Integrera flera Avancerad läsare resurser
I översikten har du lärt dig om Avancerad läsare och hur den implementerar beprövade tekniker för att förbättra läsförståelsen för språkinlärare, nya läsare och elever med inlärningsskillnader. I snabbstarten lärde du dig hur du använder Avancerad läsare med en enda resurs. Den här självstudien beskriver hur du integrerar flera Avancerad läsare resurser i samma program.
I den här självstudien lär du dig att:
- Skapa flera Avancerad läsare resurs under en befintlig resursgrupp.
- Starta Avancerad läsare med flera resurser.
Förutsättningar
- En Azure-prenumeration. Om du inte har en skapar du ett kostnadsfritt konto.
- En enda Avancerad läsare resurs som konfigurerats för Microsoft Entra-autentisering. Följ de här anvisningarna för att konfigurera.
- En NodeJS-webbapp som startar Avancerad läsare.
Skapa flera resurser
Följ de här anvisningarna igen för att skapa varje Avancerad läsare resurs. Skriptet Create-ImmersiveReaderResource har ResourceName, ResourceSubdomainoch ResourceLocation som parametrar. Dessa parametrar bör vara unika för varje resurs som skapas. De återstående parametrarna bör vara desamma som du använde när du konfigurerade din första Avancerad läsare resurs. På så sätt kan varje resurs länkas till samma Azure-resursgrupp och Microsoft Entra-program.
I följande exempel visas hur du skapar två resurser, en i WestUS och en annan i EastUS. Varje resurs har unika värden för ResourceName, ResourceSubdomainoch ResourceLocation.
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME>
-ResourceName Resource_name_westus
-ResourceSubdomain resource-subdomain-westus
-ResourceSKU <RESOURCE_SKU>
-ResourceLocation westus
-ResourceGroupName <RESOURCE_GROUP_NAME>
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION>
-AADAppDisplayName <MICROSOFT_ENTRA_DISPLAY_NAME>
-AADAppIdentifierUri <MICROSOFT_ENTRA_IDENTIFIER_URI>
-AADAppClientSecret <MICROSOFT_ENTRA_CLIENT_SECRET>
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME>
-ResourceName Resource_name_eastus
-ResourceSubdomain resource-subdomain-eastus
-ResourceSKU <RESOURCE_SKU>
-ResourceLocation eastus
-ResourceGroupName <RESOURCE_GROUP_NAME>
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION>
-AADAppDisplayName <MICROSOFT_ENTRA_DISPLAY_NAME>
-AADAppIdentifierUri <MICROSOFT_ENTRA_IDENTIFIER_URI>
-AADAppClientSecret <MICROSOFT_ENTRA_CLIENT_SECRET>
Lägga till resurser i miljökonfigurationen
I snabbstarten skapade du en miljökonfigurationsfil som innehåller parametrarna TenantId, ClientId, ClientSecretoch Subdomain . Eftersom alla dina resurser använder samma Microsoft Entra-program kan du använda samma värden för TenantId, ClientIdoch ClientSecret. Den enda ändring som behöver göras är att lista varje underdomän för varje resurs.
Den nya .env-filen bör nu se ut ungefär så här:
TENANT_ID={YOUR_TENANT_ID}
CLIENT_ID={YOUR_CLIENT_ID}
CLIENT_SECRET={YOUR_CLIENT_SECRET}
SUBDOMAIN_WUS={YOUR_WESTUS_SUBDOMAIN}
SUBDOMAIN_EUS={YOUR_EASTUS_SUBDOMAIN}
Kommentar
Se till att du inte checkar in den här filen i källkontrollen eftersom den innehåller hemligheter som inte bör offentliggöras.
Ändra sedan filen routes\index.js som du skapade för att stödja dina flera resurser. Ersätt innehållet med följande kod.
Precis som tidigare skapar den här koden en API-slutpunkt som hämtar en Microsoft Entra-autentiseringstoken med ditt lösenord för tjänstens huvudnamn. Den här gången kan användaren ange en resursplats och skicka in den som en frågeparameter. Sedan returneras ett objekt som innehåller token och motsvarande underdomän.
var express = require('express');
var router = express.Router();
var request = require('request');
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.get('/GetTokenAndSubdomain', function(req, res) {
try {
request.post({
headers: {
'content-type': 'application/x-www-form-urlencoded'
},
url: `https://login.windows.net/${process.env.TENANT_ID}/oauth2/token`,
form: {
grant_type: 'client_credentials',
client_id: process.env.CLIENT_ID,
client_secret: process.env.CLIENT_SECRET,
resource: 'https://cognitiveservices.azure.com/'
}
},
function(err, resp, tokenResult) {
if (err) {
console.log(err);
return res.status(500).send('CogSvcs IssueToken error');
}
var tokenResultParsed = JSON.parse(tokenResult);
if (tokenResultParsed.error) {
console.log(tokenResult);
return res.send({error : "Unable to acquire Azure AD token. Check the debugger for more information."})
}
var token = tokenResultParsed.access_token;
var subdomain = "";
var region = req.query && req.query.region;
switch (region) {
case "eus":
subdomain = process.env.SUBDOMAIN_EUS
break;
case "wus":
default:
subdomain = process.env.SUBDOMAIN_WUS
}
return res.send({token, subdomain});
});
} catch (err) {
console.log(err);
return res.status(500).send('CogSvcs IssueToken error');
}
});
module.exports = router;
getimmersivereaderlaunchparams API-slutpunkten bör skyddas bakom någon form av autentisering (till exempel OAuth) för att förhindra att obehöriga användare hämtar token som ska användas mot din Avancerad läsare tjänst och fakturering. Det arbetet ligger utanför omfånget för den här självstudien.
Lägga till exempelinnehåll
Öppna views\index.pug och ersätt innehållet med följande kod. Den här koden fyller sidan med exempelinnehåll och lägger till två knappar som startar Avancerad läsare. En som startar Avancerad läsare för EastUS-resursen och en annan för WestUS-resursen.
doctype html
html
head
title Immersive Reader Quickstart Node.js
link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css')
// A polyfill for Promise is needed for IE11 support.
script(src='https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js')
script(src='https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.2.0.js')
script(src='https://code.jquery.com/jquery-3.3.1.min.js')
style(type="text/css").
.immersive-reader-button {
background-color: white;
margin-top: 5px;
border: 1px solid black;
float: right;
}
body
div(class="container")
button(class="immersive-reader-button" data-button-style="icon" data-locale="en" onclick='handleLaunchImmersiveReader("wus")') WestUS Immersive Reader
button(class="immersive-reader-button" data-button-style="icon" data-locale="en" onclick='handleLaunchImmersiveReader("eus")') EastUS Immersive Reader
h1(id="ir-title") About Immersive Reader
div(id="ir-content" lang="en-us")
p Immersive Reader is a tool that implements proven techniques to improve reading comprehension for emerging readers, language learners, and people with learning differences. The Immersive Reader is designed to make reading more accessible for everyone. The Immersive Reader
ul
li Shows content in a minimal reading view
li Displays pictures of commonly used words
li Highlights nouns, verbs, adjectives, and adverbs
li Reads your content out loud to you
li Translates your content into another language
li Breaks down words into syllables
h3 The Immersive Reader is available in many languages.
p(lang="es-es") El Lector inmersivo está disponible en varios idiomas.
p(lang="zh-cn") 沉浸式阅读器支持许多语言
p(lang="de-de") Der plastische Reader ist in vielen Sprachen verfügbar.
p(lang="ar-eg" dir="rtl" style="text-align:right") يتوفر \"القارئ الشامل\" في العديد من اللغات.
script(type="text/javascript").
function getTokenAndSubdomainAsync(region) {
return new Promise(function (resolve, reject) {
$.ajax({
url: "/GetTokenAndSubdomain",
type: "GET",
data: {
region: region
},
success: function (data) {
if (data.error) {
reject(data.error);
} else {
resolve(data);
}
},
error: function (err) {
reject(err);
}
});
});
}
function handleLaunchImmersiveReader(region) {
getTokenAndSubdomainAsync(region)
.then(function (response) {
const token = response["token"];
const subdomain = response["subdomain"];
// Learn more about chunk usage and supported MIME types https://learn.microsoft.com/azure/ai-services/immersive-reader/reference#chunk
const data = {
title: $("#ir-title").text(),
chunks: [{
content: $("#ir-content").html(),
mimeType: "text/html"
}]
};
// Learn more about options https://learn.microsoft.com/azure/ai-services/immersive-reader/reference#options
const options = {
"onExit": exitCallback,
"uiZIndex": 2000
};
ImmersiveReader.launchAsync(token, subdomain, data, options)
.catch(function (error) {
alert("Error in launching the Immersive Reader. Check the console.");
console.log(error);
});
})
.catch(function (error) {
alert("Error in getting the Immersive Reader token and subdomain. Check the console.");
console.log(error);
});
}
function exitCallback() {
console.log("This is the callback function. It is executed when the Immersive Reader closes.");
}
Webbappen är nu klar. Starta appen genom att köra:
npm start
Öppna din webbläsare och gå till http://localhost:3000. Du bör se innehållet ovan på sidan. Välj antingen knappen EastUS Avancerad läsare eller knappen WestUS Avancerad läsare för att starta Avancerad läsare med hjälp av respektive resurser.