Sdílet prostřednictvím

Integrace více prostředků Asistivní čtečka

  • Článek

V přehledu jste se dozvěděli o Asistivní čtečka a o tom, jak implementuje osvědčené techniky ke zlepšení porozumění čtení pro studenty jazyků, nově vznikající čtenáře a studenty s rozdíly ve studiu. V rychlém startu jste zjistili, jak používat Asistivní čtečka s jedním prostředkem. V tomto kurzu se dozvíte, jak integrovat více prostředků Asistivní čtečka do stejné aplikace.

V tomto kurzu se naučíte:

  • Vytvořte více Asistivní čtečka prostředek pod existující skupinou prostředků.
  • Spusťte Asistivní čtečka pomocí více prostředků.

Požadavky

  • Předplatné Azure. Pokud žádné nemáte, vytvořte si bezplatný účet.
  • Jeden Asistivní čtečka prostředek nakonfigurovaný pro ověřování Microsoft Entra. Podle těchto pokynů se řiďte nastavením.
  • Webová aplikace NodeJS, která spouští Asistivní čtečka

Vytvoření několika prostředků

Podle těchto pokynů znovu vytvořte každý prostředek Asistivní čtečka. Skript Create-ImmersiveReaderResource má ResourceNameparametr , ResourceSubdomaina ResourceLocation jako parametry. Tyto parametry by měly být jedinečné pro každý vytvořený prostředek. Zbývající parametry by měly být stejné jako parametry, které jste použili při nastavování prvního Asistivní čtečka prostředku. Každý prostředek tak může být propojený se stejnou skupinou prostředků Azure a aplikací Microsoft Entra.

Následující příklad ukazuje, jak vytvořit dva prostředky, jeden v oblasti WestUS a druhý v oblasti EastUS. Každý prostředek má jedinečné hodnoty pro ResourceName, ResourceSubdomaina 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>

Přidání prostředků do konfigurace prostředí

V rychlém startu jste vytvořili konfigurační soubor prostředí, který obsahuje TenantIdparametry , ClientId, ClientSecreta Subdomain parametry. Vzhledem k tomu, že všechny vaše prostředky používají stejnou aplikaci Microsoft Entra, můžete použít stejné hodnoty pro TenantId, ClientIda ClientSecret. Jedinou změnou, kterou je potřeba provést, je vypsat každou subdoménu pro každý prostředek.

Váš nový soubor .env by teď měl vypadat nějak takto:

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}

Poznámka:

Nezapomeňte tento soubor potvrdit do správy zdrojového kódu, protože obsahuje tajné kódy, které by se neměly zveřejnit.

Dále upravte soubory routes\index.js , které jste vytvořili, aby podporovaly více prostředků. Nahraďte jeho obsah následujícím kódem.

Stejně jako předtím tento kód vytvoří koncový bod rozhraní API, který získá ověřovací token Microsoft Entra pomocí hesla instančního objektu. Tentokrát umožní uživateli zadat umístění prostředku a předat ho jako parametr dotazu. Pak vrátí objekt obsahující token a odpovídající subdoménu.

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;

Koncový getimmersivereaderlaunchparams bod rozhraní API by měl být zabezpečený za určitou formou ověřování (například OAuth), aby zabránil neoprávněným uživatelům v získání tokenů, které se mají použít pro vaši službu Asistivní čtečka a fakturaci. Tato práce je nad rámec tohoto kurzu.

Přidání ukázkového obsahu

Otevřete zobrazení\index.pug a nahraďte jeho obsah následujícím kódem. Tento kód naplní stránku nějakým ukázkovým obsahem a přidá dvě tlačítka, která spustí Asistivní čtečka. Ten, který spustí Asistivní čtečka pro prostředek EastUS a druhý pro prostředek 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.");
    }

Vaše webová aplikace je teď připravená. Spusťte aplikaci spuštěním následujícího příkazu:

npm start

Otevřete prohlížeč a přejděte na http://localhost:3000. Na stránce by se měl zobrazit výše uvedený obsah. Vyberte tlačítko Asistivní čtečka EastUS nebo tlačítko Asistivní čtečka WestUS a spusťte Asistivní čtečka pomocí příslušných prostředků.

Další krok

Prozkoumání sady Asistivní čtečka SDK