Integrace více Asistivní čtečka prostředků
V přehledu jste se dozvěděli, co je Asistivní čtečka a jak implementuje osvědčené techniky pro zlepšení porozumění čtení pro studenty jazyků, nově vznikající čtenáře a studenty s rozdíly ve učení. V rychlém startujste zjistili, jak používat Asistivní čtečka s jedním prostředekem. Tento kurz popisuje, jak integrovat více Asistivní čtečka prostředků do stejné aplikace. V tomto kurzu se naučíte:
- Vytvoření více Asistivní čtečka prostředků v rámci existující skupiny prostředků
- Spuštění aplikace Asistivní čtečka několika prostředků
Pokud ještě nemáte předplatné Azure, vytvořte si napřed bezplatný účet.
Požadavky
- Postupujte podle tohoto rychlého startu a vytvořte webovou aplikaci, která spustí Asistivní čtečka pomocí NodeJS. V tomto rychlém startu nakonfigurujete jeden prostředek Asistivní čtečka prostředků. Na základě toho budeme v tomto kurzu stavět.
Vytvoření Asistivní čtečka prostředků
Podle těchto pokynů vytvořte jednotlivé Asistivní čtečka prostředky. Skript Create-ImmersiveReaderResource má ResourceName jako parametry , a ResourceSubdomain ResourceLocation . Ty by měly být jedinečné pro každý vytvářený prostředek. Zbývající parametry by měly být stejné jako ty, které jste použili při nastavování prvního Asistivní čtečka prostředků. Každý prostředek tak může být propojený se stejnou skupinou prostředků Azure a aplikací Azure AD.
Následující příklad ukazuje, jak vytvořit dva prostředky, jeden v oblasti WestUS a druhý v oblasti EastUS. Všimněte si jedinečných hodnot pro , a ResourceName ResourceSubdomain 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>
Přidání prostředků do konfigurace prostředí
V tomto rychlém startu jste vytvořili konfigurační soubor prostředí, který obsahuje TenantId parametry , , a ClientId ClientSecret Subdomain . Vzhledem k tomu, že všechny vaše prostředky používají stejnou aplikaci Azure AD, můžeme použít stejné hodnoty TenantId pro ClientId , a ClientSecret . Jedinou změnou, kterou je potřeba změnit, je vy listovat každou subdoménu pro každý prostředek.
Váš nový soubor .env by teď měl vypadat nějak takto:
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}
Nezapomeňte tento soubor nezavázat do správy zdrojového kódu, protože obsahuje tajné kódy, které by neměly být veřejné.
V dalším kroku upravíme soubor routes\index.js, který jsme vytvořili, aby podporoval více prostředků. Nahraďte jeho obsah následujícím kódem.
Stejně jako předtím tento kód vytvoří koncový bod rozhraní API, který získá ověřovací token Azure AD pomocí hesla vašeho objektu služby. Tentokrát umožní uživateli zadat umístění prostředku a předat ho jako parametr dotazu. Pak vrátí objekt obsahující token a odpovídající subdoménu.
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;
Koncový bod rozhraní API getimmersivereaderlaunchparams by měl být zabezpečený za nějakou formou ověřování (například OAuth),aby neoprávněným uživatelům zabránil v získání tokenů, které se mají použít pro vaši službu Asistivní čtečka a fakturaci. tato práce přesahuje rozsah tohoto kurzu.
Spuštění Asistivní čtečka s ukázkovým obsahem
Otevřete views\index.pug a nahraďte jeho obsah následujícím kódem. Tento kód naplní stránku ukázkovým obsahem a přidá dvě tlačítka, která spustí Asistivní čtečka. Jedno pro spuštění Asistivní čtečka pro prostředek EastUS a druhé pro prostředek 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."); }Webová aplikace je teď připravená. Spusťte aplikaci spuštěním:
npm startOtevřete prohlížeč a přejděte na
http://localhost:3000. Na stránce by se měl zobrazit výše uvedený obsah. Kliknutím na tlačítko eastUS Asistivní čtečka nebo westUS Asistivní čtečka tlačítko pro spuštění Asistivní čtečka příslušných prostředků.
Další kroky
- Projděte si Asistivní čtečka SDK a referenční informace k Asistivní čtečka SDK.
- Zobrazení ukázek kódu na GitHub