Az Apache Cordova Ügyféloldali kódtár használata az Azure Mobile Apps

Cikk
06/25/2019

Áttekintés

Ebből az útmutatóból megtanulhat gyakori forgatókönyveket végrehajtani az Azure-hoz elérhető legújabb Apache Cordova beépülő modul Mobile Apps. Ha még nem használja az Azure Mobile Apps, először az Azure Mobile Apps gyorskonfigurálás használatával hozzon létre egy háttért, hozzon létre egy táblát, és töltsön le egy előre felépített Apache Cordova-projektet. Ebben az útmutatóban az ügyféloldali Apache Cordova beépülő modulra koncentrálunk.

Támogatott platformok

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

Android API 19-24 (KitKat–Nougat).
iOS 8.0-s és újabb verziók.
Windows Phone-telefon 8.1-es.
Univerzális Windows-platform.

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

Ez az útmutató feltételezi, hogy létrehozott egy táblázatot a háttérből. Ez az útmutató feltételezi, hogy a táblázat sémája megegyezik az oktatóanyagokban található táblák sémával. Ez az útmutató azt is feltételezi, hogy hozzáadta az Apache Cordova beépülő modult a kódhoz. Ha még nem tette meg, hozzáadhatja az Apache Cordova beépülő modult a projekthez a parancssorban:

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

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

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

Az Ionic v2-projektek megfelelő konfigurálása érdekében 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 a alkalmazáshoz az ügyfélobjektum létrehozásához:

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

Most már felépítheti é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 ion v1 és v2 alkalmazásokat is támogat. Csak az Ion v2-alkalmazásokhoz szükséges az objektum további deklarációja WindowsAzure .

Ü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

Útmutató: 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ési szintaxissal kapcsolatos további információ: [Lekérdezésobjektum dokumentációja].

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.

Útmutató: Rendezett adatok visszaadása

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].

Útmutató: Adatok 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);

A sikeres beszúrás után a beszúrt elemet a rendszer visszaadja a szinkronizálási műveletekhez szükséges további mezőkkel együtt. 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.

Útmutató: 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);

Útmutató: 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);

How to: Authenticate users (Hogyan: Felhasználók hitelesítése)

Azure App Service támogatja az alkalmazásfelhasználók hitelesítését és hitelesítését különböző külső identitásszolgáltatók használatával: Facebook, Google, Microsoft-fiók és Twitter. Beállíthatja a táblákra vonatkozó engedélyeket, hogy csak a hitelesített felhasználók számára korlátozza az egyes műveletekhez való hozzáférést. A hitelesített felhasználók identitásával engedélyezési szabályokat is megvalósíthat a kiszolgálói szkriptekben. További információkért lásd a Első lépések oktatóanyagot.

Ha Apache Cordova-alkalmazásban használ hitelesítést, az alábbi Cordova beépülő moduloknak kell elérhetőnek lennie:

Két hitelesítési folyamat támogatott: egy kiszolgálói folyamat és egy ügyfélfolyamat. A kiszolgálói folyamat biztosítja a legegyszerűbb hitelesítési felületet, mivel a szolgáltató webes hitelesítési felületére támaszkodik. Az ügyfélfolyam lehetővé teszi az eszközspecifikus képességekkel, például az egyszeri bejelentkezéssel való mélyebb integrációt, mivel az szolgáltatóspecifikus eszközspecifikus SZOFTVERDK-kra támaszkodik.

Útmutató: Hitelesítés szolgáltatóval (Server Flow)

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. A Facebookkal való bejelentkezéshez például 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

A hitelesítés Google-fiókkal jelenleg nem használható a Server Flow-n keresztül. A Google-lel való hitelesítéshez Client Flow metódust 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.

Útmutató: Hitelesítés szolgáltatóval (Client Flow)

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 a Client Flow lehetővé teszi, hogy egyszeri bejelentkezésen alapuló működést tegyen elérhetővé 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.

Útmutató: A hitelesített felhasználó adatainak lekérdezése

A hitelesítési adatok bármely AJAX-kódtárral lekérhetők az /.auth/me végpontról egy HTTP-híváson keresztül. Ü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 adatok lekéréséhez használhatja a jQuery-t vagy egy másik AJAX API-t is. Az adatokat a rendszer JSON-objektumként fogadja.

How to: Configure your Mobile App Service for external redirect URLLs (How to: Configure your Mobile App Service for external redirect URLls (How to: Configure your Mobile App Service for external redirect URLls (How to

Az Apache Cordova-alkalmazások számos típusa használ visszacsatolási képességet az OAuth ui-folyamatok kezeléséhez. A localhoston az OAuth UI-folyamatok problémákat okoznak, mivel a hitelesítési szolgáltatás alapértelmezés szerint csak a szolgáltatás használatát ismeri. Példák a problémás OAuth felhasználói felületi folyamatokra:

A tetszető emulátor.
Élő újratöltés az Ionic-okkal.
A mobil háttérhálózat helyi futtatása
A mobil-háttérhálózat más Azure App Service, mint a hitelesítést biztosító.

Kövesse az alábbi utasításokat a helyi beállítások konfigurációhoz való hozzáadásához:

Jelentkezzen be az Azure Portalra
Válassza a Minden erőforrásApp Services lehetőséget, majd kattintson a mobilalkalmazás nevére.
Kattintson az Eszközök elemre.
Kattintson az Erőforrás-kezelő elemre a MEGFIGYELÉS menüben, majd kattintson az Ugrás gombra. Megnyílik egy új ablak vagy lap.
Bontsa ki a hely konfigurációját, és adja meg a csomópontokat a bal oldali navigációs sávon.
Kattintson a Szerkesztés gombra.
Keresse meg az "allowedExternalRedirectUrls" elemet. Ez lehet null értékű, vagy egy értéktömb. Módosítsa az értéket a következőre:
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Cserélje le az URL-címeket a szolgáltatás URL-címeit. Ilyen például https://localhost:3000 a (Node.js szolgáltatáshoz) vagy https://localhost:4400 a (a tetszető szolgáltatáshoz). Ezek az URL-címek azonban példák – az Ön helyzetében, beleértve a példákban említett szolgáltatásokat is, eltérő lehet.
Kattintson a képernyő jobb felső sarkában található Olvasás/Írás gombra.
Kattintson a zöld PUT gombra.

A beállításokat a rendszer ezen a ponton menti. Ne zárja be a böngészőablakot, amíg a beállítások mentése be nem fejeződött. Adja hozzá ezeket a visszacsatolási URL-címeket a cors-beállításokhoz a App Service:

Jelentkezzen be az Azure Portalra
Válassza a Minden erőforrásApp Services lehetőséget, majd kattintson a mobilalkalmazás nevére.
A Gépház panel automatikusan megnyílik. Ha nem, kattintson a Minden Gépház.
Az API menüben kattintson a CORS elemre.
Írja be a hozzáadni kívánt URL-címet a megadott mezőbe, majd 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 életbe lépnek körülbelül 10–15 másodpercet vesz igénybe.

How to: Register for push notifications (Hogyan lehet regisztrálni leküldéses értesítésekre)

Telepítse a phonegap-plugin-push gombra a leküldéses értesítések kezeléséhez. Ez a beépülő modul egyszerűen hozzáadható a cordova plugin add parancssori paranccsal vagy a Git beépülő modul telepítője segítségével a Visual Studio. Az Apache Cordova-alkalmazásban a következő kód regisztrálja az eszközt leküldéses értesítésekre:

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

A Notification Hubs SDK használatával leküldéses értesítéseket küldhet a kiszolgálóról. Soha ne küldjön leküldéses értesítéseket közvetlenül az ügyfelekről. Ezzel szolgáltatásmegtagadási támadás indítható a Notification Hubs PNS ellen. A PNS az ilyen támadások miatt letiltja a forgalmat.

További információ

Az API részletes adatait az API-dokumentációban találja.