Több Modern olvasó erőforrás integrálása
Az áttekintésben megismerkedett a Modern olvasó és azzal, hogyan valósítja meg a nyelvtudást javító bevált technikákat a nyelvtanulók, a feltörekvő olvasók és a tanulási különbségekkel rendelkező diákok számára. A rövid útmutatóban megtanulta, hogyan használhatja a Modern olvasó egyetlen erőforrással. Ez az oktatóanyag bemutatja, hogyan integrálhat több Modern olvasó erőforrást ugyanabban az alkalmazásban.
Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:
- Hozzon létre több Modern olvasó erőforrást egy meglévő erőforráscsoportban.
- Indítsa el a Modern olvasó több erőforrással.
Előfeltételek
- Azure-előfizetés. Ha még nincs előfizetése, hozzon létre egy ingyenes fiókot.
- A Microsoft Entra-hitelesítéshez konfigurált egyetlen Modern olvasó erőforrás. A beállításhoz kövesse az alábbi utasításokat .
- Egy NodeJS-webalkalmazás, amely Modern olvasó indít el.
Több erőforrás létrehozása
Kövesse ismét ezeket az utasításokat az egyes Modern olvasó erőforrások létrehozásához. A Create-ImmersiveReaderResource
szkript paraméterként és ResourceLocation
paraméterként is rendelkezikResourceName
ResourceSubdomain
. Ezeknek a paramétereknek egyedinek kell lenniük minden létrehozott erőforrás esetében. A többi paraméternek meg kell egyeznie az első Modern olvasó erőforrás beállításakor használt paraméterekkel. Így minden erőforrás ugyanahhoz az Azure-erőforráscsoporthoz és a Microsoft Entra-alkalmazáshoz csatolható.
Az alábbi példa bemutatja, hogyan hozhat létre két erőforrást, egyet a WestUS-ban, a másikat pedig az EastUS-ban. Minden erőforrás egyedi értékekkel rendelkezik az , ResourceSubdomain
és ResourceLocation
.ResourceName
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>
Erőforrások hozzáadása környezetkonfigurációhoz
A rövid útmutatóban létrehozott egy környezeti konfigurációs fájlt, amely tartalmazza a TenantId
, ClientId
, ClientSecret
, és Subdomain
paramétereket. Mivel minden erőforrása ugyanazt a Microsoft Entra-alkalmazást használja, ugyanazokat az értékeket használhatja a , ClientId
és ClientSecret
.TenantId
Az egyetlen módosítás, amelyet végre kell hozni, az egyes erőforrások altartományainak listázása.
Az új .env fájlnak a következőképpen kell kinéznie:
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}
Feljegyzés
Ügyeljen arra, hogy ne véglegesítse ezt a fájlt a forrásvezérlőbe, mert olyan titkos kulcsokat tartalmaz, amelyeket nem szabad nyilvánossá tenni.
Ezután módosítsa a létrehozott útvonalak\index.js fájlt a több erőforrás támogatásához. Cserélje le a tartalmát a következő kódra.
Mint korábban, ez a kód létrehoz egy API-végpontot, amely egy Microsoft Entra hitelesítési jogkivonatot szerez be a szolgáltatásnév jelszavával. Ez alkalommal lehetővé teszi a felhasználó számára egy erőforrás helyének megadását és lekérdezési paraméterként való átadását. Ezután visszaad egy objektumot, amely tartalmazza a jogkivonatot és a megfelelő altartományt.
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;
Az getimmersivereaderlaunchparams
API-végpontot valamilyen hitelesítés (például OAuth) mögött kell védeni, hogy a jogosulatlan felhasználók ne szerezhessenek be jogkivonatokat a Modern olvasó szolgáltatással és számlázással kapcsolatban; ez a munka meghaladja az oktatóanyag hatókörét.
Mintatartalom hozzáadása
Nyissa meg a views\index.pug fájlt, és cserélje le a tartalmát a következő kódra. Ez a kód feltölti a lapot néhány mintatartalommal, és hozzáad két gombot, amelyek elindítják a Modern olvasó. Az EastUS-erőforráshoz Modern olvasó, a WestUS-erőforráshoz pedig egy másikat.
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.");
}
A webalkalmazás készen áll. Indítsa el az alkalmazást a következő futtatásával:
npm start
Nyissa meg a böngészőt, és keresse meg a következőt http://localhost:3000
: . A fenti tartalomnak meg kell jelennie a lapon. Válassza az EastUS Modern olvasó vagy a WestUS Modern olvasó gombot a Modern olvasó az adott erőforrások használatával történő elindításához.