Dodawanie uwierzytelniania do Apache Cordova aplikacji

  • Artykuł

Podsumowanie

W tym samouczku dodasz uwierzytelnianie do projektu Szybkiego startu listy do Apache Cordova przy użyciu obsługiwanego dostawcy tożsamości. Ten samouczek jest oparty na Wprowadzenie z Mobile Apps samouczka, który należy najpierw wykonać.

Zarejestruj aplikację do uwierzytelniania i skonfiguruj App Service

Najpierw należy zarejestrować aplikację w witrynie dostawcy tożsamości, a następnie ustawić poświadczenia wygenerowane przez dostawcę w Mobile Apps danych.

  1. Skonfiguruj preferowanego dostawcę tożsamości, korzystając z instrukcji specyficznych dla dostawcy:

  2. Powtórz poprzednie kroki dla każdego dostawcy, którego chcesz obsługiwać w aplikacji.

Obejrzyj wideo przedstawiające podobne kroki

Ograniczanie uprawnień do uwierzytelnionych użytkowników

Domyślnie interfejsy API w Mobile Apps mogą być wywoływane anonimowo. Następnie należy ograniczyć dostęp tylko do uwierzytelnionych klientów.

  • Node.js (za pośrednictwem Azure Portal):

    W ustawieniach Mobile Apps kliknij pozycję Łatwe tabele i wybierz tabelę. Kliknij pozycję Zmień uprawnienia, wybierz opcję Dostęp uwierzytelniony tylko dla wszystkich uprawnień, a następnie kliknij przycisk Zapisz.

  • .NET back end (C#):

    W projekcie serwera przejdź do plikówControllersTodoItemController.cs>. Dodaj atrybut [Authorize] do klasy TodoItemController w następujący sposób. Aby ograniczyć dostęp tylko do określonych metod, można również zastosować ten atrybut tylko do tych metod, a nie do klasy . Ponownie opublikować projekt serwera.

      [Authorize]
  public class TodoItemController : TableController<TodoItem>

  • Node.js zaplecza (za pośrednictwem Node.js kodu):

    Aby wymagać uwierzytelniania w celu uzyskania dostępu do tabeli, dodaj następujący wiersz do Node.js skryptu serwera:

      table.access = 'authenticated';

    Aby uzyskać więcej informacji, zobacz Uwierzytelnianie wymagane w celu uzyskania dostępu do tabel. Aby dowiedzieć się, jak pobrać projekt kodu szybkiego startu ze swojej witryny, zobacz How to: Download the Node.js backend quickstart code project using Git (Jak pobrać projekt kodu szybkiego startu zaplecza przy użyciu usługi Git).

Teraz możesz sprawdzić, czy dostęp anonimowy do zaplecza został wyłączony. W Visual Studio:

  • Otwórz projekt, który został utworzony po ukończeniu samouczka, Wprowadzenie pomocą Mobile Apps.
  • Uruchom aplikację w aplikacji Google Android Emulator.
  • Sprawdź, czy po uruchamianiu aplikacji jest wyświetlany nieoczekiwany błąd połączenia.

Następnie zaktualizuj aplikację, aby uwierzytelniać użytkowników przed zażądaniem zasobów z zaplecza aplikacji mobilnej.

Dodawanie uwierzytelniania do aplikacji

  1. Otwórz projekt w Visual Studio, a następnie otwórz plik www/index.html do edycji.

  2. Content-Security-Policy Znajdź metatag w sekcji head. Dodaj hosta OAuth do listy dozwolonych źródeł.

    Dostawca Nazwa dostawcy zestawu SDK OAuth Host
    Azure Active Directory aad https://login.microsoftonline.com
    Facebook Facebook https://www.facebook.com
    Google Google https://accounts.google.com
    Microsoft microsoftaccount https://login.live.com
    Twitter Twitter https://api.twitter.com

    Przykładowe zasady Content-Security-Policy (zaimplementowane dla Azure Active Directory) są następujące:

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

    Zastąp https://login.microsoftonline.com zamień na hosta OAuth z powyższej tabeli. Aby uzyskać więcej informacji na temat metatagu content-security-policy, zobacz dokumentację Content-Security-Policy.

    Niektórzy dostawcy uwierzytelniania nie wymagają zmian zasad zabezpieczeń zawartości, jeśli są używane na odpowiednich urządzeniach przenośnych. Na przykład podczas korzystania z uwierzytelniania Google na urządzeniu z systemem Android nie są wymagane żadne zmiany zasad zabezpieczeń zawartości.

  3. Otwórz plik www/js/index.js do edycji, znajdź metodę onDeviceReady() i w obszarze kodu tworzenia klienta dodaj następujący kod:

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

    Ten kod zastępuje istniejący kod, który tworzy odwołanie do tabeli i odświeża interfejs użytkownika.

    Metoda login() rozpoczyna uwierzytelnianie od dostawcy. Metoda login() jest funkcją asynchroniczną, która zwraca obietnicę języka JavaScript. Pozostała część inicjalizacji jest umieszczana wewnątrz odpowiedzi obietnicy, tak aby nie była wykonywana do momentu ukończenia metody login().

  4. W właśnie dodanym kodzie zastąp SDK_Provider_Name wartość nazwą dostawcy logowania. Na przykład w Azure Active Directory użyj .client.login('aad')

  5. Uruchom projekt. Po zakończeniu inicjowania projektu aplikacja wyświetla stronę logowania OAuth dla wybranego dostawcy uwierzytelniania.

Następne kroki

Dowiedz się, jak korzystać z zestawów SDK.