Az Apache Cordova beépülő modul használata az Azure Mobile Appshez

Cikk
10/23/2023

Ez az útmutató bemutatja, hogyan hajthat végre gyakori forgatókönyveket az Azure Mobile Apps legújabb Apache Cordova beépülő moduljának használatával. Ha még nem ismerkedik az Azure Mobile Apps szolgáltatással, először végezze el az Azure Mobile Apps gyors üzembe helyezését háttérrendszer létrehozásához, egy táblázat létrehozásához és egy előre elkészített Apache Cordova-projekt letöltéséhez. Ebben az útmutatóban az ügyféloldali Apache Cordova beépülő modulra összpontosítunk.

Támogatott platformok

Ez az SDK támogatja az Apache Cordova 6.0.0-s és újabb verzióit iOS, Android és Windows rendszerű eszközökön. A platform támogatása a következő:

Android API 19+.
iOS 8.0-s és újabb verziók.

Figyelmeztetés

Ez a cikk a kivezetett v4.2.0-s kódtárverzióval kapcsolatos információkat ismerteti. A kódtár nem frissül tovább, beleértve a biztonsági problémák frissítéseit is. A folyamatos támogatás érdekében érdemes lehet .NET-ügyfélre, például .NET MAUI-ra költözni.

Telepítés és előfeltételek

Ez az útmutató feltételezi, hogy létrehozott egy táblával rendelkező háttérrendszert. A példák a TodoItem rövid útmutatók táblázatát használják. Az Azure Mobile Apps beépülő modul projekthez való hozzáadásához használja a következő parancsot:

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

Az első Apache Cordova-alkalmazás létrehozásáról további információt a dokumentációban talál.

Ionic v2-alkalmazás beállítása

Egy Ionic v2-projekt megfelelő konfigurálásához először hozzon létre egy alapszintű alkalmazást, és adja hozzá a Cordova beépülő modult:

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

Adja hozzá a következő sorokat app.component.ts az ügyfélobjektum létrehozásához:

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

Most már létrehozhatja és futtathatja a projektet a böngészőben:

ionic platform add browser
ionic run browser

Az Azure Mobile Apps Cordova beépülő modul támogatja az Ionic v1 és v2 alkalmazásokat is. Csak az Ionic v2-alkalmazások igényelnek extra deklarációt az WindowsAzure objektumhoz.

Ügyfélkapcsolat létrehozása

Hozzon létre egy ügyfélkapcsolatot egy WindowsAzure.MobileServiceClient objektum létrehozásával. Az appUrl helyére írja be mobilalkalmazása URL-címét.

var client = WindowsAzure.MobileServiceClient(appUrl);

Táblázatok használata

Az adatok elérése vagy frissítése érdekében hozzon létre a háttértáblára mutató hivatkozást. A tableName helyére írja be a tábla nevét.

var table = client.getTable(tableName);

Ha létrehozta a táblahivatkozást, további műveleteket végezhet a táblával:

Tábla lekérdezése
Adatok beszúrása
Adatok módosítása
Adatok törlése

Táblahivatkozás lekérdezése

Ha létrehozta a táblahivatkozást, adatokat kérhet le a segítségével a kiszolgálóról. A lekérdezések egy, a LINQ-hez hasonló nyelv használatával végezhetőek el. A tábla összes adatának visszaadásához használja a következő kódot:

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

Ekkor a rendszer meghívja a success függvényt az eredményekkel együtt. Ne használja a for (var i in results) elemet a success függvényben, mivel az megismétli az eredményekben található információkat más lekérdezési funkciók használatakor (például: .includeTotalCount()).

A Lekérdezés szintaxisával kapcsolatos további információkért tekintse meg a Lekérdezés objektum dokumentációját.

A kiszolgálón lévő adatok szűrése

A táblahivatkozáson használhatja a where záradékot:

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

Használhat olyan függvényt is, amelyt szűri az objektumot. Ebben az esetben a this változó van az aktuálisan szűrt objektumhoz rendelve. A következő kód funkcionalitását tekintve megegyezik az előző példában szereplővel:

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

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

Adatok lapozása

Használja a take() és a skip() metódust. Például ha 100 soros rekordokra szeretné felosztani a táblát:

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
        }
    }
}

A .includeTotalCount() metódus hozzáadja a totalCount mezőt az eredményobjektumhoz. A totalCount mezőben azoknak a rekordoknak a teljes száma szerepel, amelyeket a rendszer visszaadna, ha nem használna lapozást.

A pages változóval és a felhasználói felület egyes gombjaival oldallistát adhat meg. A loadPage() segítségével töltheti be az új rekordokat az egyes oldalakon. Használjon gyorsítótárazást a már betöltött rekordok eléréséhez.

Rendezett adatok visszaadva

Használja az .orderBy() vagy az .orderByDescending() lekérdezési metódust:

table
    .orderBy('name')
    .read()
    .then(success, failure);

A lekérdezési objektummal kapcsolatos további információ: [Lekérdezésobjektum dokumentációja].

Adat beszúrása

Hozzon létre egy JavaScript-objektumot a megfelelő dátummal, és hívja meg a table.insert() függvényt aszinkrón módon:

var newItem = {
    name: 'My Name',
    signupDate: new Date()
};

table
    .insert(newItem)
    .done(function (insertedItem) {
        var id = insertedItem.id;
    }, failure);

Sikeres beszúrás esetén a program a beszúrt elemet a szinkronizálási műveletekhez szükséges további mezőkkel adja vissza. Frissítse ezekkel az információkkal a gyorsítótárat a későbbi frissítésekhez.

Az Azure Mobile Apps Node.js Server SDK támogatja a fejlesztési célra szolgáló dinamikus sémákat. A dinamikus sémák lehetővé teszik, hogy oszlopokat adjon a táblához úgy, hogy megadja őket egy beszúrási vagy frissítési műveletben. Javasoljuk a dinamikus sémák kikapcsolását az alkalmazás éles környezetbe helyezése előtt.

Adatok módosítása

Az .insert() metódushoz hasonlóan hozzon létre egy frissítési objektumot majd hívja meg a következőt: .update(). A frissítési objektumnak tartalmaznia kell a frissíteni kívánt rekord azonosítóját – ez a rekord olvasásakor vagy az .insert() meghívásakor szerezhető meg.

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

Adatok törlése

Egy rekord törléséhez hívja meg a .del() metódust. Adja át az azonosítót egy objektumhivatkozásban:

table
    .del({ id: '7163bc7a-70b2-4dde-98e9-8818969611bd' })
    .done(function () {
        // Record is now deleted - update your cache
    }, failure);

Felhasználók hitelesítése

Azure-alkalmazás szolgáltatás támogatja az alkalmazásfelhasználók hitelesítését és engedélyezését különböző külső identitásszolgáltatókkal: Facebook, Google, Microsoft-fiók és Twitter. A táblákra vonatkozó engedélyeket úgy állíthatja be, hogy az adott műveletekhez való hozzáférést csak hitelesített felhasználókra korlátozza. A hitelesített felhasználók identitását is használhatja az engedélyezési szabályok kiszolgálói szkriptekben való implementálásához. További információkért tekintse meg a hitelesítési oktatóanyag első lépéseit.

Ha hitelesítést használ egy Apache Cordova-alkalmazásban, a következő Cordova beépülő moduloknak kell rendelkezésre állniuk:

Megjegyzés:

Az iOS és az Android legutóbbi biztonsági változásai elérhetetlenné tehetik a kiszolgálói folyamat hitelesítését. Ezekben az esetekben ügyfélfolyamatot kell használnia.

Két hitelesítési folyamat támogatott: egy kiszolgálói folyamat és egy ügyfélfolyamat. A kiszolgálói folyamat a legegyszerűbb hitelesítési élményt nyújtja, mivel a szolgáltató webes hitelesítési felületére támaszkodik. Az ügyfélfolyamat lehetővé teszi az eszközspecifikus képességek, például az egyszeri bejelentkezés mélyebb integrációját, mivel szolgáltatóspecifikus eszközspecifikus SDK-kra támaszkodik.

Hitelesítés szolgáltatóval (kiszolgálói folyamat)

Ha azt szeretné, hogy a Mobile Apps kezelje az alkalmazása hitelesítési folyamatát, regisztrálnia kell az alkalmazását az identitásszolgáltatójánál. Ezután az Azure App Service-ben be kell állítania a szolgáltatótól kapott alkalmazásazonosítót és titkos kulcsot. További információt a hitelesítés alkalmazásokhoz történő hozzáadását ismertető oktatóanyagban találhat.

Ha már regisztrálta az identitásszolgáltatót, hívja meg a .login() metódust a szolgáltató nevével. Ha például a Facebookkal szeretne bejelentkezni, használja a következő kódot:

client.login("facebook").done(function (results) {
     alert("You are now signed in as: " + results.userId);
}, function (err) {
     alert("Error: " + err);
});

A szolgáltatóhoz tartozó érvényes értékek a következők: „aad”, „facebook”, „google”, „microsoftaccount” és „twitter”.

Megjegyzés:

Biztonsági problémák miatt előfordulhat, hogy egyes hitelesítésszolgáltatók nem működnek kiszolgálói folyamattal. Ezekben az esetekben ügyfélfolyamat-módszert kell használnia.

Ebben az esetben az Azure App Service felügyeli az OAuth 2.0-s hitelesítési folyamatot. Megjeleníti a kiválasztott szolgáltató bejelentkezési oldalát, és létrehoz egy App Service-hitelesítési jogkivonatot az identitásszolgáltatóval való sikeres bejelentkezés után. Amikor a login függvény lezárult, egy olyan JSON-objektumot ad vissza, amely a felhasználói azonosítót és az App Service-hitelesítési tokent a megfelelő userID és auhenticationToken mezőbe helyezi. Ez a token gyorsítótárazható, és újra felhasználható, amíg le nem jár.

Hitelesítés szolgáltatóval (ügyfélfolyamat)

Az alkalmazás függetlenül is kapcsolatba léphet az identitásszolgáltatóval, majd átadhatja a visszakapott tokent az App Service-nek hitelesítésre. Ez az ügyfélfolyamat lehetővé teszi, hogy egyszeri bejelentkezési élményt biztosítson a felhasználóknak, vagy további felhasználói adatokat kérjen le az identitásszolgáltatótól.

Ez a példa a Facebook ügyfél-SDK-t használja a hitelesítéshez:

client.login("facebook", {"access_token": token})
.done(function (results) {
     alert("You are now signed in as: " + results.userId);
}, function (err) {
     alert("Error: " + err);
});

Ez a példa feltételezi, hogy a megfelelő szolgáltatói SDK által adott tokent a rendszer a „token” változóban tárolja. Az egyes szolgáltatók által megkövetelt adatok kissé eltérőek. A hasznos adatok pontos formájának meghatározásához tekintse meg a Azure-alkalmazás szolgáltatáshitelesítési és engedélyezési dokumentációját.

A hitelesített felhasználó adatainak lekérése

A hitelesítési információk lekérhetők a /.auth/me végpontról http-hívással bármely HTTP-/REST-kódtár használatával. Ügyeljen arra, hogy a hitelesítési tokenhez az X-ZUMO-AUTH fejlécet állítsa be. A hitelesítési token a következő helyen van tárolva: client.currentUser.mobileServiceAuthenticationToken. Példa a fetch API használatára:

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

A fetch elérhető npm-csomagként, vagy letölthető a CDNJS-ről. Az adatokat a rendszer JSON-objektumként fogadja.

Konfigurálja a Mobile App Service-t külső átirányítási URL-címekhez.

Az Apache Cordova-alkalmazások számos típusa használ visszacsatolási képességet az OAuth felhasználói felületi folyamatainak kezeléséhez. A localhost OAuth felhasználói felületi folyamatai problémákat okoznak, mivel a hitelesítési szolgáltatás alapértelmezés szerint csak azt tudja, hogyan használhatja a szolgáltatást. A problémás OAuth felhasználói felületi folyamatok például a következők:

A Ripple emulátor.
Live Reload with Ionic.
A mobil háttérrendszer helyi futtatása
A mobil háttérrendszer futtatása egy másik Azure-alkalmazás szolgáltatásban, mint a hitelesítést biztosító.

Az alábbi utasításokat követve adja hozzá a helyi beállításokat a konfigurációhoz:

Jelentkezzen be az Azure Portalra
Válassza az Összes erőforrás vagy az App Services lehetőséget, majd kattintson a mobilalkalmazás nevére.
Kattintson az Eszközök gombra
Kattintson az Ob Standard kiadás RVE menü Erőforrás-kezelő elemére, majd az Ugrás gombra. Megnyílik egy új ablak vagy lap.
Bontsa ki a konfigurációt, és állítsa be a webhely csomópontjait a bal oldali navigációs sávon.
Kattintson az Edit (Szerkesztés) gombra.
Keresse meg a "allowedExternalRedirectUrls" elemet. Lehet, hogy null értékre vagy értéktömbre van állítva. Módosítsa az értéket a következő értékre:
```
"allowedExternalRedirectUrls": [
    "http://localhost:3000",
    "https://localhost:3000"
],
```
Cserélje le az URL-címeket a szolgáltatás URL-címére. Ilyenek például http://localhost:3000 a Node.js mintaszolgáltatás vagy http://localhost:4400 (a Ripple szolgáltatás esetében). Ezek az URL-címek azonban példák – az Ön helyzete, beleértve a példákban említett szolgáltatásokat is, eltérő lehet.
Kattintson az Olvasás/Írás gombra a képernyő jobb felső sarkában.
Kattintson a zöld PUT gombra.

A beállítások ezen a ponton lesznek mentve. Ne zárja be a böngészőablakot, amíg a beállítások nem fejezték be a mentést. Adja hozzá ezeket a visszacsatolási URL-címeket az App Service CORS-beállításaihoz is:

Jelentkezzen be az Azure Portalra
Válassza az Összes erőforrás vagy az App Services lehetőséget, majd kattintson a mobilalkalmazás nevére.
A Gépház panel automatikusan megnyílik. Ha nem, kattintson az Összes Gépház elemre.
Kattintson a CORS gombra az API menüben.
Írja be a hozzáadni kívánt URL-címet a megadott mezőbe, és nyomja le az Enter billentyűt.
Szükség szerint adjon meg további URL-címeket.
Kattintson a Mentés gombra a beállítások mentéséhez.

Az új beállítások érvénybe lépése körülbelül 10–15 másodpercet vesz igénybe.

Az Apache Cordova beépülő modul használata az Azure Mobile Appshez

Támogatott platformok

Telepítés és előfeltételek

Ionic v2-alkalmazás beállítása

Ügyfélkapcsolat létrehozása

Táblázatok használata

Táblahivatkozás lekérdezése

A kiszolgálón lévő adatok szűrése

Adatok lapozása

Rendezett adatok visszaadva

Adat beszúrása

Adatok módosítása

Adatok törlése

Felhasználók hitelesítése

Hitelesítés szolgáltatóval (kiszolgálói folyamat)

Hitelesítés szolgáltatóval (ügyfélfolyamat)

A hitelesített felhasználó adatainak lekérése

Konfigurálja a Mobile App Service-t külső átirányítási URL-címekhez.

Visszajelzés

Visszajelzés

További források

Az Apache Cordova beépülő modul használata az Azure Mobile Appshez

Támogatott platformok

Telepítés és előfeltételek

Ionic v2-alkalmazás beállítása

Ügyfélkapcsolat létrehozása

Táblázatok használata

Táblahivatkozás lekérdezése

A kiszolgálón lévő adatok szűrése

Adatok lapozása

Rendezett adatok visszaadva

Adat beszúrása

Adatok módosítása

Adatok törlése

Felhasználók hitelesítése

Hitelesítés szolgáltatóval (kiszolgálói folyamat)

Hitelesítés szolgáltatóval (ügyfélfolyamat)

Közösségi portálos hitelesítés – alapszintű példa

A hitelesített felhasználó adatainak lekérése

Konfigurálja a Mobile App Service-t külső átirányítási URL-címekhez.

Visszajelzés

Visszajelzés

További források