Integrera flera Avancerad läsare resurser
I översiktenhar du lärt dig om vad Avancerad läsare är och hur den implementerar beprövade tekniker för att förbättra läsförståelse för språkinlärare, nya läsare och studenter med inlärningsskillnader. I snabbstartenhar du lärt dig hur du använder Avancerad läsare med en enskild resurs. Den här självstudien beskriver hur du integrerar Avancerad läsare flera resurser i samma program. I den här guiden får du lära dig att:
- Skapa flera Avancerad läsare under en befintlig resursgrupp
- Starta Avancerad läsare med flera resurser
Om du inte har någon Azure-prenumeration kan du skapa ett kostnadsfritt konto innan du börjar.
Förutsättningar
- Följ snabbstarten för att skapa en webbapp som startar Avancerad läsare med NodeJS. I den snabbstarten konfigurerar du en Avancerad läsare resurs. Vi bygger vidare på det i den här självstudien.
Skapa Avancerad läsare resurser
Följ de här instruktionerna för att skapa Avancerad läsare resurs. Skriptet Create-ImmersiveReaderResource har ResourceName , och som ResourceSubdomain ResourceLocation parametrar. Dessa ska vara unika för varje resurs som skapas. De återstående parametrarna ska vara desamma som du använde när du konfigurerade din Avancerad läsare resurs. På så sätt kan varje resurs länkas till samma Azure-resursgrupp och Azure AD-program.
Exemplet nedan visar hur du skapar två resurser, en i USA, västra och en annan i USA, östra. Lägg märke till de unika värdena ResourceName för ResourceSubdomain , och ResourceLocation .
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME> `
-ResourceName Resource_name_wus `
-ResourceSubdomain resource-subdomain-wus `
-ResourceSKU <RESOURCE_SKU> `
-ResourceLocation westus `
-ResourceGroupName <RESOURCE_GROUP_NAME> `
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION> `
-AADAppDisplayName <AAD_APP_DISPLAY_NAME> `
-AADAppIdentifierUri <AAD_APP_IDENTIFIER_URI> `
-AADAppClientSecret <AAD_APP_CLIENT_SECRET>
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME> `
-ResourceName Resource_name_eus `
-ResourceSubdomain resource-subdomain-eus `
-ResourceSKU <RESOURCE_SKU> `
-ResourceLocation eastus `
-ResourceGroupName <RESOURCE_GROUP_NAME> `
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION> `
-AADAppDisplayName <AAD_APP_DISPLAY_NAME> `
-AADAppIdentifierUri <AAD_APP_IDENTIFIER_URI> `
-AADAppClientSecret <AAD_APP_CLIENT_SECRET>
Lägga till resurser i miljökonfigurationen
I snabbstarten skapade du en miljökonfigurationsfil som innehåller TenantId ClientId parametrarna ClientSecret , , och Subdomain . Eftersom alla dina resurser använder samma Azure AD-program kan vi använda samma värden för TenantId , ClientId och 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}
Se till att du inte genomför den här filen i källkontrollen eftersom den innehåller hemligheter som inte ska göras offentliga.
Nu ska vi ändra den filroutes\index.js som vi skapade för att stödja våra flera resurser. Ersätt dess innehåll med följande kod.
Som tidigare skapar den här koden en API-slutpunkt som hämtar en Azure AD-autentiseringstoken med hjälp av ditt lösenord för tjänstens huvudnamn. Den här gången kan användaren ange en resursplats och skicka den som en frågeparameter. Den returnerar sedan 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;
API-slutpunkten getivereaderlaunchparams 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; att arbetet ligger utanför omfånget för den här självstudien.
Starta Avancerad läsare med exempelinnehåll
Öppna views\index.pug och ersätt dess innehåll 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 för Avancerad läsare för resursen EastUS och en annan för resursen WestUS.
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://contentstorage.onenote.office.net/onenoteltir/immersivereadersdk/immersive-reader-sdk.1.0.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://docs.microsoft.com/azure/cognitive-services/immersive-reader/reference#chunk const data = { title: $("#ir-title").text(), chunks: [{ content: $("#ir-content").html(), mimeType: "text/html" }] }; // Learn more about options https://docs.microsoft.com/azure/cognitive-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."); }Vår webbapp ä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 ovanstående innehåll på sidan. Klicka på knappen EastUS Avancerad läsare eller knappen Usa Avancerad läsare västra för att starta Avancerad läsare med hjälp av respektive resurser.
Nästa steg
- Utforska Avancerad läsare SDK och Avancerad läsare SDK-referensen
- Visa kodexempel på GitHub