Több Modern olvasó erőforrás integrálása

Cikk
03/05/2024

Az áttekintésben megismerkedett a Modern olvasó és azzal, hogyan valósítja meg a nyelvtudást javító bevált technikákat a nyelvtanulók, a feltörekvő olvasók és a tanulási különbségekkel rendelkező diákok számára. A rövid útmutatóban megtanulta, hogyan használhatja a Modern olvasó egyetlen erőforrással. Ez az oktatóanyag bemutatja, hogyan integrálhat több Modern olvasó erőforrást ugyanabban az alkalmazásban.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

Hozzon létre több Modern olvasó erőforrást egy meglévő erőforráscsoportban.
Indítsa el a Modern olvasó több erőforrással.

Előfeltételek

Azure-előfizetés. Ha még nincs előfizetése, hozzon létre egy ingyenes fiókot.
A Microsoft Entra-hitelesítéshez konfigurált egyetlen Modern olvasó erőforrás. A beállításhoz kövesse az alábbi utasításokat .
Egy NodeJS-webalkalmazás, amely Modern olvasó indít el.

Több erőforrás létrehozása

Kövesse ismét ezeket az utasításokat az egyes Modern olvasó erőforrások létrehozásához. A Create-ImmersiveReaderResource szkript paraméterként és ResourceLocation paraméterként is rendelkezikResourceNameResourceSubdomain. Ezeknek a paramétereknek egyedinek kell lenniük minden létrehozott erőforrás esetében. A többi paraméternek meg kell egyeznie az első Modern olvasó erőforrás beállításakor használt paraméterekkel. Így minden erőforrás ugyanahhoz az Azure-erőforráscsoporthoz és a Microsoft Entra-alkalmazáshoz csatolható.

Az alábbi példa bemutatja, hogyan hozhat létre két erőforrást, egyet a WestUS-ban, a másikat pedig az EastUS-ban. Minden erőforrás egyedi értékekkel rendelkezik az , ResourceSubdomainés ResourceLocation.ResourceName

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>

Erőforrások hozzáadása környezetkonfigurációhoz

A rövid útmutatóban létrehozott egy környezeti konfigurációs fájlt, amely tartalmazza a TenantId, ClientId, ClientSecret, és Subdomain paramétereket. Mivel minden erőforrása ugyanazt a Microsoft Entra-alkalmazást használja, ugyanazokat az értékeket használhatja a , ClientIdés ClientSecret.TenantId Az egyetlen módosítás, amelyet végre kell hozni, az egyes erőforrások altartományainak listázása.

Az új .env fájlnak a következőképpen kell kinéznie:

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}

Feljegyzés

Ügyeljen arra, hogy ne véglegesítse ezt a fájlt a forrásvezérlőbe, mert olyan titkos kulcsokat tartalmaz, amelyeket nem szabad nyilvánossá tenni.

Ezután módosítsa a létrehozott útvonalak\index.js fájlt a több erőforrás támogatásához. Cserélje le a tartalmát a következő kódra.

Mint korábban, ez a kód létrehoz egy API-végpontot, amely egy Microsoft Entra hitelesítési jogkivonatot szerez be a szolgáltatásnév jelszavával. Ez alkalommal lehetővé teszi a felhasználó számára egy erőforrás helyének megadását és lekérdezési paraméterként való átadását. Ezután visszaad egy objektumot, amely tartalmazza a jogkivonatot és a megfelelő altartományt.

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;

Az getimmersivereaderlaunchparams API-végpontot valamilyen hitelesítés (például OAuth) mögött kell védeni, hogy a jogosulatlan felhasználók ne szerezhessenek be jogkivonatokat a Modern olvasó szolgáltatással és számlázással kapcsolatban; ez a munka meghaladja az oktatóanyag hatókörét.

Mintatartalom hozzáadása

Nyissa meg a views\index.pug fájlt, és cserélje le a tartalmát a következő kódra. Ez a kód feltölti a lapot néhány mintatartalommal, és hozzáad két gombot, amelyek elindítják a Modern olvasó. Az EastUS-erőforráshoz Modern olvasó, a WestUS-erőforráshoz pedig egy másikat.

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

A webalkalmazás készen áll. Indítsa el az alkalmazást a következő futtatásával:

npm start

Nyissa meg a böngészőt, és keresse meg a következőt http://localhost:3000: . A fenti tartalomnak meg kell jelennie a lapon. Válassza az EastUS Modern olvasó vagy a WestUS Modern olvasó gombot a Modern olvasó az adott erőforrások használatával történő elindításához.

Következő lépés

A Modern olvasó SDK felfedezése

Share via