Meerdere resources voor Insluitende lezer integreren
In het overzicht hebt u geleerd over de Insluitende lezer en hoe het bewezen technieken implementeert om het leesbegrip voor taalleerders, opkomende lezers en studenten met leerverschillen te verbeteren. In de quickstart hebt u geleerd hoe u Insluitende lezer kunt gebruiken met één resource. In deze zelfstudie wordt uitgelegd hoe u Insluitende lezer met meerdere resources in dezelfde toepassing kunt integreren.
In deze zelfstudie leert u het volgende:
- Maak meerdere Insluitende lezer resource onder een bestaande resourcegroep.
- Start de Insluitende lezer met behulp van meerdere resources.
Vereisten
- Een Azure-abonnement. Als u nog geen account hebt, kunt u een gratis account maken.
- Eén Insluitende lezer-resource die is geconfigureerd voor Microsoft Entra-verificatie. Volg deze instructies om deze in te stellen.
- Een NodeJS-web-app waarmee Insluitende lezer wordt gestart.
Meerdere resources maken
Volg deze instructies opnieuw om elke Insluitende lezer resource te maken. Het Create-ImmersiveReaderResource script heeft ResourceName, ResourceSubdomainen ResourceLocation als parameters. Deze parameters moeten uniek zijn voor elke resource die wordt gemaakt. De overige parameters moeten hetzelfde zijn als de parameters die u hebt gebruikt bij het instellen van uw eerste resource voor Insluitende lezer. Op deze manier kan elke resource worden gekoppeld aan dezelfde Azure-resourcegroep en Microsoft Entra-toepassing.
In het volgende voorbeeld ziet u hoe u twee resources maakt, één in WestUS en een andere in EastUS. Elke resource heeft unieke waarden voor ResourceName, ResourceSubdomainen 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>
Resources toevoegen aan de omgevingsconfiguratie
In de quickstart hebt u een omgevingsconfiguratiebestand gemaakt dat de parameters TenantId, ClientId, ClientSecret en Subdomain bevat. Omdat al uw resources dezelfde Microsoft Entra-toepassing gebruiken, kunt u dezelfde waarden gebruiken voor de TenantId, ClientIden ClientSecret. De enige wijziging die u moet aanbrengen, is dat u het subdomein voor elke resource moet opgeven.
Het nieuwe .env-bestand moet er nu ongeveer als volgt uitzien:
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}
Notitie
Zorg ervoor dat u dit bestand niet doorvoert in broncodebeheer omdat het geheimen bevat die niet openbaar moeten worden gemaakt.
Wijzig vervolgens het bestand routes\index.js dat u hebt gemaakt ter ondersteuning van uw meerdere resources. Vervang de inhoud ervan door de volgende code.
Net als voorheen maakt deze code een API-eindpunt dat een Microsoft Entra-verificatietoken verkrijgt met behulp van uw wachtwoord voor de service-principal. Ditmaal kan de gebruiker een resourcelocatie opgeven en deze doorgeven als een queryparameter. Vervolgens wordt een-object met het token en het bijbehorende subdomein geretourneerd.
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;
Het getimmersivereaderlaunchparams API-eindpunt moet worden beveiligd achter een bepaalde vorm van verificatie (bijvoorbeeld OAuth) om te voorkomen dat onbevoegde gebruikers tokens verkrijgen die moeten worden gebruikt voor uw Insluitende lezer service en facturering; dat werk valt buiten het bereik van deze zelfstudie.
Voorbeeldinhoud toevoegen
Open views\index.pug en vervang de inhoud ervan door de volgende code. Deze code vult de pagina met een aantal voorbeeldinhoud en voegt twee knoppen toe waarmee de Insluitende lezer wordt gestart. Een die Insluitende lezer start voor de resource EastUS en een andere voor de westUS-resource.
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.");
}
Uw web-app is nu klaar. Start de app met de volgende opdracht:
npm start
Open uw browser en ga naar http://localhost:3000. De bovenstaande inhoud wordt weergegeven op de pagina. Selecteer de knop EastUS Insluitende lezer of de knop WestUS Insluitende lezer om de Insluitende lezer te starten met deze respectieve resources.