Udostępnij za pośrednictwem

Dodawanie uwierzytelniania do aplikacji Apache Cordova

  • Artykuł

Nuta

Ten produkt jest wycofany. Aby zastąpić projekty przy użyciu platformy .NET 8 lub nowszej, zobacz bibliotekę datasync zestawu narzędzi Community Toolkit.

W tym samouczku dodasz uwierzytelnianie firmy Microsoft do projektu Szybkiego startu przy użyciu identyfikatora Entra firmy Microsoft. Przed ukończeniem tego samouczka upewnij się, że utworzono projektu i włączono synchronizację w trybie offline.

Konfigurowanie zaplecza na potrzeby uwierzytelniania

Aby skonfigurować zaplecze na potrzeby uwierzytelniania, musisz:

  • Utwórz rejestrację aplikacji.
  • Konfigurowanie uwierzytelniania i autoryzacji usługi Azure App Service.
  • Dodaj aplikację do dozwolonych zewnętrznych adresów URL przekierowania.

W tym samouczku skonfigurujemy aplikację do korzystania z uwierzytelniania firmy Microsoft. Dzierżawa firmy Microsoft Entra została skonfigurowana automatycznie w ramach subskrypcji platformy Azure. Aby skonfigurować uwierzytelnianie firmy Microsoft, możesz użyć identyfikatora Entra firmy Microsoft.

Potrzebny jest adres URL zaplecza usługi Azure Mobile Apps, która została podana podczas aprowizowania usługi.

Tworzenie rejestracji aplikacji

  1. Zaloguj się do witryny Azure Portal.
  2. Wybierz pozycję Microsoft Entra ID>Rejestracje aplikacji>Nowa rejestracja.
  3. Na stronie Rejestrowanie aplikacji wprowadź w polu nazwa .
  4. W obszarze Obsługiwane typy kontwybierz pozycję konta w dowolnym katalogu organizacyjnym (dowolny katalog Microsoft Entra — wielodostępny) i osobiste konta Microsoft (np. Skype, Xbox).
  5. W identyfikator URI przekierowaniawybierz pozycję Web i wpisz <backend-url>/.auth/login/aad/callback. Jeśli na przykład adres URL zaplecza to https://zumo-abcd1234.azurewebsites.net, wprowadź https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
  6. Naciśnij przycisk Zarejestruj w dolnej części formularza.
  7. Skopiuj identyfikator aplikacji (klienta).
  8. W okienku po lewej stronie wybierz pozycję Certyfikaty & wpisy tajne>Nowy klucz tajny klienta.
  9. Wprowadź odpowiedni opis, wybierz czas trwania ważności, a następnie wybierz pozycję Dodaj.
  10. Skopiuj wpis tajny na stronie certyfikatów certyfikatów &. Wartość nie jest ponownie wyświetlana.
  11. Wybierz pozycję Authentication.
  12. W obszarze Niejawne udzielanie i przepływy hybrydowewłącz tokeny identyfikatorów .
  13. Naciśnij Zapisz w górnej części strony.

Ważny

Wartość wpisu tajnego klienta (hasło) jest ważnym poświadczenie zabezpieczeń. Nie udostępniaj hasła nikomu ani nie rozpowszechniaj go w aplikacji klienckiej.

Konfigurowanie uwierzytelniania i autoryzacji usługi Azure App Service

  1. W witrynie Azure Portalwybierz pozycję Wszystkie zasoby, a następnie usługę App Service.

  2. Wybierz pozycję Ustawienia >Authentication.

  3. Naciśnij Dodaj dostawcę tożsamości.

  4. Wybierz microsoft jako dostawcę tożsamości.

    • W obszarze Typ rejestracji aplikacjiwybierz pozycję Podaj szczegóły istniejącej rejestracji aplikacji.
    • Wklej wartości skopiowane wcześniej do pól Identyfikator aplikacji (klienta) aplikacji i klucza tajnego klienta klienta.
    • W przypadkuadresu URL wystawcy wprowadź . Ten adres URL to "magiczny adres URL dzierżawy" dla logowań firmy Microsoft.
    • W przypadku Ogranicz dostępwybierz pozycję Wymagaj uwierzytelniania.
    • W przypadku żądanie nieuwierzytelnionewybierz pozycję HTTP 401 Brak autoryzacji.

  5. Naciśnij dodaj.

  6. Po powrocie ekranu uwierzytelniania naciśnij Edytuj obok pozycji Ustawienia uwierzytelniania.

  7. W polu Dozwolone zewnętrzne adresy URL przekierowania wprowadź zumoquickstart://easyauth.callback.

  8. Naciśnij zapisz.

Krok 10 wymaga uwierzytelnienia wszystkich użytkowników przed uzyskaniem dostępu do zaplecza. Możesz udostępnić szczegółowe kontrolki, dodając kod do zaplecza.

CZY WIESZ? Możesz również zezwolić użytkownikom z kontami organizacyjnymi w usłudze Microsoft Entra ID, Facebook, Google, Twitter lub dowolnym dostawcy zgodnym z protokołem OpenID Connect. Postępuj zgodnie z instrukcjami w dokumentacji usługi Azure App Service .

Testowanie żądania uwierzytelnienia

  • Uruchamianie aplikacji przy użyciu cordova run android
  • Sprawdź, czy po uruchomieniu aplikacji jest zgłaszany nieobsługiwany wyjątek z kodem stanu 401 (Brak autoryzacji).

Dodawanie uwierzytelniania do aplikacji

Aby dodać uwierzytelnianie za pośrednictwem wbudowanego dostawcy, musisz:

  • Dodaj dostawcę uwierzytelniania do listy znanych dobrych źródeł.
  • Przed uzyskaniem dostępu do danych wywołaj dostawcę uwierzytelniania.

Aktualizowanie zasad zabezpieczeń zawartości

Każda aplikacja Apache Cordova deklaruje swoje znane dobre źródła za pośrednictwem nagłówka Content-Security-Policy. Każdy obsługiwany dostawca ma hosta OAuth, który należy dodać:

Dostawca Nazwa dostawcy zestawu SDK OAuth Host
Microsoft Entra ID Microsoft Entra ID https://login.microsoftonline.com
Facebook facebook https://www.facebook.com
Google google https://accounts.google.com
Świergot świergot https://api.twitter.com

Edytuj www/index.html; dodaj hosta OAuth dla identyfikatora Entra firmy Microsoft w następujący sposób:

<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 *;">

Zawartość jest wieloma wierszami umożliwiającymi czytelność. Umieść cały kod w tym samym wierszu.

<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 został już zastąpiony nazwą aplikacji.

Wywoływanie dostawcy uwierzytelniania

Edytuj www/js/index.js. Zastąp metodę setup() następującym kodem:

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

Testowanie aplikacji

Uruchom następujące polecenie:

cordova run android

Po zakończeniu początkowego uruchamiania zostanie wyświetlony monit o zalogowanie się przy użyciu poświadczeń firmy Microsoft. Po zakończeniu możesz dodawać i usuwać elementy z listy.

Napiwek

Jeśli emulator nie zostanie uruchomiony automatycznie, otwórz program Android Studio, a następnie wybierz pozycję Configure>AVD Manager. Pozwoli to ręcznie uruchomić urządzenie. Jeśli uruchomisz adb devices -l, powinna zostać wyświetlona wybrana emulowana maszyna.

Usuwanie zasobów

Teraz ukończono samouczek Szybki start, możesz usunąć zasoby za pomocą az group delete -n zumo-quickstart. Możesz również usunąć globalną rejestrację aplikacji używaną do uwierzytelniania za pośrednictwem portalu.

Następne kroki

Zapoznaj się z sekcjami INSTRUKCJE:

Możesz również wykonać przewodnik Szybki start dla innej platformy przy użyciu tej samej usługi: