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

Статья
10/23/2023

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

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

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

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

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

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

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

Войдите на портал Azure.
Выберите идентификатор Microsoft Entra Регистрация приложений>> New.
На странице Регистрация приложения введите 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 выберите Все ресурсы, а затем выберите службу приложений.
Выберите Параметры> Authentication.
Нажмите кнопку "Добавить поставщика удостоверений".
Выберите Корпорацию Майкрософт в качестве поставщика удостоверений.
- Для типа регистрации приложений выберите "Указать сведения о существующей регистрации приложения".
- Вставьте значения, скопированные ранее, в поля идентификатора приложения (клиента) и секрета клиента.
- Введите https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0URL-адрес издателя. Для имен входа Майкрософт это "URL-адрес клиента magic".
- В поле Ограничение доступа выберите Требовать проверку подлинности.
- Для неавторизованного запроса выберите HTTP 401 Unauthorized.
Нажмите кнопку Добавить.
После возврата экрана проверки подлинности нажмите клавишу Edit рядом с параметрами проверки подлинности.
В поле URL-адреса разрешенного внешнего перенаправления введите zumoquickstart://easyauth.callback.
Нажмите кнопку Save(Сохранить).

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

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

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

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

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

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

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

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

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

Provider	Имя поставщика SDK	Узел OAuth
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
Google	google	`https://accounts.google.com`
Twitter	twitter	`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. Это позволит запустить устройство вручную. При запуске adb devices -l должно отобразиться выбранное эмулируемое устройство.

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

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

Следующие шаги

Ознакомьтесь со следующими практическими разделами:

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