A JavaScript-ügyfélkódtár használata az Azure Mobile Appshez

Cikk
06/25/2019

Áttekintés

Ez az útmutató bemutatja, hogyan hajthat végre gyakori forgatókönyveket az Azure Mobile Apps legújabb JavaScript SDK-jának használatával. Ha még csak most ismerkedik az Azure Mobile Apps szolgáltatással, először végezze el az Azure Mobile Apps gyors üzembe helyezését egy háttérrendszer létrehozásához és egy tábla létrehozásához. Ebben az útmutatóban a mobil háttérrendszer HTML-/JavaScript-webalkalmazásokban való használatára összpontosítunk.

Támogatott platformok

A böngészők támogatását a fő böngészők jelenlegi és utolsó verzióira korlátozzuk: Google Chrome, Microsoft Edge, Microsoft Internet Explorer és Mozilla Firefox. Elvárjuk, hogy az SDK bármilyen viszonylag modern böngészővel működjön.

A csomag univerzális JavaScript-modulként van terjesztve, így támogatja a globális, AMD- és CommonJS-formátumokat.

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

Ez az útmutató feltételezi, hogy létrehozott egy táblával rendelkező háttérrendszert. Ez az útmutató feltételezi, hogy a tábla sémája megegyezik az oktatóanyagokban szereplő táblákéval.

Az Azure Mobile Apps JavaScript SDK telepítése a npm következő paranccsal végezhető el:

npm install azure-mobile-apps-client --save

A kódtár ES2015-modulként is használható CommonJS-környezetekben, például a Browserify és a Webpack környezetekben, valamint AMD-kódtárként. Például:

// For ECMAScript 5.1 CommonJS
var WindowsAzure = require('azure-mobile-apps-client');
// For ES2015 modules
import * as WindowsAzure from 'azure-mobile-apps-client';

Az SDK előre elkészített verzióját is használhatja, ha közvetlenül a CDN-ről tölt le:

<script src="https://zumo.blob.core.windows.net/sdk/azure-mobile-apps-client.min.js"></script>

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

Útmutató: Felhasználók hitelesítése

Azure App Service 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ók használatával: Facebook, Google, Microsoft-fiók és Twitter. A táblákra vonatkozó engedélyeket beállíthatja, 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ával is implementálhatja az engedélyezési szabályokat a kiszolgálói szkriptekben. További információ: Ismerkedés a hitelesítéssel .

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égekkel, például az egyszeri bejelentkezéssel való mélyebb integrációt, mivel szolgáltatóspecifikus SDK-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. 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

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, miután sikeresen bejelentkezett az identitásszolgáltatóval. 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.

Útmutató: Mobil App Service konfigurálása külső átirányítási URL-címekhez.

Számos JavaScript-alkalmazástípus használ visszacsatolási képességet az OAuth felhasználói felületi folyamatainak kezeléséhez. Ilyen képességek:

A szolgáltatás helyi futtatása
A Live Reload használata az Ionic-keretrendszerrel
Átirányítás App Service hitelesítéshez.

A helyi futtatás problémákat okozhat, mert alapértelmezés szerint App Service hitelesítés csak úgy van konfigurálva, hogy engedélyezze a hozzáférést a mobilalkalmazás háttérrendszeréből. Az alábbi lépésekkel módosíthatja a App Service beállításait a hitelesítés engedélyezéséhez a kiszolgáló helyi futtatásakor:

Jelentkezzen be az Azure Portalra
Nyissa meg a Mobilalkalmazás háttérrendszerét.
Válassza az Erőforrás-kezelő lehetőséget a FEJLESZTŐI ESZKÖZÖK menüben.
Az Ugrás gombra kattintva megnyithatja a Mobilalkalmazás háttérrendszeréhez tartozó erőforrás-kezelőt egy új lapon vagy ablakban.
Bontsa ki az alkalmazás konfigurációs>hitelesítési csomópontját.
Kattintson a Szerkesztés gombra az erőforrás szerkesztésének engedélyezéséhez.
Keresse meg az allowedExternalRedirectUrls elemet, amelynek null értékűnek kell lennie. Adja hozzá az URL-címeket egy tömbhöz:
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
Cserélje le a tömb URL-címeit a szolgáltatás URL-címére, amely ebben a példában a helyi Node.js mintaszolgáltatáshoz tartozik https://localhost:3000 . Használhatja https://localhost:4400 a Ripple szolgáltatáshoz vagy más URL-címhez is, attól függően, hogy az alkalmazás hogyan van konfigurálva.
A lap tetején kattintson az Olvasás/Írás elemre, majd a PUT gombra a frissítések mentéséhez.

Ugyanezeket a visszacsatolási URL-címeket is hozzá kell adnia a CORS engedélyezési lista beállításaihoz:

Lépjen vissza a Azure Portal.
Nyissa meg a Mobilalkalmazás háttérrendszerét.
Kattintson a CORS elemre az API menüben.
Írja be az egyes URL-címeket az üres Engedélyezett források szövegmezőbe. Létrejön egy új szövegdoboz.
Kattintson a MENTÉS gombra

A háttérrendszer frissítései után használhatja az új visszacsatolási URL-címeket az alkalmazásban.

Megosztás a következőn keresztül:

A JavaScript-ügyfélkódtár használata az Azure Mobile Appshez

Áttekintés

Támogatott platformok

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

Ügyfélkapcsolat létrehozása

Táblázatok használata

Útmutató: Táblahivatkozás lekérdezése

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

Adatok lapozása

Útmutató: Rendezett adatok visszaadása

Útmutató: Adatok beszúrása

Útmutató: Adatok módosítása

Útmutató: Adatok törlése

Útmutató: Felhasználók hitelesítése

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

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

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

Útmutató: Mobil App Service konfigurálása külső átirányítási URL-címekhez.

További források

Megosztás a következőn keresztül:

A JavaScript-ügyfélkódtár használata az Azure Mobile Appshez

Áttekintés

Támogatott platformok

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

Ügyfélkapcsolat létrehozása

Táblázatok használata

Útmutató: Táblahivatkozás lekérdezése

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

Adatok lapozása

Útmutató: Rendezett adatok visszaadása

Útmutató: Adatok beszúrása

Útmutató: Adatok módosítása

Útmutató: Adatok törlése

Útmutató: Felhasználók hitelesítése

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

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

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

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

Útmutató: Mobil App Service konfigurálása külső átirányítási URL-címekhez.

További források