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


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

Сводка

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

Регистрация приложения для проверки подлинности и настройка службы приложений

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

  1. Настройте предпочитаемого поставщика удостоверений, следуя инструкциям для конкретного поставщика:

  2. Повторите предыдущие шаги для каждого поставщика, которого вы хотите поддерживать в приложении.

Смотреть видео с аналогичными шагами

Ограничение разрешений для пользователей, прошедших проверку подлинности

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

  • Node.js внутренний интерфейс (через портал Azure):

    В параметрах мобильных приложений нажмите Easy Tables и выберите свою таблицу. Щелкните Изменить разрешения, выберите только проверенный доступ для всех разрешений, а затем нажмите Сохранить.

  • .NET бэкэнд (C#):

    В проекте сервера перейдите к контроллерам>TodoItemController.cs. Добавьте атрибут [Authorize] в класс TodoItemController, как показано ниже. Чтобы ограничить доступ только к определенным методам, этот атрибут также можно применить только к этим методам, а не к классу. Переопубликуйте серверный проект.

      [Authorize]
      public class TodoItemController : TableController<TodoItem>
    
  • Node.js бекенд (через код Node.js):

    Чтобы требовать проверку подлинности для доступа к таблицам, добавьте следующую строку в скрипт сервера Node.js:

      table.access = 'authenticated';
    

    Дополнительные сведения см. в разделе Практическое руководство. Требование проверки подлинности для доступа к таблицам. Сведения о том, как скачать проект кода быстрого запуска с сайта, см. в статье Практическое руководство. Скачивание проекта кода внутреннего руководства Node.js с помощью Git.

Теперь можно убедиться, что анонимный доступ к серверной части отключен. В Visual Studio:

  • Откройте проект, созданный при выполнении руководства по началу работы с мобильными приложениями.
  • Запустите приложение в эмуляторе Google Android.
  • Убедитесь, что после запуска приложения отображается непредвиденная ошибка подключения.

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

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

  1. Откройте проект в Visual Studio, а затем откройте www/index.html файл для редактирования.

  2. Content-Security-Policy Найдите метаметок в разделе головы. Добавьте хост OAuth в список разрешенных источников.

    Поставщик Имя поставщика пакета SDK Хост OAuth
    Azure Active Directory aad https://login.microsoftonline.com
    Facebook facebook https://www.facebook.com
    Google Google https://accounts.google.com
    Корпорация Майкрософт учетная запись Microsoft https://login.live.com
    Твиттер твиттер https://api.twitter.com

    Пример content-Security-Policy (реализован для Azure Active Directory) следующим образом:

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

    Замените https://login.microsoftonline.com на хост OAuth из предыдущей таблицы. Для получения дополнительных сведений о мета-теге политики безопасности содержимого см. документацию по Content-Security-Policy.

    Некоторые поставщики проверки подлинности не требуют изменений содержимогоSecurity-Policy при использовании на соответствующих мобильных устройствах. Например, при использовании Google аутентификации на устройстве Android изменения Content-Security-Policy не требуются.

  3. www/js/index.js Откройте файл для редактирования, найдите onDeviceReady() метод и в коде создания клиента добавьте следующий код:

     // Login to the service
     client.login('SDK_Provider_Name')
         .then(function () {
    
             // BEGINNING OF ORIGINAL CODE
    
             // Create a table reference
             todoItemTable = client.getTable('todoitem');
    
             // Refresh the todoItems
             refreshDisplay();
    
             // Wire up the UI Event Handler for the Add Item
             $('#add-item').submit(addItemHandler);
             $('#refresh').on('click', refreshDisplay);
    
             // END OF ORIGINAL CODE
    
         }, handleError);
    

    Этот код заменяет существующий код, который создает ссылку на таблицу и обновляет пользовательский интерфейс.

    Метод login() запускает аутентификацию через поставщика. Метод login() — это асинхронная функция, возвращающая обещание JavaScript. Остальная часть инициализации помещается в ответ обещания, чтобы он не выполнялся до завершения метода login().

  4. В только что добавленном коде замените SDK_Provider_Name имя поставщика входа. Например, для Azure Active Directory используйте client.login('aad').

  5. Запустите проект. После завершения инициализации проекта приложение отображает страницу входа OAuth для выбранного поставщика проверки подлинности.

Дальнейшие шаги

Узнайте, как использовать пакеты SDK.