Azure Mobile Apps 向け JavaScript クライアントライブラリの使用方法

[アーティクル]
06/25/2019

概要

このガイドでは、最新の Azure Mobile Apps 向け JavaScript SDKを使用して一般的なシナリオを実行する方法について説明します。 Azure Mobile Apps を初めて使用する場合は、まず、「 Apache Cordova アプリの作成」を参照して、バックエンドおよびテーブルの作成を行ってください。このガイドでは、HTML/JavaScript Web アプリケーションでのモバイルバックエンドの使用に重点を置いています。

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

ブラウザーのサポートは、現在のバージョンおよび最新バージョンの主要ブラウザー (Google Chrome、Microsoft Edge、Microsoft Internet Explorer、Mozilla Firefox) に制限されています。この SDK は、比較的新しいブラウザーで機能すると思われます。

パッケージは Universal 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 を Mobile App の 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);

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

pages 変数といくつかの UI ボタンを使用して、ページリストを指定できます。loadPage() を使用すると、ページごとに新しいレコードを読み込むことができます。既に読み込まれているレコードへのアクセス時間を短縮するには、キャッシュを実装します。

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

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

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

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

方法: データを挿入する

適切な日付を指定して 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 サーバー SDK では、開発用に動的なスキーマをサポートしています。動的スキーマでは、挿入操作または更新操作で列を指定するだけで、テーブルに列を追加できます。実稼働環境にアプリケーションを移行する前に、動的スキーマを無効にしておくことをお勧めします。

方法: データを変更する

.insert() メソッドの場合と同様に、update オブジェクトを作成して .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 認証トークンを生成します。 login 関数は、完了すると、userId フィールドのユーザー ID と authenticationToken フィールドの 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 で提供されるトークンが変数 token に格納されるとします。

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

認証情報は、AJAX ライブラリによる HTTP 呼び出しを使用して /.auth/me エンドポイントから取得できます。 X-ZUMO-AUTH ヘッダーを認証トークンに設定していることを確認してください。認証トークンは client.currentUser.mobileServiceAuthenticationTokenに格納されています。たとえば、次のフェッチ 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 Framework でライブリロードを使用する。
認証のために 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 サービス用の https://localhost:4400 や他の URL を使用することもできます。
ページの上部で [読み取り/書き込み] 、 [PUT] の順にクリックして、更新を保存します。

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

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

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

Azure Mobile Apps 向け JavaScript クライアント ライブラリの使用方法

概要