Integración de varios recursos del Lector inmersivo
En la introducción, ha obtenido información sobre Immersive Reader y cómo implementa técnicas demostradas para mejorar la comprensión lectora de nuevos lectores, alumnos de idiomas y alumnos con diferencias de aprendizaje. En el inicio rápido, ha aprendido a usar el Lector inmersivo con un solo recurso. En este tutorial se explica cómo integrar varios recursos del Lector inmersivo en la misma aplicación.
En este tutorial, aprenderá a:
- Creación de varios recursos del Immersive Reader en un grupo de recursos existente
- Inicie Immersive Reader con varios recursos
Requisitos previos
- Suscripción a Azure. En caso de no tener ninguna, cree una cuenta gratuita.
- Un único recurso de Immersive Reader configurado para la autenticación de Microsoft Entra. Siga estas instrucciones para realizar la configuración.
- Una aplicación web de NodeJS que inicia Immersive Reader.
Creación de varios recursos
Siga estas instrucciones de nuevo para crear cada recurso de Immersive Reader. El script Create-ImmersiveReaderResource tiene ResourceName, ResourceSubdomainy ResourceLocation como parámetros. Estos parámetros deben ser únicos para cada recurso que se va a crear. Los parámetros restantes deben ser los mismos que los usados al configurar el primer recurso del Lector inmersivo. De esta manera, cada recurso se puede vincular al mismo grupo de recursos de Azure y la aplicación de Microsoft Entra.
En el ejemplo siguiente se muestra cómo crear dos recursos, uno en WestUS y otro en EastUS. Cada recurso tiene valores únicos para ResourceName, ResourceSubdomain y 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>
Incorporación de recursos a la configuración del entorno
En el inicio rápido, ha creado un archivo de configuración de entorno que contiene los parámetros TenantId, ClientId, ClientSecret y Subdomain. Dado que todos los recursos usan la misma aplicación de Microsoft Entra, se pueden usar los mismos valores para TenantId, ClientId y ClientSecret. El único cambio necesario es la enumeración de cada subdominio para cada recurso.
El nuevo archivo .env debería tener ahora un aspecto similar al siguiente:
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}
Nota:
Asegúrese de no confirmar este archivo en el control de código fuente, porque contiene secretos que no deben hacerse públicos.
A continuación, modifique el archivo routes\index.js que ha creado para admitir los múltiples recursos. Sustituya su contenido por el código a continuación.
Como ya ha ocurrido anteriormente, este código crea un punto de conexión de la API que adquiere un token de autenticación de Microsoft Entra mediante la contraseña de la entidad de servicio. Esta vez, permite al usuario especificar una ubicación de recursos y la pasa como un parámetro de consulta. Luego, devuelve un objeto que contiene el token y el subdominio correspondiente.
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;
El punto de conexión de la API de getimmersivereaderlaunchparams debe estar protegido mediante algún tipo de autenticación (por ejemplo, OAuth) para evitar que usuarios no autorizados obtengan tokens y los utilicen en el servicio Immersive Reader y su facturación; este trabajo está fuera del ámbito de este tutorial.
Adición de contenido de ejemplo
Abra el archivo views\index.pug y reemplace el contenido por el código siguiente. Este código rellena la página con contenido de ejemplo y agrega dos botones que inician Immersive Reader. Uno de ellos es para iniciar Immersive Reader para el recurso EastUS, y el otro para el recurso 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://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.");
}
La aplicación web ya está lista. Inicie la aplicación; para ello, ejecute:
npm start
Abra el explorador web y vaya a http://localhost:3000. Debería ver el contenido anterior en la página. Seleccione el botón del Lector inmersivo de EastUS o en el botón del Lector inmersivo de WestUS para iniciar el Lector inmersivo con uno de los respectivos recursos.