Azure Mobile Apps için JavaScript istemci kitaplığını kullanma
Genel Bakış
Bu kılavuz, Azure Mobile Apps için en son JavaScript SDK'sını kullanarak yaygın senaryolar gerçekleştirmeyi öğretir. Azure Mobile Apps'i kullanmaya yeni başladıysanız, bir arka uç oluşturmak ve bir tablo oluşturmak için önce Azure Mobile Apps Hızlı Başlangıç'ı tamamlayın. Bu kılavuzda, HTML/JavaScript Web uygulamalarında mobil arka ucu kullanmaya odaklanacağız.
Desteklenen platformlar
Tarayıcı desteğini başlıca tarayıcıların geçerli ve son sürümleriyle sınırlandırıyoruz: Google Chrome, Microsoft Edge, Microsoft Internet Explorer ve Mozilla Firefox. SDK'nın görece modern tarayıcılarla çalışmasını bekliyoruz.
Paket Evrensel JavaScript Modülü olarak dağıtıldığı için genel, AMD ve CommonJS biçimlerini destekler.
Kurulum ve önkoşullar
Bu kılavuzda, tabloyla bir arka uç oluşturduğunuz varsayılır. Bu kılavuzda, tablonun bu öğreticilerdeki tablolarla aynı şemaya sahip olduğu varsayılır.
Azure Mobile Apps JavaScript SDK'sını yüklemek şu komut aracılığıyla npm yapılabilir:
npm install azure-mobile-apps-client --save
Kitaplık, Browserify ve Webpack gibi CommonJS ortamlarında ve AMD kitaplığı olarak bir ES2015 modülü olarak da kullanılabilir. Örnek:
// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';
Doğrudan CDN'mizden indirerek SDK'nın önceden oluşturulmuş bir sürümünü de kullanabilirsiniz:
<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>
İstemci bağlantısı oluşturma
Bir WindowsAzure.MobileServiceClient nesnesi oluşturarak istemci bağlantısı oluşturun. appUrl ifadesini Mobile Uygulamanızın URL’si ile değiştirin.
var client = WindowsAzure.MobileServiceClient(appUrl);
Tablolarla çalışma
Verilere erişmek veya verileri güncelleştirmek için arka uç tablosuna başvuru oluşturun. tableName ifadesini tablonuzun adıyla değiştirin
var table = client.getTable(tableName);
Bir tablo başvurusu oluşturduktan sonra tablonuzla başka işlemler yapabilirsiniz:
Nasıl yapılır: Tablo başvurusu sorgulama
Bir tablo başvurusu oluşturduktan sonra sunucudaki verileri sorgulamak için kullanabilirsiniz. Sorgular "LINQ benzeri" bir dilde yapılır. Tablodan tüm verileri döndürmek için aşağıdaki kodu kullanın:
/**
* Process the results that are received by a call to table.read()
*
* @param {Object} results the results as a pseudo-array
* @param {int} results.length the length of the results array
* @param {Object} results[] the individual results
*/
function success(results) {
var numItemsRead = results.length;
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Each row is an object - the properties are the columns
}
}
function failure(error) {
throw new Error('Error loading data: ', error);
}
table
.read()
.then(success, failure);
Sonuçlarla birlikte başarı işlevi çağrılır. Başarı işlevinde for (var i in results) öğesini kullanmayın, aksi takdirde diğer sorgu işlevleri (.includeTotalCount() gibi) kullanıldığında sonuçlara eklenen bilgilerin üzerine yinelenir.
Sorgu söz dizimi hakkında daha fazla bilgi için [Query nesnesi belgelerine] bakın.
Sunucu üzerindeki verileri filtreleme
Tablo başvurusunda bir where yan tümcesi kullanabilirsiniz:
table
.where({ userId: user.userId, complete: false })
.read()
.then(success, failure);
Ayrıca, nesneyi filtreleyen bir işlev de kullanabilirsiniz. Bu durumda, this değişkeni filtre uygulanan geçerli nesneye atanır. Aşağıdaki kod önceki örnek ile işlevsel olarak eşdeğerdir:
function filterByUserId(currentUserId) {
return this.userId === currentUserId && this.complete === false;
}
table
.where(filterByUserId, user.userId)
.read()
.then(success, failure);
Verileri sayfalama
take() ve skip() yöntemlerini kullanın. Örneğin, tabloyu 100 satırlı kayıtlara bölmek istiyorsanız:
var totalCount = 0, pages = 0;
// Step 1 - get the total number of records
table.includeTotalCount().take(0).read(function (results) {
totalCount = results.totalCount;
pages = Math.floor(totalCount/100) + 1;
loadPage(0);
}, failure);
function loadPage(pageNum) {
let skip = pageNum * 100;
table.skip(skip).take(100).read(function (results) {
for (var i = 0 ; i < results.length ; i++) {
var row = results[i];
// Process each row
}
}
}
Sonuç nesnesine bir totalCount alanı eklemek için .includeTotalCount() yöntemi kullanılır. Sayfalama kullanılmazsa döndürülecek toplam kayıt sayısı TotalCount alanına doldurulur.
Bir sayfa listesi sağlamak için pages değişkenini ve bazı kullanıcı arabirimi düğmelerini kullanabilirsiniz; her sayfanın yeni kayıtlarını yüklemek için loadPage() seçeneğini kullanın. Daha önce yüklenmiş kayıtlara hızlı erişim için önbelleğe almayı uygulayın.
Nasıl yapılır: Sıralanmış veriler döndürme
.orderBy() veya .orderByDescending() sorgu yöntemlerini kullanın:
table
.orderBy('name')
.read()
.then(success, failure);
Query nesnesi hakkında daha fazla bilgi için [Query nesnesi belgelerine] bakın.
Nasıl yapılır: Veri ekleme
Uygun tarihle bir JavaScript nesnesi oluşturun ve table.insert() öğesini zaman uyumsuz olarak çağırın:
var newItem = {
name: 'My Name',
signupDate: new Date()
};
table
.insert(newItem)
.done(function (insertedItem) {
var id = insertedItem.id;
}, failure);
Ekleme başarılı olduğunda, eklenen öğe eşitleme işlemleri için gereken diğer alanlarla birlikte döndürülür. Sonraki güncelleştirmeler için önbelleğinizi bu bilgilerle güncelleştirin.
Azure Mobile Apps Node.js Sunucu SDK’sı, geliştirme için dinamik şemayı destekler. Dinamik Şema, bir insert veya update işleminde sütun belirterek tabloya sütun eklemenize olanak tanır. Uygulamanızı üretime taşımadan önce dinamik şemanın kapatılması önerilir.
Nasıl yapılır: Verileri değiştirme
.insert() yöntemine benzer şekilde, bir Update nesnesi oluşturup .update() öğesini çağırmanız gerekir. Update nesnesi, güncelleştirilecek kaydın kimliğini içermelidir; bu kimlik, kayıt okunurken veya .insert() çağrılırken elde edilir.
var updateItem = {
id: '7163bc7a-70b2-4dde-98e9-8818969611bd',
name: 'My New Name'
};
table
.update(updateItem)
.done(function (updatedItem) {
// You can now update your cached copy
}, failure);
Nasıl yapılır: Veri silme
Bir kaydı silmek için .del() yöntemini çağırın. Kimliği bir nesne başvurusuna geçirin:
table
.del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
.done(function () {
// Record is now deleted - update your cache
}, failure);
Nasıl yapılır: Kullanıcıların kimliğini doğrulama
Azure App Service, çeşitli dış kimlik sağlayıcılarını kullanarak uygulama kullanıcılarının kimliğini doğrulamayı ve yetkilendirmeyi destekler: Facebook, Google, Microsoft Hesabı ve Twitter. Belirli işlemlere erişimi yalnızca kimliği doğrulanmış kullanıcılarla sınırlandırmak için tablolarda izinler ayarlayabilirsiniz. Sunucu betiklerinde yetkilendirme kuralları uygulamak için kimliği doğrulanmış kullanıcıların kimliğini de kullanabilirsiniz. Daha fazla bilgi için kimlik doğrulamasını kullanmaya başlama öğreticisine bakın.
İki kimlik doğrulama akışı desteklenir: sunucu akışı ve istemci akışı. Sunucu akışı, sağlayıcının web kimlik doğrulaması arabirimini temel alan en basit kimlik doğrulama deneyimini sağlar. İstemci akışı, sağlayıcıya özgü SDK'lara bağlı olduğundan çoklu oturum açma gibi cihaza özgü özelliklerle daha derin tümleştirme sağlar.
Nasıl yapılır: Bir sağlayıcı ile (Sunucu Akışı) kimlik doğrulaması
Mobile Apps hizmetinin uygulamanızdaki kimlik doğrulama işlemini yönetmesi için kimlik sağlayıcınıza uygulamanızı kaydetmeniz gerekir. Ardından, Azure App Service'te sağlayıcınız tarafından verilen uygulama kimliği ile parolasını yapılandırmanız gerekir. Daha fazla bilgi için Uygulamanıza kimlik doğrulaması ekleme öğreticisine bakın.
Kimlik sağlayıcınızı kaydettikten sonra sağlayıcınızın adıyla .login() yöntemini çağırın. Örneğin, Facebook ile oturum açmak için aşağıdaki kodu kullanın:
client.login("facebook").done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
'aad', 'facebook', 'google', 'microsoftaccount' ve 'twitter', sağlayıcı için geçerli değerlerdir.
Not
Google Kimlik Doğrulaması şu anda Sunucu Akışı ile çalışmamaktadır. Google kimlik doğrulamasını yapmak için bir istemci akışı yöntemi kullanmanız gerekir.
Bu durumda, OAuth 2.0 kimlik doğrulama akışını Azure App Service yönetir. Seçilen sağlayıcının oturum açma sayfasını görüntüler ve kimlik sağlayıcısıyla başarılı bir şekilde oturum açıldıktan sonra App Service kimlik doğrulama belirteci oluşturur. Oturum açma işlevi tamamlandığında, hem kullanıcı kimliğini hem de App Service kimlik doğrulama belirtecini sırasıyla userId ve authenticationToken alanlarında ortaya çıkaran bir JSON nesnesi döndürür. Bu belirteç önbelleğe alınabilir süresi sona erene kadar yeniden kullanılabilir.
Nasıl yapılır: Bir sağlayıcı ile (İstemci Akışı) kimlik doğrulaması
Uygulamanız kimlik sağlayıcısı ile bağımsız olarak da iletişim kurabilir ve sonra döndürülen belirteci kimlik doğrulaması için App Service’e döndürebilir. Bu istemci akışı, kullanıcılar için çoklu oturum açma deneyimi sağlamanıza veya kimlik sağlayıcısından ek kullanıcı verileri almanıza olanak tanır.
Sosyal Kimlik Doğrulaması temel örneği
Bu örnekte kimlik doğrulaması için Facebook istemci SDK’sı kullanılır:
client.login(
"facebook",
{"access_token": token})
.done(function (results) {
alert("You are now signed in as: " + results.userId);
}, function (err) {
alert("Error: " + err);
});
Bu örnek, ilgili sağlayıcı SDK’sı tarafından sağlanan belirtecin belirteç değişkenine depolandığını varsayar.
Nasıl yapılır: Kimliği doğrulanmış kullanıcı hakkında bilgi edinme
Kimlik doğrulama bilgileri, herhangi bir AJAX kitaplığı ile HTTP çağrısı kullanılarak /.auth/me uç noktasından alınabilir. X-ZUMO-AUTH üst bilgisini kimlik doğrulama belirtecinize ayarlandığınızdan emin olun. Kimlik doğrulama belirteci client.currentUser.mobileServiceAuthenticationToken içine depolanır. Örneğin, fetch API’sini kullanmak için:
var url = client.applicationUrl + '/.auth/me';
var headers = new Headers();
headers.append('X-ZUMO-AUTH', client.currentUser.mobileServiceAuthenticationToken);
fetch(url, { headers: headers })
.then(function (data) {
return data.json()
}).then(function (user) {
// The user object contains the claims for the authenticated user
});
Fetch, bir npm paketi olarak mevcuttur veya CDNJS’den tarayıcı ile indirilebilir. Bilgileri getirmek için jQuery veya başka bir AJAX API’si de kullanabilirsiniz. Veriler bir JSON nesnesi olarak alınır.
Nasıl yapılır: Mobil App Service dış yeniden yönlendirme URL'leri için yapılandırma.
Birçok javascript uygulaması türü, OAuth UI akışlarını işlemek için bir geri döngü özelliği kullanır. Bu özellikler şunları içerir:
- Hizmetinizi yerel olarak çalıştırma
- Ionic Framework ile Canlı Yeniden Yükleme Kullanma
- Kimlik doğrulaması için App Service yönlendiriliyor.
Varsayılan olarak App Service kimlik doğrulaması yalnızca Mobil Uygulama arka ucunuzdan erişime izin verecek şekilde yapılandırıldığından yerel olarak çalışmak sorunlara neden olabilir. Sunucuyu yerel olarak çalıştırırken kimlik doğrulamasını etkinleştirmek üzere App Service ayarlarını değiştirmek için aşağıdaki adımları kullanın:
Azure portalı’nda oturum açın
Mobil Uygulama arka ucuna gidin.
GELİM ARAÇLARI menüsünde Kaynak gezgini'ni seçin.
Mobil Uygulama arka ucunuzun kaynak gezginini yeni bir sekmede veya pencerede açmak için Git'e tıklayın.
Uygulamanızın config>authsettings düğümünü genişletin.
Kaynağın düzenlenmesini etkinleştirmek için Düzenle düğmesine tıklayın.
null olması gereken allowedExternalRedirectUrls öğesini bulun. URL'lerinizi bir diziye ekleyin:
"allowedExternalRedirectUrls": [ "https://localhost:3000", "https://localhost:3000" ],Dizideki URL'leri, yerel Node.js örnek hizmeti için olan
https://localhost:3000hizmetinizin URL'leriyle değiştirin. Uygulamanızın nasıl yapılandırıldığına bağlı olarak Ripple hizmeti veya başka bir URL için de kullanabilirsinizhttps://localhost:4400.Sayfanın üst kısmında Okuma/Yazma'ya ve ardından PUT'a tıklayarak güncelleştirmelerinizi kaydedin.
CorS izin verilenler listesi ayarlarına aynı geri döngü URL'lerini de eklemeniz gerekir:
- Azure portal dönün.
- Mobil Uygulama arka ucuna gidin.
- API menüsünde CORS'ye tıklayın.
- Her URL'yi boş İzin Verilen Kaynaklar metin kutusuna girin. Yeni bir metin kutusu oluşturulur.
- KAYDET'e tıklayın
Arka uç güncelleştirildikten sonra uygulamanızda yeni geri döngü URL'lerini kullanabilirsiniz.