你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

集成多个沉浸式阅读器资源

项目
09/03/2024

在概述中，你了解了沉浸式阅读器以及它如何实施经过验证的技术以提高语言学习者、新兴读者和有学习差异的学生的阅读理解能力。在快速入门中，你学习了如何将沉浸式阅读器与单个资源配合使用。本教程介绍如何将多个沉浸式阅读器资源集成到同一个应用程序中。

本教程介绍如何执行下列操作：

在现有资源组下创建多个沉浸式阅读器资源。
使用多个资源启动沉浸式阅读器。

先决条件

Azure 订阅。如果没有帐户，请创建一个免费帐户。
为 Microsoft Entra 身份验证配置的单个沉浸式阅读器资源。按照这些说明进行设置。
用于启动沉浸式阅读器的 NodeJS Web 应用。

创建多个资源

再次按照这些说明操作，创建每个沉浸式阅读器资源。 Create-ImmersiveReaderResource 脚本包含参数 ResourceName、ResourceSubdomain 和 ResourceLocation。对于创建的每个资源，这些参数应该独一无二。其余参数应与设置第一个沉浸式阅读器资源时使用的参数相同。这样一来，每个资源都可以关联到同一个 Azure 资源组和 Microsoft Entra 应用程序。

下面的示例演示如何创建两个资源，一个在 WestUS 中，另一个在 EastUS 中。每个资源都有唯一的 ResourceName、ResourceSubdomain 和 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>

向环境配置添加资源

在快速入门中，你创建了一个包含 TenantId、ClientId、ClientSecret 和 Subdomain 参数的环境配置文件。由于所有资源都使用相同的 Microsoft Entra 应用程序，因此可以对 TenantId、ClientId 和 ClientSecret 使用相同的值。需要做的唯一更改是列出每个资源的每个子域。

新的 .env 文件现在应如下所示：

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}

注意

请确保不要将此文件提交到源代码管理中，因为它包含不应公开的机密。

接下来，修改创建的 routes\index.js 文件，使之支持多个资源。将其内容替换为以下代码。

与之前一样，此代码创建一个 API 终结点，该终结点使用服务主体密码获取 Microsoft Entra 身份验证令牌。这一次，它使用户能够指定资源位置，并将其作为查询参数传入。然后它返回一个包含令牌和相应子域的对象。

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 终结点应该以某种形式的身份验证（例如，OAuth）进行保护，防止未经授权的用户获取令牌并将其用于你的沉浸式阅读器服务和计费；该内容超出了本教程的范围。

添加示例内容

打开 views\index.pug，并将其内容替换为以下代码。此代码使用一些示例内容填充页面，并添加两个启动沉浸式阅读器的按钮。一个用于启动 EastUS 资源的沉浸式阅读器，另一个用于 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.");
    }

Web 应用现已准备就绪。运行以下命令以启动该应用：

npm start

打开浏览器并导航到 http://localhost:3000。你应该可以在页面上看到以上内容。选择“EastUS 沉浸式阅读器”按钮或“WestUS 沉浸式阅读器”按钮，使用相应的资源启动沉浸式阅读器。

下一步

浏览沉浸式阅读器 SDK

通过

集成多个沉浸式阅读器资源

先决条件

创建多个资源

向环境配置添加资源

添加示例内容

下一步

反馈

其他资源