Azure Mobile Apps 用の JavaScript クライアントライブラリを使用する方法

2019-06-25

概要

このガイドでは、 Azure Mobile Apps 用の最新の JavaScript SDK を使用して一般的なシナリオを実行する方法について説明します。 Azure Mobile Apps を初めて使用する場合は、まず Azure Mobile Apps クイックスタートを完了してバックエンドを作成し、テーブルを作成します。このガイドでは、HTML/JavaScript Web アプリケーションでモバイルバックエンドを使用することに重点を置きます。

サポートされているプラットフォーム

ブラウザーのサポートは、Google Chrome、Microsoft Edge、Microsoft Internet Explorer、Mozilla Firefox の最新バージョンと最新バージョンに制限されています。 SDK は、比較的最新のブラウザーで機能することが期待されます。

このパッケージはユニバーサル JavaScript モジュールとして配布されるため、グローバル、AMD、および CommonJS 形式がサポートされます。

設定と前提条件

このガイドでは、テーブルを含むバックエンドを作成していることを前提としています。このガイドでは、テーブルにこれらのチュートリアルのテーブルと同じスキーマがあることを前提としています。

Azure Mobile Apps JavaScript SDK のインストールは、 npm コマンドを使用して行うことができます。

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

このライブラリは、Browserify や Webpack などの CommonJS 環境内の ES2015 モジュールとして、AMD ライブラリとして使用することもできます。例えば次が挙げられます。

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

CDN から直接ダウンロードすることで、SDK の事前構築済みバージョンを使用することもできます。

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

クライアント接続を作成する

WindowsAzure.MobileServiceClient オブジェクトを作成してクライアント接続を作成します。 appUrl をモバイルアプリの URL に置き換えます。

var client = WindowsAzure.MobileServiceClient(appUrl);

テーブルを操作する

データにアクセスまたは更新するには、バックエンドテーブルへの参照を作成します。 tableName をテーブルの名前に置き換える

var table = client.getTable(tableName);

テーブル参照を作成したら、テーブルをさらに操作できます。

テーブルのクエリを実行する
- データのフィルタリング
- データのページング
- データの並べ替え
データ挿入
データの変更
データの削除

方法: テーブル参照のクエリを実行する

テーブル参照を取得したら、それを使用してサーバー上のデータのクエリを実行できます。クエリは"LINQ に似た" 言語で行われます。テーブルからすべてのデータを返すには、次のコードを使用します。

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

成功関数は結果と共に呼び出されます。他のクエリ関数 (for (var i in results)など) が使用されている場合に結果に含まれる情報を反復処理するために、成功関数で .includeTotalCount() を使用しないでください。

クエリ構文の詳細については、[クエリオブジェクトのドキュメント]を参照してください。

サーバー上のデータのフィルター処理

テーブル参照では、where 句を使用できます。

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

オブジェクトをフィルター処理する関数を使用することもできます。この場合、this 変数は、フィルター処理されている現在のオブジェクトに割り当てられます。次のコードは、機能的には前の例と同等です。

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

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

データのページング

take() メソッドと skip() メソッドを利用します。たとえば、テーブルを 100 行のレコードに分割する場合は、次のようにします。

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() メソッドは、totalCount フィールドを結果オブジェクトに追加するために使用されます。 totalCount フィールドには、ページングが使用されていない場合に返されるレコードの合計数が入力されます。

その後、ページ変数といくつかの UI ボタンを使用して、ページリストを提供できます。loadPage() を使用して、各ページの新しいレコードを読み込みます。既に読み込まれているレコードへのアクセスを高速化するためのキャッシュを実装します。

方法: 並べ替えられたデータを返す

.orderBy() または .orderByDescending() クエリメソッドを使用します。

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

Query オブジェクトの詳細については、[クエリオブジェクトのドキュメント]を参照してください。

方法: データを挿入する

適切な日付の JavaScript オブジェクトを作成し、table.insert() 非同期で呼び出します。

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

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

挿入が成功すると、挿入された項目と、同期操作に必要な追加のフィールドが返されます。後で更新するために、この情報を使用して独自のキャッシュを更新します。

Azure Mobile Apps Node.js Server SDK では、開発目的で動的スキーマがサポートされています。動的スキーマを使用すると、挿入操作または更新操作で列を指定することで、テーブルに列を追加できます。アプリケーションを運用環境に移行する前に、動的スキーマを無効にすることをお勧めします。

方法: データを変更する

.insert() メソッドと同様に、Update オブジェクトを作成し、.update()を呼び出す必要があります。更新オブジェクトには、更新するレコードの ID が含まれている必要があります。この ID は、レコードの読み取り時または .insert()呼び出し時に取得されます。

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

方法: データを削除する

レコードを削除するには、.del() メソッドを呼び出します。オブジェクト参照に ID を渡します。

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

方法: ユーザーを認証する

Azure App Service では、Facebook、Google、Microsoft アカウント、Twitter など、さまざまな外部 ID プロバイダーを使用したアプリユーザーの認証と承認がサポートされています。特定の操作のアクセスを認証済みユーザーのみに制限するように、テーブルに対するアクセス許可を設定できます。認証されたユーザーの ID を使用して、サーバースクリプトに承認規則を実装することもできます。詳細は、認証の概要を始めるチュートリアルをご覧ください。

サーバーフローとクライアントフローの 2 つの認証フローがサポートされています。サーバーフローは、プロバイダーの Web 認証インターフェイスに依存するため、最も単純な認証エクスペリエンスを提供します。クライアントフローを使用すると、プロバイダー固有の SDK に依存するため、シングルサインオンなどのデバイス固有の機能とのより深い統合が可能になります。

方法: プロバイダーで認証する (サーバーフロー)

Mobile Apps でアプリの認証プロセスを管理するには、アプリを ID プロバイダーに登録する必要があります。次に、Azure App Service で、プロバイダーによって提供されるアプリケーション ID とシークレットを構成する必要があります。詳細については、チュートリアル「アプリに認証を追加する」を参照してください。

ID プロバイダーを登録したら、プロバイダーの名前で .login() メソッドを呼び出します。たとえば、Facebook でサインインするには、次のコードを使用します。

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

プロバイダーの有効な値は、'aad'、'facebook'、'google'、'microsoftaccount'、および 'twitter' です。

注

現在、Google 認証はサーバーフロー経由では機能しません。 Google で認証するには、クライアントフローメソッドを使用する必要があります。

この場合、Azure App Service は OAuth 2.0 認証フローを管理します。選択したプロバイダーのサインインページが表示され、ID プロバイダーで正常にサインインした後に App Service 認証トークンが生成されます。ログイン関数は、完了すると、userId フィールドと authenticationToken フィールドのユーザー ID と App Service 認証トークンの両方を公開する JSON オブジェクトを返します。このトークンは、有効期限が切れるまでキャッシュして再利用できます。

方法: プロバイダーで認証する (クライアントフロー)

アプリは、ID プロバイダーに個別に連絡し、返されたトークンを認証のために App Service に提供することもできます。このクライアントフローを使用すると、ユーザーにシングルサインインエクスペリエンスを提供したり、ID プロバイダーから追加のユーザーデータを取得したりできます。

この例では、認証に Facebook クライアント SDK を使用します。

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

この例では、それぞれのプロバイダー SDK によって提供されるトークンがトークン変数に格納されていることを前提としています。

方法: 認証されたユーザーに関する情報を取得する

認証情報は、任意の AJAX ライブラリで HTTP 呼び出しを使用して、/.auth/me エンドポイントから取得できます。 X-ZUMO-AUTH ヘッダーを認証トークンに設定していることを確認します。認証トークンは、client.currentUser.mobileServiceAuthenticationTokenに格納されます。たとえば、fetch API を使用するには、次のようにします。

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

フェッチは npm パッケージとして、または CDNJS からブラウザーでダウンロードするために使用できます。 jQuery または別の AJAX API を使用して情報をフェッチすることもできます。データは JSON オブジェクトとして受信されます。

方法: 外部リダイレクト URL 用に Mobile App Service を構成する。

いくつかの種類の JavaScript アプリケーションでは、ループバック機能を使用して OAuth UI フローを処理します。これらの機能には、次のものが含まれます。

ローカルでのサービスの実行
Ionic フレームワークでのライブリロードの使用
認証のために App Service にリダイレクトする。

既定では、App Service 認証はモバイルアプリバックエンドからのアクセスのみを許可するように構成されているため、ローカルで実行すると問題が発生する可能性があります。次の手順を使用して、サーバーをローカルで実行するときに認証を有効にするように App Service の設定を変更します。

Azure portal にログインする
モバイルアプリバックエンドに移動します。
[開発ツール] メニューの [リソースエクスプローラー] を選択します。
[ 移動 ] をクリックして、モバイルアプリバックエンドのリソースエクスプローラーを新しいタブまたはウィンドウで開きます。
アプリの config>authsettings ノードを展開します。
[ 編集 ] ボタンをクリックして、リソースの編集を有効にします。
allowedExternalRedirectUrls 要素を見つけます。これは null にする必要があります。配列に URL を追加します。
```
  "allowedExternalRedirectUrls": [
      "https://localhost:3000",
      "https://localhost:3000"
  ],
```
配列内の URL をサービスの URL に置き換えます。この例では、ローカル Node.js サンプルサービスに https://localhost:3000 されています。また、アプリの構成方法に応じて、Ripple サービスやその他の URL に https://localhost:4400 を使用することもできます。
ページの上部にある [ 読み取り/書き込み] をクリックし、[ PUT ] をクリックして更新プログラムを保存します。

CORS 許可リスト設定に同じループバック URL を追加する必要もあります。

Azure portal に戻ります。
モバイルアプリバックエンドに移動します。
API メニューの [CORS] をクリックします。
空の [許可される配信元 ] テキストボックスに各 URL を入力します。新しいテキストボックスが作成されます。
[保存] をクリックします

バックエンドの更新後、アプリで新しいループバック URL を使用できるようになります。