Partager via


Intégrer plusieurs ressources Lecteur immersif

Dans la présentation, vous avez appris sur le Lecteur immersif et comment il implémente des techniques éprouvées pour améliorer la compréhension de la lecture pour les apprenants en langue, les lecteurs émergents et les étudiants présentant des difficultés d’apprentissage. Dans le démarrage rapide, vous avez appris à utiliser le Lecteur immersif avec une seule ressource. Ce tutoriel explique comment intégrer plusieurs ressources du Lecteur immersif dans la même application.

Dans ce tutoriel, vous allez apprendre à :

  • Créer plusieurs ressources Lecteur immersif dans un groupe de ressources existant.
  • Lancer le Lecteur immersif avec plusieurs ressources.

Prérequis

  • Un abonnement Azure. Si vous n’en avez pas, créez un compte gratuit.
  • Une ressource unique Immersive Reader configurée pour l’authentification Microsoft Entra. Suivez ces instructions pour la configurer.
  • Une application web NodeJS qui lance le lecteur immersif.

Créer plusieurs ressources

Suivez ces instructions à nouveau pour créer chaque ressource Lecteur immersif. Le script Create-ImmersiveReaderResource a pour paramètres ResourceName, ResourceSubdomain et ResourceLocation. Ces paramètres doivent être uniques pour chaque ressource créée. Les autres paramètres doivent être les mêmes que ceux que vous avez utilisés pour configurer votre première ressource Lecteur immersif. De cette façon, chaque ressource peut être liée au même groupe de ressources Azure et à la même application Microsoft Entra.

L’exemple suivant montre comment créer deux ressources, l’une dans WestUS et l’autre dans EastUS. Chaque ressource a des valeurs uniques pour ResourceName, ResourceSubdomain et 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>

Ajouter des ressources à la configuration de l’environnement

Dans le guide de démarrage rapide, vous avez créé un fichier de configuration de l’environnement contenant les paramètres TenantId, ClientId, ClientSecret et Subdomain. Étant donné que toutes vos ressources utilisent la même application Microsoft Entra, vous pouvez utiliser les mêmes valeurs pour TenantId, ClientId, et ClientSecret. Le seul changement à faire est de lister chaque sous-domaine pour chaque ressource.

Votre nouveau fichier .env doit maintenant ressembler à :

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}

Remarque

Ne validez pas ce fichier dans le contrôle de code source, car il contient des secrets qui ne doivent pas être rendus publics.

Ensuite, modifiez le fichier routes\index.js que vous avez créé pour prendre en charge vos ressources multiples. Remplacez le contenu de ce fichier par le code ci-dessous.

Comme auparavant, ce code crée un point de terminaison d'API qui acquiert un jeton d'authentification Microsoft Entra à l'aide de votre mot de passe principal de service. Cette fois-ci, il permet à l’utilisateur de spécifier un emplacement de ressource et de le passer en tant que paramètre de requête. Le code retourne ensuite un objet contenant le jeton et le sous-domaine correspondant.

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;

Le point de terminaison d’API getimmersivereaderlaunchparams doit être sécurisé avec une certaine forme d’authentification (par exemple, OAuth) pour empêcher les utilisateurs non autorisés d’obtenir des jetons à utiliser auprès de vos services Facturation et Lecteur immersif ; ce travail dépasse le cadre de ce tutoriel.

Ajouter un contenu exemple

Ouvrez views\index.pug, puis remplacez son contenu par le code suivant. Ce code remplit la page avec un exemple de contenu et ajoute deux boutons qui lancent le Lecteur immersif. Un qui lance le lecteur immersif pour la ressource EastUS et un autre pour la ressource 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.");
    }

Votre application web est maintenant prête. Démarrez l’application en exécutant :

npm start

Ouvrez votre navigateur et accédez à http://localhost:3000. Vous devez voir le contenu ci-dessus dans la page. Sélectionnez le bouton EastUS Immersive Reader ou le bouton WestUS Immersive Reader pour lancer Immersive Reader en utilisant ces ressources respectives.

Étape suivante