Добавление проверки подлинности в приложение Apache Cordova

Статья
05/05/2021

Заметка

Этот продукт отставлен. Сведения о замене проектов с помощью .NET 8 или более поздней версии см. вбиблиотеке Community Toolkit Datasync.

В этом руководстве описано, как добавить проверку подлинности Майкрософт в проект быстрого запуска с помощью идентификатора Microsoft Entra. Прежде чем завершить работу с этим руководством, убедитесь, что вы создали проект и включили автономную синхронизацию.

Настройка серверной части для проверки подлинности

Чтобы настроить серверную часть для проверки подлинности, необходимо:

Создайте регистрацию приложения.
Настройка проверки подлинности и авторизации службы приложений Azure.
Добавьте приложение в URL-адреса разрешенного внешнего перенаправления.

В этом руководстве мы настроим приложение для использования проверки подлинности Майкрософт. Клиент Microsoft Entra настроен автоматически в подписке Azure. Для настройки проверки подлинности Майкрософт можно использовать идентификатор Microsoft Entra.

Вам нужен внутренний URL-адрес службы мобильных приложений Azure, которая была предоставлена при подготовке службы.

Создание регистрации приложения

Войдите на портал Azure .
Выберите идентификатор Microsoft Entra ID>регистрации приложений>новой регистрации.
На странице Регистрация приложения введите zumoquickstart в поле Имя.
В разделе Поддерживаемые типы учетных записейвыберите учетные записи в любом каталоге организации (любой каталог Microsoft Entra — мультитенантный) и личных учетных записей Майкрософт (например, Skype, Xbox).
В URI перенаправлениявыберите веб- и введите <backend-url>/.auth/login/aad/callback. Например, если внутренний URL-адрес https://zumo-abcd1234.azurewebsites.net, введите https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Нажмите кнопку Зарегистрировать в нижней части формы.
Скопируйте идентификаторприложения (клиента).
В левой области выберите Сертификаты & секреты>новый секрет клиента.
Введите подходящее описание, выберите срок действия, а затем выберите Добавить.
Скопируйте секрет на странице сертификатов сертификатов &. Значение не отображается снова.
Выберитепроверки подлинности .
В разделе неявное предоставление и гибридные потокивключите маркеры идентификатора.
Нажмите клавишу Сохранить в верхней части страницы.

Важный

Значение секрета клиента (пароль) — это важные учетные данные безопасности. Не делитесь паролем с кем-либо или не распространяйте его в клиентском приложении.

Настройка проверки подлинности и авторизации службы приложений Azure

На портале Azureвыберите все ресурсы, а затем службу приложений.
Выберите Параметры>проверки подлинности.
Нажмите Добавить поставщик удостоверений.
Выберите Microsoft в качестве поставщика удостоверений.
- Для типа регистрации приложенийвыберите Укажите сведения о существующей регистрации приложений.
- Вставьте значения, скопированные ранее, в поля идентификатор приложения (клиента) и секрета клиента.
- Для URL-адреса издателявведите https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Этот URL-адрес — это "url-адрес магического клиента" для имен входа Майкрософт.
- Для ограничить доступвыберите Требовать проверку подлинности.
- Для неавторизованного запросавыберите HTTP 401 Несанкционированный.
Нажмите Добавить.
После возврата экрана проверки подлинности нажмите клавишу Изменить рядом с параметрами проверки подлинности.
В поле РАЗРЕШЕННЫЕ URL-адреса внешнего перенаправления введите zumoquickstart://easyauth.callback.
Нажмите клавишу Сохранить.

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

ЗНАЕТЕ ЛИ ВЫ? Вы также можете разрешить пользователям учетные записи организации в идентификаторе Microsoft Entra, Facebook, Google, Twitter или любом совместимом поставщике OpenID Connect. Следуйте инструкциям в документации по службе приложений Azure .

Проверка запрашиваемой проверки подлинности

Запуск приложения с помощью cordova run android
Убедитесь, что необработанное исключение с кодом состояния 401 (неавторизовано) возникает после запуска приложения.

Добавление проверки подлинности в приложение

Чтобы добавить проверку подлинности через встроенный поставщик, необходимо:

Добавьте поставщика проверки подлинности в список известных хороших источников.
Вызовите поставщика проверки подлинности перед доступом к данным.

Обновление политики безопасности содержимого

Каждое приложение Apache Cordova объявляет свои известные хорошие источники с помощью заголовка Content-Security-Policy. Каждый поддерживаемый поставщик имеет узел OAuth, который необходимо добавить:

Поставщик	Имя поставщика пакета SDK	Узел OAuth
Идентификатор Microsoft Entra	Идентификатор Microsoft Entra	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
Google	Google	`https://accounts.google.com`
Щебетать	щебетать	`https://api.twitter.com`

Изменение www/index.html; добавьте узел OAuth для идентификатора Microsoft Entra следующим образом:

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' 
    data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; 
    style-src 'self'; media-src *;">

Содержимое — это несколько строк для удобства чтения. Поместите весь код в одну строку.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; style-src 'self'; media-src *;">

Вы уже заменили ZUMOAPPNAME именем приложения.

Вызов поставщика проверки подлинности

Изменение www/js/index.js. Замените метод setup() следующим кодом:

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Тестирование приложения

Выполните следующую команду:

cordova run android

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

Кончик

Если эмулятор не запускается автоматически, откройте Android Studio, выберите Настроить>AVD Manager. Это позволит запустить устройство вручную. Если вы запускаете adb devices -l, вы увидите выбранное эмулированное устройство.

удаление ресурсов

Теперь вы завершили краткое руководство по началу работы, вы можете удалить ресурсы с помощью az group delete -n zumo-quickstart. Вы также можете удалить глобальную регистрацию приложений, используемую для проверки подлинности на портале.

Дальнейшие действия

Ознакомьтесь с разделами HOW TO:

Сервер (Node.js)
Сервер (ASP.NET Framework)
клиент Apache Cordova

Вы также можете выполнить краткое руководство для другой платформы с помощью той же службы:

Поделиться через