birden çok Tam Ekran Okuyucu kaynağını tümleştirme
genel bakışta, Tam Ekran Okuyucu ne olduğunu ve dil öğrenimi, gelişmekte olan okuyucular ve öğrenme farklılığı olan öğrenciler için okuma kavramasını geliştirmek üzere kendini kanıtlamış tekniklerin nasıl uyguladığını öğrendiniz. hızlıbaşlangıçta, tek bir kaynakla Tam Ekran Okuyucu kullanmayı öğrendiniz. bu öğreticide, aynı uygulamadaki birden çok Tam Ekran Okuyucu kaynağını tümleştirme ele alınmaktadır. Bu öğreticide şunların nasıl yapıldığını öğreneceksiniz:
- var olan bir kaynak grubu altında birden çok Tam Ekran Okuyucu kaynağı oluşturma
- birden çok kaynak kullanarak Tam Ekran Okuyucu başlatın
Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.
Önkoşullar
- Tam Ekran Okuyucu nodejs ile başlatan bir web uygulaması oluşturmak için hızlı başlangıcı izleyin. bu hızlı başlangıçta, tek bir Tam Ekran Okuyucu kaynağı yapılandırırsınız. Bu öğreticide bunun üzerine oluşturacağız.
Tam Ekran Okuyucu kaynaklarını oluşturma
her bir Tam Ekran Okuyucu kaynağını oluşturmak için bu yönergeleri izleyin. Create-ImmersiveReaderResource betiği,, ResourceName ResourceSubdomain ve ResourceLocation olarak parametreler içerir. Bunlar, oluşturulmakta olan her kaynak için benzersiz olmalıdır. kalan parametrelerin ilk Tam Ekran Okuyucu kaynağını ayarlarken kullandığınız şekilde aynı olması gerekir. Bu şekilde, her bir kaynak aynı Azure Kaynak grubu ve Azure AD uygulaması ile bağlantılı olabilir.
Aşağıdaki örnekte, biri WestUS ve diğeri EastUS içinde olmak üzere iki kaynağın nasıl oluşturulacağı gösterilmektedir. , Ve için benzersiz değerlere dikkat edin ResourceName ResourceSubdomain ResourceLocation .
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME> `
-ResourceName Resource_name_wus `
-ResourceSubdomain resource-subdomain-wus `
-ResourceSKU <RESOURCE_SKU> `
-ResourceLocation westus `
-ResourceGroupName <RESOURCE_GROUP_NAME> `
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION> `
-AADAppDisplayName <AAD_APP_DISPLAY_NAME> `
-AADAppIdentifierUri <AAD_APP_IDENTIFIER_URI> `
-AADAppClientSecret <AAD_APP_CLIENT_SECRET>
Create-ImmersiveReaderResource
-SubscriptionName <SUBSCRIPTION_NAME> `
-ResourceName Resource_name_eus `
-ResourceSubdomain resource-subdomain-eus `
-ResourceSKU <RESOURCE_SKU> `
-ResourceLocation eastus `
-ResourceGroupName <RESOURCE_GROUP_NAME> `
-ResourceGroupLocation <RESOURCE_GROUP_LOCATION> `
-AADAppDisplayName <AAD_APP_DISPLAY_NAME> `
-AADAppIdentifierUri <AAD_APP_IDENTIFIER_URI> `
-AADAppClientSecret <AAD_APP_CLIENT_SECRET>
Ortam yapılandırmasına kaynak ekleme
Hızlı başlangıçta,,, ve parametrelerini içeren bir ortam yapılandırma dosyası oluşturdunuz TenantId ClientId ClientSecret Subdomain . Tüm kaynaklarınız aynı Azure AD uygulamasını kullandığından, ve için aynı değerleri kullanabiliriz TenantId ClientId ClientSecret . Yapılması gereken tek değişiklik her bir kaynak için her bir alt etki alanını listeme amaçlıdır.
Yeni . env dosyanız şimdi aşağıdakine benzer 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}
Ortak olmaması gereken gizli dizileri içerdiğinden, bu dosyayı kaynak denetimine yürütmemeyi unutmayın.
Daha sonra, oluşturduğum routes\index.js dosyayı, birden çok kaynaklarımızı destekleyecek şekilde değiştirmektir. İçeriğini aşağıdaki kodla değiştirin.
Daha önce olduğu gibi, bu kod hizmet sorumlusu parolanızı kullanarak bir Azure AD kimlik doğrulama belirteci alan bir API uç noktası oluşturur. Bu kez, kullanıcının bir kaynak konumu belirtmesini ve bunu bir sorgu parametresi olarak iletmesini sağlar. Ardından, belirteci ve ilgili 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 apı uç noktası, yetkisiz kullanıcıların Tam Ekran Okuyucu hizmetinize ve faturalandırmaya karşı kullanım belirteçleri almasını engellemek için bazı kimlik doğrulama (örneğin, OAuth) arkasından güvenli olmalıdır; Bu iş, Bu öğreticinin kapsamı dışındadır.
örnek içerikle Tam Ekran Okuyucu başlatın
Views\ındex.Pug dosyasını açın ve içeriğini aşağıdaki kodla değiştirin. bu kod, sayfayı bazı örnek içerikle doldurur ve Tam Ekran Okuyucu başlatan iki düğme ekler. biri, EastUS kaynağı için Tam Ekran Okuyucu ve diğer bir WestUS kaynağı için bir diğeri.
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://contentstorage.onenote.office.net/onenoteltir/immersivereadersdk/immersive-reader-sdk.1.0.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://docs.microsoft.com/azure/cognitive-services/immersive-reader/reference#chunk const data = { title: $("#ir-title").text(), chunks: [{ content: $("#ir-content").html(), mimeType: "text/html" }] }; // Learn more about options https://docs.microsoft.com/azure/cognitive-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 Uygulamam artık hazır. Uygulamayı çalıştırarak başlatın:
npm startTarayıcınızı açın ve adresine gidin
http://localhost:3000. Sayfada Yukarıdaki içeriği görmeniz gerekir. bu ilgili kaynakları kullanarak Tam Ekran Okuyucu başlatmak için EastUS Tam Ekran Okuyucu düğmesine veya WestUS Tam Ekran Okuyucu düğmesine tıklayın.
Sonraki adımlar
- Tam Ekran Okuyucu sdk ve Tam Ekran Okuyucu sdk başvurusunu keşfet
- GitHub kod örneklerini görüntüle