Integrera flera Immersive Reader-resurser

2025-04-07

I översikten har du lärt dig om Avancerad läsare och hur den implementerar beprövade tekniker för att förbättra läsförståelsen för språkinlärare, nya läsare och elever med inlärningsskillnader. I snabbstarten lärde du dig hur du använder Immersive Reader med en enda resurs. Den här självstudien beskriver hur du integrerar flera resurser för Immersiv läsare i samma program.

I den här handledningen lär du dig:

Skapa flera Immersive Reader-resurser under en befintlig resursgrupp.
Starta Uppslukande läsare med hjälp av flera resurser.

Förutsättningar

Prenumeration på Azure. Om du inte har en skapar du ett kostnadsfritt konto.
En enda resurs för Immersive Reader som konfigurerats för Microsoft Entra-autentisering. Följ de här anvisningarna för att konfigurera.
En Node.js webbapp som startar Interaktiv läsare.

Skapa flera resurser

Följ de här anvisningarna igen för att skapa varje Immersiv läsarresurs. Skriptet Create-ImmersiveReaderResource har ResourceName, ResourceSubdomainoch ResourceLocation som parametrar. Dessa parametrar bör vara unika för varje resurs som skapas. De återstående parametrarna bör vara desamma som du använde när du konfigurerade din första resurs för Immersive Reader. På så sätt kan varje resurs länkas till samma Azure-resursgrupp och Microsoft Entra-program.

I följande exempel visas hur du skapar två resurser, en i WestUS och en annan i EastUS. Varje resurs har unika värden för ResourceName, ResourceSubdomainoch 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>

Lägga till resurser i miljökonfigurationen

I snabbstarten skapade du en miljökonfigurationsfil som innehåller parametrarna TenantId, ClientId, ClientSecretoch Subdomain . Eftersom alla dina resurser använder samma Microsoft Entra-program kan du använda samma värden för TenantId, ClientIdoch ClientSecret. Den enda ändring som behöver göras är att lista varje underdomän för varje resurs.

Den nya .env-filen bör nu se ut ungefär så här:

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}

Anteckning

Se till att du inte checkar in den här filen i källkontrollen eftersom den innehåller hemligheter som inte bör offentliggöras.

Ändra sedan filen routes\index.js som du skapade för att stödja dina flera resurser. Ersätt innehållet med följande kod.

Precis som tidigare skapar den här koden en API-slutpunkt som hämtar en autentiseringstoken för Microsoft Entra med hjälp av ditt lösenord för tjänstens huvudkonto. Den här gången kan användaren ange en resursplats och skicka in den som en frågeparameter. Sedan returneras ett objekt som innehåller token och motsvarande underdomän.

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;

getimmersivereaderlaunchparams API-slutpunkten bör skyddas bakom någon form av autentisering (till exempel OAuth) för att förhindra obehöriga användare från att hämta token att använda mot din Uppslukande läsare-tjänst och för fakturering. Det arbetet ligger utanför omfånget för den här handledningen.

Lägga till exempelinnehåll

Öppna views\index.pug och ersätt innehållet med följande kod. Den här koden fyller sidan med exempelinnehåll och lägger till två knappar som startar Avancerad läsare. En som startar Avancerad läsare för EastUS-resursen och en annan för WestUS-resursen .

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.");
    }

Webbappen är nu klar. Starta appen genom att köra:

npm start

Öppna din webbläsare och gå till http://localhost:3000. Du bör se innehållet ovan på sidan. Välj antingen knappen EastUS Avancerad läsare eller knappen WestUS Avancerad läsare för att starta Avancerad läsare med hjälp av respektive resurser.

Gå vidare

Utforska "Immersive Reader" SDK