Azure Mobile Apps で Apache Cordova クライアント ライブラリを使用する方法

• Android
• コルドバ
• JavaScript
• iOS
• Managed (Windows/Xamarin)

概要

このガイドでは、Azure Mobile Apps 用の最新のApache Cordova プラグインを使用して一般的なシナリオを実行する方法について説明します。 Azure Mobile Apps を初めて使用する場合は、まず Azure Mobile Apps クイック スタート 完了してバックエンドを作成し、テーブルを作成し、事前にビルドされた Apache Cordova プロジェクトをダウンロードします。 このガイドでは、クライアント側の Apache Cordova プラグインに焦点を当てます。

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

この SDK は、iOS、Android、および Windows デバイスで Apache Cordova v6.0.0 以降をサポートしています。 プラットフォームのサポートは次のとおりです。

• Android API 19-24 (KitKat から Nougat)。
• iOS バージョン 8.0 以降。
• Windows Phone 8.1。
• ユニバーサル Windows プラットフォーム (Universal Windows Platform)。

設定と前提条件

このガイドでは、テーブルを含むバックエンドを作成していることを前提としています。 このガイドでは、テーブルにこれらのチュートリアルのテーブルと同じスキーマがあることを前提としています。 このガイドでは、Apache Cordova プラグインをコードに追加していることを前提としています。 これを行っていない場合は、コマンド ラインで Apache Cordova プラグインをプロジェクトに追加できます。

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

最初の Apache Cordova アプリ 作成する方法の詳細については、そのドキュメントを参照してください。

Ionic v2 アプリの設定

Ionic v2 プロジェクトを適切に構成するには、まず基本的なアプリを作成し、Cordova プラグインを追加します。

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

次の行を app.component.ts に追加して、クライアント オブジェクトを作成します。

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

これで、ブラウザーでプロジェクトをビルドして実行できるようになりました。

ionic platform add browser
ionic run browser

Azure Mobile Apps Cordova プラグインは、Ionic v1 アプリと v2 アプリの両方をサポートしています。 WindowsAzure オブジェクトの追加宣言が必要なのは、Ionic v2 アプリだけです。

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

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 を使用して、サーバー スクリプトに承認規則を実装することもできます。 詳細については、認証を使い始める チュートリアルを参照してください。

Apache Cordova アプリで認証を使用する場合は、次の Cordova プラグインを使用できる必要があります。

• cordova-plugin-device
• cordova-plugin-inappbrowser

サーバー フローとクライアント フローの 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 を構成する。

いくつかの種類の Apache Cordova アプリケーションでは、ループバック機能を使用して OAuth UI フローを処理します。 localhost 上の OAuth UI フローは、認証サービスが既定でサービスを利用する方法のみを認識しているため、問題を引き起こします。 問題のある OAuth UI フローの例を次に示します。

• Ripple エミュレーター。
• Ionic を使用したライブ リロード。
• モバイル バックエンドをローカルで実行する
• 認証を提供する Azure App Service とは異なる Azure App Service でモバイル バックエンドを実行する。

次の手順に従って、ローカル設定を構成に追加します。

1. Azure ポータル にログインする

2. [すべてのリソース 選択するか、App Services してから、モバイル アプリの名前をクリックします。

3. [ツール] をクリックします

4. OBSERVE メニューで リソース エクスプローラー をクリックし、実行 をクリックします。 新しいウィンドウまたはタブが開きます。

5. 左側のナビゲーションでサイトの構成 ノードと 認証設定 ノードを展開します。

6. クリック編集

7. "allowedExternalRedirectUrls" 要素を探します。 null または値の配列に設定できます。 値を次の値に変更します。

     "allowedExternalRedirectUrls": [
         "https://localhost:3000",
         "https://localhost:3000"
     ],
   

   URL をサービスの URL に置き換えます。 たとえば、https://localhost:3000 (Node.js サンプル サービスの場合) や https://localhost:4400 (Ripple サービスの場合) などがあります。 ただし、これらの URL は例です。例に記載されているサービスを含め、状況は異なる場合があります。

8. 画面の右上隅にある [読み取り/書き込み] ボタンをクリックします。

9. 緑色の [put ] ボタン クリックします。

この時点で設定が保存されます。 設定の保存が完了するまで、ブラウザー ウィンドウを閉じないでください。 また、次のループバック URL を App Service の CORS 設定に追加します。

1. Azure ポータルにログインします。
2. [すべてのリソース 選択するか、App Services してから、モバイル アプリの名前をクリックします。
3. [設定] ブレードが自動的に開きます。 表示されない場合は、[すべての設定] クリックします。
4. [API] メニュー [CORS] をクリックします。
5. 表示されたボックスに追加する URL を入力し、Enter キーを押します。
6. 必要に応じて、追加の URL を入力します。
7. [保存] をクリックして設定を保存します。

新しい設定が有効にするには、約 10 ~ 15 秒かかります。

方法: プッシュ通知に登録する

プッシュ通知を処理するために、phonegap-plugin-push をインストールします。 このプラグインは、コマンド ラインで cordova plugin add コマンドを使用するか、Visual Studio 内の Git プラグイン インストーラーを使用して簡単に追加できます。 Apache Cordova アプリの次のコードは、プッシュ通知用にデバイスを登録します。

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

Notification Hubs SDK を使用して、サーバーからプッシュ通知を送信します。 クライアントからプッシュ通知を直接送信しないでください。 これを使用して、Notification Hubs または PNS に対するサービス拒否攻撃をトリガーできます。 PNS は、このような攻撃の結果としてトラフィックを禁止する可能性があります。

詳細情報

詳細な API の詳細については、API のドキュメントを参照してください。