Azure Apache Cordova istemci kitaplığını Mobile Apps

Makale
06/25/2019

Genel Bakış

Bu kılavuzda, Azure Mobile Apps için en son Apache Cordova Eklentisini kullanarak yaygın senaryoları gerçekleştirmeyi Mobile Apps. Azure Mobile Apps'i yeni başladıysanız, önce Azure Mobile Apps hızlı başlangıç'i tamamlar ve arka uç oluşturun, tablo oluşturun ve önceden Apache Cordova projesini indirin. Bu kılavuzda Plugin için istemci tarafı Apache Cordova odaklanın.

Desteklenen platformlar

Bu SDK, iOS, Android ve Apache Cordova cihazlarda v6.0.0 ve sonraki Windows destekler. Platform desteği şu şekildedir:

Android API 19-24 (KitKat through Nookat).
iOS sürüm 8.0 ve sonrası.
Windows Phone 8.1.
Evrensel Windows Platformu.

Kurulum ve önkoşullar

Bu kılavuzda, tabloyla bir arka uç oluşturduğunuz varsayıldı. Bu kılavuzda, tablonun bu öğreticilerde yer alan tabloyla aynı şemaya sahip olduğu varsayıldı. Bu kılavuzda ayrıca kodunuz için Apache Cordova Eklentisi'nin eklenmiştir. Bunu yapmadıysanız, komut Apache Cordova projenize Apache Cordova eklentisini ebilirsiniz:

cordova plugin add cordova-plugin-ms-azure-mobile-apps

İlk uygulamanızı oluşturma hakkında daha fazla Apache Cordova belgelerine bakın.

Ionic v2 uygulaması ayarlama

Ionic v2 projesini düzgün yapılandırmak için önce temel bir uygulama oluşturun ve Cordova eklentisini ekleyin:

ionic start projectName --v2
cd projectName
ionic plugin add cordova-plugin-ms-azure-mobile-apps

İstemci nesnesini oluşturmak için app.component.ts aşağıdaki satırları ekleyin:

declare var WindowsAzure: any;
var client = new WindowsAzure.MobileServiceClient("https://yoursite.azurewebsites.net");

Artık projeyi tarayıcıda derlemek ve çalıştırmak için:

ionic platform add browser
ionic run browser

Azure Mobile Apps Cordova eklentisi hem Ionic v1 hem de v2 uygulamalarını destekler. Yalnızca Ionic v2 uygulamaları için nesne için ek bildirim WindowsAzure gerekir.

İ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:

Tablo sorgulama
Veri ekleme
Verileri değiştirme
Veri silme

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 olur: Kullanıcıların kimliğini doğrulama

Azure App Service, Facebook, Google, Microsoft Hesabı ve Twitter gibi çeşitli dış kimlik sağlayıcılarını kullanarak uygulama kullanıcılarının kimliğini doğrulamayı ve yetkilendirmeyi destekler. Belirli işlemlere erişimi yalnızca kimliği doğrulanmış kullanıcılarla kısıtlamak için tablolarda izinler oluşturabilirsiniz. Sunucu betikleri içinde 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ı ile Kullanmaya başlayın öğreticisi'ne bakın.

Apache Cordova uygulamasında kimlik doğrulaması kullanılırken aşağıdaki Cordova eklentileri kullanılabilir olması gerekir:

İki kimlik doğrulama akışı de destekler: sunucu akışı ve istemci akışı. Sunucu akışı, sağlayıcının web kimlik doğrulama arabirimine bağlı olduğu için en basit kimlik doğrulama deneyimini sağlar. İstemci akışı, sağlayıcıya özgü cihaza özgü SDK'ları dayandırarak çoklu oturum açma gibi cihaza özgü özelliklerle daha derin tümleştirmeye olanak 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çma 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 App Service sonra bir kimlik doğrulama belirteci oluşturulur. 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.

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ılandırılır: Dış yeniden yönlendirme URL'leri App Service mobil ağ yapılandırma.

Çeşitli türlerde Apache Cordova uygulamaları OAuth UI akışlarını işlemek için bir geri döngü özelliği kullanır. Kimlik doğrulama hizmeti varsayılan olarak yalnızca hizmetinizin nasıl kullanıca bilir, bu yana localhost üzerinde OAuth UI akışları sorunlara neden olur. Sorunlu OAuth UI akışlarının örnekleri şunlardır:

Dalgalanma öykünücüsü.
Ionic ile Canlı Yeniden Yükleme.
Mobil arka ucu yerel olarak çalıştırma
Mobil arka ucu kimlik doğrulaması sağlayan Azure App Service farklı bir arka uçta çalıştırma.

Yapılandırmaya yerel ayarlarınızı eklemek için şu yönergeleri izleyin:

Azure portalı’nda oturum açın
Tüm kaynaklar'ıveya Uygulama Hizmetleri'yi seçin ve ardından Mobil Uygulamanıza tıklayın.
Araçlar'a tıklayın
GÖZLEM menüsünde Kaynak gezgini'ne ve ardından Git'e tıklayın. Yeni bir pencere veya sekme açılır.
Sol gezinti bölmesinde siteniz için authsettings düğümlerini yapılandırmayı genişletin.
Düzenle'ye tıklayın
"allowedExternalRedirectUrls" öğesini ara. Null veya bir değer dizisi olarak ayarlanmış olabilir. Değeri aşağıdaki değerle değiştirebilirsiniz:
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
URL'leri hizmetinizin URL'leriyle değiştirin. Örnekler arasında https://localhost:3000 (Node.js hizmeti için) veya https://localhost:4400 (Ripple hizmeti için) yer alır. Ancak bu URL'ler örnek olarak verilmiştir. Örneklerde bahsedilen hizmetler de dahil olmak üzere sizin durumunuz farklı olabilir.
Ekranın sağ üst köşesindeki Okuma/ Yazma düğmesine tıklayın.
Yeşil PUT düğmesine tıklayın.

Bu noktada ayarlar kaydedilir. Ayarlar kaydetmeyi bitirene kadar tarayıcı penceresini kapatabilirsiniz. Ayrıca bu geri döngü URL'lerini kendi url'nizin CORS ayarlarına App Service:

Azure portalı’nda oturum açın
Tüm kaynaklar'ıveya Uygulama Hizmetleri'yi seçin ve ardından Mobil Uygulamanıza tıklayın.
Ayarlar dikey penceresi otomatik olarak açılır. Yoksa Tüm Girişler'e Ayarlar.
API menüsünün altında CORS'ye tıklayın.
Sağlanan kutuya eklemek istediğiniz URL'yi girin ve Enter tuşuna basın.
Gerektiğinde ek URL'ler girin.
Ayarları kaydetmek için Kaydet’e tıklayın.

Yeni ayarların etkili olmak yaklaşık 10-15 saniye sürer.

Nasıllı: Anında bildirime kaydolma

Anında bildirimleri işlemek için phonegap-plugin-push'i yükleyin. Bu eklenti komut satırına komutuyla cordova plugin add veya komut satırı içindeki Git eklentisi yükleyicisi aracılığıyla kolayca Visual Studio. Apache Cordova uygulamanıza aşağıdaki kod, anında bildirim için cihazınızı kaydedmektedir:

var pushOptions = {
    android: {
        senderId: '<from-gcm-console>'
    },
    ios: {
        alert: true,
        badge: true,
        sound: true
    },
    windows: {
    }
};
pushHandler = PushNotification.init(pushOptions);

pushHandler.on('registration', function (data) {
    registrationId = data.registrationId;
    // For cross-platform, you can use the device plugin to determine the device
    // Best is to use device.platform
    var name = 'gcm'; // For android - default
    if (device.platform.toLowerCase() === 'ios')
        name = 'apns';
    if (device.platform.toLowerCase().substring(0, 3) === 'win')
        name = 'wns';
    client.push.register(name, registrationId);
});

pushHandler.on('notification', function (data) {
    // data is an object and is whatever is sent by the PNS - check the format
    // for your particular PNS
});

pushHandler.on('error', function (error) {
    // Handle errors
});

Sunucudan Notification Hubs bildirimleri göndermek için Notification Hubs SDK'sı kullanın. Hiçbir zaman doğrudan istemcilerden anında bildirim göndermeyin. Bunu yapmak, Notification Hubs veya PNS'ye karşı hizmet reddi saldırısı tetiklemek için kullanılabilir. PNS, bu tür saldırıların sonucunda trafiğinizi yasaklar.

Daha fazla bilgi

Ayrıntılı API ayrıntılarını API belgelerimizde bulabilirsiniz.