Birden çok Tam Ekran Okuyucu kaynağını tümleştirme
Genel bakış bölümünde Tam Ekran Okuyucu ve dil öğrenenler, yeni ortaya çıkan okuyucular ve öğrenme farklılıkları olan öğrenciler için okuma kavramayı geliştirmek için kanıtlanmış teknikleri nasıl uyguladığını öğrendiniz. Hızlı başlangıçta, Tam Ekran Okuyucu tek bir kaynakla kullanmayı öğrendiniz. Bu öğreticide, aynı uygulamada birden çok Tam Ekran Okuyucu kaynağının nasıl tümleştirileyeceksiniz?
Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:
- Var olan bir kaynak grubunun altında birden çok Tam Ekran Okuyucu kaynağı oluşturun.
- Birden çok kaynak kullanarak Tam Ekran Okuyucu başlatın.
Önkoşullar
- Azure aboneliği. Aboneliğiniz yoksa ücretsiz bir hesap oluşturun.
- Microsoft Entra kimlik doğrulaması için yapılandırılmış tek bir Tam Ekran Okuyucu kaynağı. Ayarlamak için bu yönergeleri izleyin.
- Tam Ekran Okuyucu başlatan bir NodeJS web uygulaması.
Birden çok kaynak oluşturma
Her Tam Ekran Okuyucu kaynağı oluşturmak için bu yönergeleri yeniden izleyin. Betikte ResourceNameCreate-ImmersiveReaderResource parametre olarak , ResourceSubdomainve ResourceLocation bulunur. Bu parametreler, oluşturulan her kaynak için benzersiz olmalıdır. Kalan parametreler, ilk Tam Ekran Okuyucu kaynağınızı ayarlarken kullandığınız parametrelerle aynı olmalıdır. Bu şekilde her kaynak aynı Azure kaynak grubuna ve Microsoft Entra uygulamasına bağlanabilir.
Aşağıdaki örnekte biri WestUS'ta, diğeri EastUS'ta olmak üzere iki kaynağın nasıl oluşturulacağı gösterilmektedir. Her kaynağın , ResourceSubdomainve ResourceLocationiçin ResourceNamebenzersiz değerleri vardır.
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>
Ortam yapılandırmasına kaynak ekleme
Hızlı başlangıçta , , ClientIdClientSecretve Subdomain parametrelerini içeren TenantIdbir ortam yapılandırma dosyası oluşturdunuz. Tüm kaynaklarınız aynı Microsoft Entra uygulamasını kullandığından, , ClientIdve ClientSecretiçin TenantIdaynı değerleri kullanabilirsiniz. Yapılması gereken tek değişiklik, her kaynak için her alt etki alanını listelemektir.
Yeni .env dosyanız şu şekilde görünmelidir:
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}
Not
Genel kullanıma açık olmaması gereken gizli diziler içerdiği için bu dosyayı kaynak denetimine işlememeye dikkat edin.
Ardından, oluşturduğunuz routes\index.js dosyasını birden çok kaynağınızı destekleyecek şekilde değiştirin. İçeriğini aşağıdaki kodla değiştirin.
Daha önce olduğu gibi bu kod, hizmet sorumlusu parolanızı kullanarak Microsoft Entra kimlik doğrulama belirtecini alan bir API uç noktası oluşturur. Bu kez kullanıcının bir kaynak konumu belirtmesine ve bunu sorgu parametresi olarak geçirmesine olanak tanır. Ardından belirteci ve karşılık gelen alt etki alanını içeren bir nesne döndürür.
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 uç noktası, yetkisiz kullanıcıların Tam Ekran Okuyucu hizmetinize ve faturalamanıza karşı kullanılacak belirteçleri almasını önlemek için bir kimlik doğrulaması biçiminin (örneğin, OAuth) arkasında güvenli hale getirilmelidir; bu iş bu öğreticinin kapsamı dışındadır.
Örnek içerik ekleme
views\index.pug dosyasını açın ve içeriğini aşağıdaki kodla değiştirin. Bu kod sayfayı bazı örnek içeriklerle doldurur ve Tam Ekran Okuyucu başlatan iki düğme ekler. Biri EastUS kaynağı için Tam Ekran Okuyucu, diğeri ise WestUS kaynağı için başlatılır.
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 uygulamanız artık hazır. Aşağıdakini çalıştırarak uygulamayı başlatın:
npm start
Tarayıcınızı açın ve adresine http://localhost:3000gidin. Yukarıdaki içeriği sayfada görmeniz gerekir. İlgili kaynakları kullanarak Tam Ekran Okuyucu başlatmak için EastUS Tam Ekran Okuyucu düğmesini veya WestUS Tam Ekran Okuyucu düğmesini seçin.