Azure Mobil Uygulamaları için Apache Cordova istemci kitaplığı nasıl kullanılır?

Genel Bakış

Bu kılavuz, Azure Mobil Uygulamaları için en son [Apache Cordova Eklentisini]kullanarak sık karşılaşılan senaryoları gerçekleştirmenizi öğretir. Azure Mobile Apps'ta yeniyseniz, bir arka uç oluşturmak, tablo oluşturmak ve önceden oluşturulmuş bir Apache Cordova projesini indirmek için önce [Azure Mobile Apps Hızlı Başlat'ı] tamamlayın. Bu kılavuzda, istemci tarafı Apache Cordova Plugin odaklanmak.

Desteklenen platformlar

Bu SDK, Apache Cordova v6.0.0 ve daha sonra iOS, Android ve Windows aygıtlarını destekler. Platform desteği aşağıdaki gibidir:

  • Android API 19-24 (Nougat ile KitKat).
  • iOS sürümleri 8.0 ve sonrası.
  • Windows Phone 8.1.
  • Evrensel Windows Platformu.

Kurulum ve ön koşullar

Bu kılavuz, bir tablo ile bir arka uç oluşturduğunuzvarsa. Bu kılavuz, tablonun bu öğreticilerde tablolarla aynı şema olduğunu varsayar. Bu kılavuz, kodunuza Apache Cordova Eklentisi eklediğinizi de varsayar. Bunu yapmadıysanız, komut satırında projenize Apache Cordova eklentisini ekleyebilirsiniz:

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

[İlk Apache Cordova uygulamanızı]oluşturma hakkında daha fazla bilgi için belgelerine bakın.

İonik v2 uygulaması ayarlama

Bir Iyonik v2 projesini düzgün bir şekilde 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 oluşturabilir ve çalıştırabilirsiniz:

ionic platform add browser
ionic run browser

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

İ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ğrula

Azure App Service, uygulama kullanıcılarının facebook, Google, Microsoft Hesabı ve Twitter gibi çeşitli dış kimlik sağlayıcılarını kullanarak kimlik doğrulamayı ve yetkilendirmeyi destekler. Belirli işlemlere erişimi yalnızca kimlik doğrulaması yapılan kullanıcılarla sınırlamak için izinleri tablolarda ayarlayabilirsiniz. Sunucu komut dosyasında yetkilendirme kuralları nı uygulamak için kimlik doğrulaması yapılan kullanıcıların kimliğini de kullanabilirsiniz. Daha fazla bilgi için kimlik [doğrulama öğreticisiyle başlayın'] a bakın.

Bir Apache Cordova uygulamasında kimlik doğrulamakullanırken, aşağıdaki Cordova eklentileri kullanılabilir olmalıdır:

İki kimlik doğrulama akışı desteklenir: sunucu akışı ve istemci akışı. Sunucu akışı, sağlayıcının web kimlik doğrulama arabirimine dayandığı için en basit kimlik doğrulama deneyimini sağlar. İstemci akışı, sağlayıcıya özel aygıta özgü SDK'lara dayandığı için tek 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çabilmek 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çili sağlayıcının oturum açma sayfasını görüntüler ve kimlik sağlayıcısıyla başarılı oturum açtıktan sonra bir Uygulama Hizmeti 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 yapilir: Harici yönlendirme URL'leri için Mobil Uygulama Hizmetinizi yapılandırın.

Apache Cordova uygulamalarının çeşitli türleri, OAuth UI akışlarını işlemek için bir geri dönüş özelliği kullanır. Kimlik doğrulama hizmeti yalnızca varsayılan olarak hizmetinizi nasıl kullanabileceğinizi bildiğinden, yerel barındırma ana bilgisayarda OAuth UI akışları sorunlara neden olur. Sorunlu OAuth UI akışlarına örnek olarak şunlar verilebilir:

  • Ripple emülatörü.
  • Ionic ile Canlı Yeniden Yükleme.
  • Mobil arka uç'u yerel olarak çalıştırma
  • Mobil arka ucunu kimlik doğrulaması sağlayandan farklı bir Azure Uygulama Hizmetinde çalıştırma.

Yerel ayarlarınızı yapılandırmaya eklemek için aşağıdaki yönergeleri izleyin:

  1. [Azure portalında] oturum açın

  2. Tüm kaynakları veya Uygulama Hizmetlerini seçin ve ardından Mobil Uygulamanızın adını tıklatın.

  3. Araçlar'ı tıklatın

  4. OBSERVE menüsünde Kaynak gezginini tıklatın ve ardından Git'itıklatın. Yeni bir pencere veya sekme açılır.

  5. Sol navigasyonda siteniz için config, authsettings düğümlerini genişletin.

  6. Edit'i tıklatın

  7. "allowedExternalRedirectUrls" öğesini arayın. Null veya bir dizi değer olarak ayarlanabilir. Değeri aşağıdaki değerle değiştirin:

      "allowedExternalRedirectUrls": [
          "http://localhost:3000",
          "https://localhost:3000"
      ],
    

    URL'leri servisURL'leri ile değiştirin. Örnekler http://localhost:3000 arasında (Düğüm.js örnek hizmeti http://localhost:4400 için) veya (Ripple hizmeti için) verilebilir. Ancak, bu URL'ler örneklerdir - örneklerde belirtilen hizmetler de dahil olmak üzere durumunuz farklı olabilir.

  8. Ekranın sağ üst köşesindeki Oku/Yaz düğmesini tıklatın.

  9. Yeşil PUT düğmesini tıklatın.

Ayarlar bu noktada kaydedilir. Ayarlar kaydetme bitene kadar tarayıcı penceresini kapatmayın. Ayrıca, Uygulama Hizmetiniz için BU döngü URL'lerini CORS ayarlarına ekleyin:

  1. [Azure portalında] oturum açın
  2. Tüm kaynakları veya Uygulama Hizmetlerini seçin ve ardından Mobil Uygulamanızın adını tıklatın.
  3. Ayarlar bıçağı otomatik olarak açılır. Yoksa, Tüm Ayarlar'ıtıklatın.
  4. API menüsünün altındaki CORS'u tıklatın.
  5. Sağlanan kutuya eklemek istediğiniz URL'yi girin ve Enter tuşuna basın.
  6. Gerektiğinde ek URL'ler girin.
  7. Ayarları kaydetmek için Kaydet’e tıklayın.

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

Nasıl yapılı: Anında iletme bildirimleri için kaydolun

Anında iletme bildirimlerini işlemek için [phonegap-plugin-push'u] yükleyin. Bu eklenti komut satırındaki cordova plugin add komut kullanılarak veya Visual Studio içindeki Git eklentisi yükleyicisi aracılığıyla kolayca eklenebilir. Apache Cordova uygulamanızdaki aşağıdaki kod, anında iletme bildirimleri için cihazınızı kaydeder:

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 anında iletme bildirimleri göndermek için Bildirim Hub'ları SDK'yı kullanın. Doğrudan istemcilerden anında iletme bildirimleri göndermeyin. Bunu yapmak, Bildirim Hub'larına veya PNS'ye karşı bir hizmet reddi saldırısını tetiklemek için kullanılabilir. PNS bu tür saldırıların bir sonucu olarak trafik yasaklayabilir.

Daha fazla bilgi

ApI belgelerimizde ayrıntılı APIayrıntılarını bulabilirsiniz.