Compartir a través de


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

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.

Paso siguiente