Azure Mobile Apps için Apache Cordova eklentisini kullanma

Not

Bu ürün kullanımdan kaldırıldı. .NET 8 veya üzerini kullanan projelerin yerini alması için bkz. Community Toolkit Datasync kitaplığı.

Bu kılavuz, Azure Mobile Appsiçin en son Apache Cordova Eklentisini kullanarak yaygın senaryolar gerçekleştirmeyi öğretir. Azure Mobile Apps'i kullanmaya yeni başladıysanız, önce arka uç oluşturmak, tablo oluşturmak ve önceden oluşturulmuş bir Apache Cordova projesi indirmek için Azure Mobile Apps Hızlı Başlangıç tamamlayın. Bu kılavuzda istemci tarafı Apache Cordova Eklentisine odaklanacağız.

Desteklenen platformlar

Bu SDK, iOS, Android ve Windows cihazlarında Apache Cordova v6.0.0 ve üzerini destekler. Platform desteği aşağıdaki gibidir:

• Android API 19+.
• iOS sürüm 8.0 ve üzeri.

Uyarı

Bu makalede, kullanımdan kaldırılan v4.2.0 kitaplık sürümüne ilişkin bilgiler yer alır. Bu kitaplıkta güvenlik sorunlarına yönelik güncelleştirmeler de dahil olmak üzere başka güncelleştirme yapılmaz. Sürekli destek için .NET MAUI gibi bir .NET istemcisine geçmeyi göz önünde bulundurun.

Kurulum ve önkoşullar

Bu kılavuzda, tablo içeren bir arka uç oluşturduğunuz varsayılır. Örneklerde hızlı başlangıçlardan TodoItem tablosu kullanılır. Azure Mobile Apps eklentisini projenize eklemek için aşağıdaki komutu kullanın:

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.

Ionic v2 uygulaması ayarlama

Bir 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 derleyebilir ve çalıştırabilirsiniz:

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ı, WindowsAzure nesnesi için ek bildirim gerektirir.

İstemci bağlantısı oluşturma

WindowsAzure.MobileServiceClient nesnesi oluşturarak bir istemci bağlantısı oluşturun. appUrl yerine Mobil Uygulamanızın URL'sini ekleyin.

var client = WindowsAzure.MobileServiceClient(appUrl);

Tablolarla çalışma

Verilere erişmek veya verileri güncelleştirmek için arka uç tablosuna bir başvuru oluşturun. tableName tablonuzun adıyla değiştirin

var table = client.getTable(tableName);

Tablo başvurusu aldıktan sonra, tablonuzla daha fazla çalışabilirsiniz:

• tablo sorgulamayı
  • Filtreleme Verileri
  • Veri Aracılığıyla Sayfalama
  • Veri Sıralama
• Veri ekleme
• veri değiştirme
• Veri silmeyi

Tablo başvurusunu sorgulama

Tablo başvurunuz olduktan sonra, sunucudaki verileri sorgulamak için bunu 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 success işlevi çağrılır. Diğer sorgu işlevleri (.includeTotalCount()gibi) kullanıldığında sonuçlara eklenen bilgiler üzerinde yinelenecek şekilde başarı işlevinde for (var i in results) kullanmayın.

Sorgu söz dizimi hakkında daha fazla bilgi içinSorgu nesnesi belgelerine bakın.

Sunucudaki verileri filtreleme

Tablo başvurusunda bir where yan tümcesi kullanabilirsiniz:

table
    .where({ userId: user.userId, complete: false })
    .read()
    .then(success, failure);

Nesneyi filtreleyen bir işlev de kullanabilirsiniz. Bu durumda, this değişkeni filtrelenen geçerli nesneye atanır. Aşağıdaki kod işlevsel olarak önceki örne eşdeğerdir:

function filterByUserId(currentUserId) {
    return this.userId === currentUserId && this.complete === false;
}

table
    .where(filterByUserId, user.userId)
    .read()
    .then(success, failure);

Veriler aracılığıyla sayfalama

take() ve skip() yöntemlerini kullanma. Örneğin, tabloyu 100 satırlık 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
        }
    }
}

.includeTotalCount() yöntemi, sonuç nesnesine bir totalCount alanı eklemek için kullanılır. totalCount alanı, disk belleği kullanılmaması durumunda döndürülecek toplam kayıt sayısıyla doldurulur.

Daha sonra 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() kullanın. Önceden yüklenmiş olan kayıtlara erişimi hızlandırmak için önbelleğe alma uygulayın.

Sıralanmış verileri 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 [Sorgu nesnesi belgelerine] bakın.

Veri ekleme

Uygun tarihe sahip bir JavaScript nesnesi oluşturun ve zaman uyumsuz olarak table.insert() ç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 ek alanlarla birlikte döndürülür. Daha sonraki güncelleştirmeler için bu bilgilerle kendi önbelleğinizi güncelleştirin.

Azure Mobile Apps Node.js Server SDK'sı geliştirme amacıyla dinamik şemayı destekler. Dinamik Şema, ekleme veya güncelleştirme işleminde belirterek tabloya sütun eklemenize olanak tanır. Uygulamanızı üretim ortamına taşımadan önce dinamik şemayı kapatmanızı öneririz.

Verileri değiştirme

.insert() yöntemine benzer şekilde, bir Update nesnesi oluşturup .update()çağırmanız gerekir. Güncelleştirme nesnesi güncelleştirilecek kaydın kimliğini içermelidir; kayıt okunurken veya .insert()çağrılırken kimlik alınır.

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);

Verileri silme

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);

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 kısıtlamak için tablolarda izinleri 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ı kullanmaya başlama öğreticisi bakın.

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

• cordova-plugin-device
• cordova-plugin-inappbrowser

Not

iOS ve Android'deki son güvenlik değişiklikleri sunucu akışı kimlik doğrulamasını kullanılamaz hale getirebilir. Böyle durumlarda istemci akışı kullanmanız gerekir.

İ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ü cihaza özgü SDK'lara bağlı olduğundan çoklu oturum açma gibi cihaza özgü özelliklerle daha ayrıntılı tümleştirme sağlar.

Sağlayıcıyla kimlik doğrulaması (Sunucu Akışı)

Uygulamanızdaki kimlik doğrulama işlemini Mobile Apps'in yönetmesini sağlamak için uygulamanızı kimlik sağlayıcınıza kaydetmeniz gerekir. Ardından Azure App Service'inizde, sağlayıcınız tarafından sağlanan uygulama kimliğini ve gizli diziyi yapılandırmanız gerekir. Daha fazla bilgi içinuygulamanı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);
});

Sağlayıcı için geçerli değerler 'aad', 'facebook', 'google', 'microsoftaccount' ve 'twitter' değerleridir.

Not

Güvenlik endişeleri nedeniyle, bazı kimlik doğrulama sağlayıcıları bir sunucu akışıyla çalışmayabilir. Bu gibi durumlarda bir istemci akışı yöntemi kullanmanız gerekir.

Bu durumda, Azure App Service OAuth 2.0 kimlik doğrulama akışını 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ı bir şekilde oturum açıldıktan sonra bir App Service kimlik doğrulama belirteci oluşturur. Oturum açma işlevi tamamlandığında, sırasıyla userId ve authenticationToken alanlarında hem kullanıcı kimliğini hem de App Service kimlik doğrulama belirtecini kullanıma sunan bir JSON nesnesi döndürür. Bu belirteç, süresi dolana kadar önbelleğe alınıp yeniden kullanılabilir.

Sağlayıcıyla kimlik doğrulama (İstemci Akışı)

Uygulamanız ayrıca kimlik sağlayıcısına bağımsız olarak başvurabilir ve ardından kimlik doğrulaması için döndürülen belirteci App Service'inize sağlayabilir. Bu istemci akışı, kullanıcılar için tek bir 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 örnekte, ilgili sağlayıcı SDK'sı tarafından sağlanan belirtecin belirteç değişkeninde depolandığı varsayılır. Her sağlayıcının gerektirdiği ayrıntılar biraz farklıdır. Yükün tam biçimini belirlemek için Azure App Service Kimlik Doğrulaması ve Yetkilendirme belgelerine başvurun.

Kimliği doğrulanmış kullanıcı hakkında bilgi alma

Kimlik doğrulama bilgileri, herhangi bir HTTP/REST kitaplığına sahip bir HTTP çağrısı kullanılarak /.auth/me uç noktasından alınabilir. X-ZUMO-AUTH üst bilgisini kimlik doğrulama belirtecinize ayarladığınızdan emin olun. Kimlik doğrulama belirteci client.currentUser.mobileServiceAuthenticationTokeniçinde depolanır. Örneğin, getirme 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
    });

Getirme, bir npm paketi olarak veya CDNJStarayıcı indirmesi için kullanılabilir. Veriler JSON nesnesi olarak alınır.

Mobile App Service'inizi dış yeniden yönlendirme URL'leri için yapılandırın.

Birkaç tür Apache Cordova uygulaması, OAuth UI akışlarını işlemek için bir geri döngü özelliği kullanır. Localhost'ta OAuth kullanıcı arabirimi akışları sorunlara neden olur çünkü kimlik doğrulama hizmeti yalnızca hizmetinizi varsayılan olarak nasıl kullanacağınızı bilir. Sorunlu OAuth UI akışlarına örnek olarak şunlar verilebilir:

• Ripple ö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ğlayandan farklı bir Azure App Service'te çalıştırma.

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

1. Azure portalında oturum açma

2. App Services veya Tüm kaynaklar'ı seçin mobil uygulamanızın adına tıklayın.

3. Araçları'ne tıklayın

4. GÖZLEM menüsünde kaynak gezgini 'e tıklayın ve ardından Gitöğesine tıklayın. Yeni bir pencere veya sekme açılır.

5. sol gezinti bölmesinde sitenizin düğümlerini yapılandırmayı genişletin.

6. Düzenle'ye tıklayın

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

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

   URL'leri hizmetinizin URL'leriyle değiştirin. Örnek olarak http://localhost:3000 (Node.js örnek hizmeti için) veya http://localhost:4400 (Ripple hizmeti için) verilebilir. Ancak, bu URL'ler örnektir; örneklerde belirtilen hizmetler de dahil olmak üzere durumunuz farklı olabilir.

8. Ekranın sağ üst köşesindeki Okuma/Yazma düğmesine tıklayın.

9. YEŞIL PUT düğmesine tıklayın.

Ayarlar bu noktada kaydedilir. Ayarlar kaydetmeyi bitirene kadar tarayıcı penceresini kapatmayın. Ayrıca bu geri döngü URL'lerini App Service'inizin CORS ayarlarına ekleyin:

1. Azure portalında oturum açma
2. App Services veya Tüm kaynaklar'ı seçin mobil uygulamanızın adına tıklayın.
3. Ayarlar dikey penceresi otomatik olarak açılır. Aksi takdirde Tüm Ayarlaröğesine tıklayın.
4. API menüsünün altındaki CORS tıklayın.
5. Sağlanan kutuya eklemek istediğiniz URL'yi girin ve Enter tuşuna basın.
6. Gerektiğinde daha fazla URL girin.
7. Ayarları kaydetmek için Kaydet'e tıklayın.

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