Как использовать клиентскую библиотеку JavaScript для мобильных приложений Azure

• Android
• Cordova
• JavaScript
• iOS
• Управляемый клиент (Windows, Xamarin)

Общие сведения

В этом руководстве показано, как реализовать типичные сценарии с использованием последней версии пакета SDK JavaScript для мобильных приложений Azure. Если вы не знакомы с мобильными приложениями Azure, сначала изучите статью Быстрый запуск мобильного приложения Azure , чтобы создать серверную часть и таблицу. В этом руководстве мы рассмотрим использование мобильного внутреннего сервера в веб-приложениях HTML и JavaScript.

Поддерживаемые платформы

Для текущей и последней версий поддерживаются основные браузеры: Google Chrome, Microsoft Edge, Microsoft Internet Explorer и Mozilla Firefox. Ожидается, что пакет SDK будет работать с любым относительно современным браузером.

Этот пакет распространяется в виде универсального модуля JavaScript, поэтому он поддерживает глобальные переменные, AMD и форматы CommonJS.

Настройка и необходимые компоненты

В данном руководстве предполагается, что вы уже создали серверную часть с таблицей. В этом руководстве предполагается, что в таблице используется та же схему, что и в таблицах, приведенных в этих учебниках.

Установить пакет SDK JavaScript для мобильных приложений Azure можно с помощью команды npm .

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

Библиотеку также можно использовать как модуль ES2015 в средах CommonJS, таких как Browserify и Webpack, а также как библиотеку AMD. Пример:

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

Можно также использовать готовую версию пакета SDK, скачав ее непосредственно из нашей сети CDN.

<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. В этом поле указывается общее количество записей, которое будет возвращено, если данные не разбиты на страницы.

После этого можно настроить список страниц, используя переменную pages и определенные кнопки пользовательского интерфейса, и загрузить новые данные на каждой странице с помощью метода 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);

Вставленный элемент возвращается с дополнительными полями, необходимыми для операций синхронизации. Обновите свой кэш, используя эти данные для последующих обновлений.

Серверный пакет SDK мобильных приложений Azure для Node.js поддерживает динамическую схему для целей разработки. Динамическая схема позволяет добавлять столбцы в таблицу, указывая их в операциях вставки или обновления. Перед переносом приложения в рабочую среду динамическую схему рекомендуется отключить.

Практическое руководство. Изменение данных

Как и при использовании метода .insert(), в этом случае следует создать объект обновления и вызвать метод .update(). Объект обновления должен содержать идентификатор обновляемой записи, получаемый при ее чтении или при вызове метода .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(). В ссылке на объект укажите идентификатор:

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

Практическое руководство. Проверка подлинности пользователей

Служба приложений Azure поддерживает аутентификацию и авторизацию пользователей с помощью различных внешних поставщиков удостоверений: Facebook, Google, учетная запись Майкрософт и Twitter. Можно задать разрешения таблиц, чтобы предоставить доступ к определенным операциям только пользователям, прошедшим проверку подлинности. Удостоверения пользователей, прошедших проверку подлинности, также можно применять для реализации правил авторизации в серверных скриптах. Дополнительные сведения см. в учебнике Приступая к работе с проверкой подлинности.

Поддерживается два потока аутентификации: серверный и клиентский. Серверный поток обеспечивает самый простой способ проверки подлинности, так как он использует веб-интерфейс проверки подлинности. Клиентский поток обеспечивает более тесную интеграцию с возможностями устройства, такими как единый вход, так как использует пакеты SDK конкретного поставщика.

Практическое руководство. Проверка подлинности с помощью поставщика (серверный поток)

Чтобы мобильные приложения могли выполнять процесс проверки подлинности в вашем приложении, необходимо зарегистрировать приложение у поставщика удостоверений. Затем в службе приложений Azure необходимо настроить код приложения и секретный код, предоставленный поставщиком. Дополнительные сведения см. в учебнике Добавление проверки подлинности в приложение.

После регистрации у поставщика удостоверений вызовите метод .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 управляет потоком проверки подлинности согласно протоколу OAuth 2.0. Она отображает страницу входа выбранного поставщика и создает маркер проверки подлинности службы приложений после успешного входа с помощью поставщика удостоверений. Функция login после завершения работы возвращает объект JSON, который содержит и идентификатор пользователя, и маркер проверки подлинности службы приложений в полях userId и authenticationToken соответственно. Этот маркер можно поместить в кэш и повторно использовать, пока не истечет срок его действия.

Практическое руководство. Проверка подлинности с помощью поставщика (клиентский поток)

Приложение может также независимо связаться с поставщиком удостоверений и сообщить возвращаемый маркер вашей службе приложений для проверки подлинности. Этот клиентский поток позволяет пользователям выполнять единый вход или получать дополнительные данные о пользователе от поставщика удостоверений.

Простой пример проверки подлинности на основе учетной записи социальной сети

В этом примере используется пакет SDK для клиента Facebook для проверки подлинности:

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.

Практическое руководство. Получение сведений о пользователе, прошедшем аутентификацию

Сведения о проверке подлинности можно получить из конечной точки /.auth/me, выполнив вызов HTTP с помощью любой библиотеки AJAX. Обязательно настройте заголовок 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 или другой API AJAX. Данные получаются в виде объекта JSON.

Практическое руководство. Настройка мобильных Служба приложений для внешних URL-адресов перенаправления.

Для обработки потоков пользовательского интерфейса OAuth некоторые типы приложений JavaScript используют функцию замыкания на себя. К этим возможностям относятся следующие:

• выполнение службы в локальной среде;
• использование динамической перезагрузки с платформой Ionic;
• перенаправление в службу приложений для аутентификации.

Выполнение в локальной среде может вызвать проблемы, так как по умолчанию аутентификация службы приложений настроена только для доступа из серверной части мобильного приложения. Следуйте инструкциям ниже, чтобы изменить параметры службы приложений для включения аутентификации при выполнении сервера в локальной среде.

1. Войдите на портал Azure

2. Перейдите к серверной части мобильного приложения.

3. В меню Средства разработки выберите Обозреватель ресурсов.

4. Щелкните Перейти , чтобы открыть обозреватель ресурсов для серверной части мобильного приложения в новой вкладке или окне.

5. Разверните узел config>authsettings для приложения.

6. Нажмите кнопку Изменить , чтобы включить режим редактирования ресурса.

7. Найдите элемент allowedExternalRedirectUrls , который должен иметь значение NULL. Добавьте URL-адреса в массив.

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

   Замените URL-адреса в массиве URL-адресами службы. В данном примере — это https://localhost:3000 для локального примера службы Node.js. Можно также использовать адрес https://localhost:4400 для службы Ripple или для других URL-адресов, в зависимости от настроек приложения.

8. В верхней части страницы щелкните Чтение и запись, затем щелкните PUT, чтобы сохранить изменения.

Кроме того, необходимо добавить те же URL-адреса замыкания на себя в параметры списка разрешенных CORS:

1. Вернитесь на портал Azure.
2. Перейдите к серверной части мобильного приложения.
3. В меню API щелкните CORS.
4. Введите каждый URL-адрес в пустое текстовое поле Разрешенные источники . Будет создано новое текстовое поле.
5. Нажмите кнопку СОХРАНИТЬ.

После обновления серверной части мобильного приложения вы сможете использовать новые URL-адреса замыкания на себя в приложении.