Dodawanie uwierzytelniania do aplikacji Apache Cordova

Artykuł
11/08/2023

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 projekt został utworzony i włączono synchronizację w trybie offline.

Konfigurowanie zaplecza na potrzeby uwierzytelniania

Aby skonfigurować zaplecze na potrzeby uwierzytelniania, musisz:

Tworzenie rejestracji aplikacji.
Konfigurowanie uwierzytelniania i autoryzacji usługi aplikacja systemu Azure.
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

Zaloguj się w witrynie Azure Portal.
Wybierz pozycję Microsoft Entra ID> Rejestracje aplikacji> Nowa rejestracja.
Na stronie Rejestrowanie aplikacji wprowadź zumoquickstart w polu Nazwa.
W obszarze Obsługiwane typy kont wybierz pozycję Konta w dowolnym katalogu organizacyjnym (dowolny katalog Firmy Microsoft — wielodostępny) i kontach Osobistych Microsoft (np. Skype, Xbox).
W polu Identyfikator URI przekierowania wybierz pozycję Sieć Web i wpisz <backend-url>/.auth/login/aad/callback. Jeśli na przykład adres URL zaplecza to https://zumo-abcd1234.azurewebsites.net, wprowadź wartość https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Naciśnij przycisk Zarejestruj w dolnej części formularza.
Skopiuj identyfikator aplikacji (klient).
W okienku po lewej stronie wybierz pozycję Certyfikaty i wpisy tajne>Nowy klucz tajny klienta.
Wprowadź odpowiedni opis, wybierz czas trwania ważności, a następnie wybierz pozycję Dodaj.
Skopiuj wpis tajny na stronie Certyfikaty i wpisy tajne. Wartość nie jest ponownie wyświetlana.
Wybierz Uwierzytelnianie.
W obszarze Niejawne udzielanie i przepływy hybrydowe włącz tokeny identyfikatorów.
Naciśnij przycisk Zapisz w górnej części strony.

Ważne

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 aplikacja systemu Azure

W witrynie Azure Portal wybierz pozycję Wszystkie zasoby, a następnie usługę App Service.
Wybierz pozycję Ustawienia> Authentication.
Naciśnij pozycję Dodaj dostawcę tożsamości.
Wybierz pozycję Microsoft jako dostawcę tożsamości.
- W polu Typ rejestracji aplikacji wybierz pozycję Podaj szczegóły istniejącej rejestracji aplikacji.
- Wklej wartości skopiowane wcześniej do pól Identyfikator aplikacji (klienta) i Klucz tajny klienta.
- W polu Adres URL wystawcy wprowadź .https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0 Ten adres URL to "magiczny adres URL dzierżawy" dla logowań firmy Microsoft.
- W obszarze Ogranicz dostęp wybierz pozycję Wymagaj uwierzytelniania.
- W polu Żądanie nieuwierzytelnione wybierz pozycję HTTP 401 Brak autoryzacji.
Kliknij przycisk Dodaj.
Po powrocie ekranu uwierzytelniania naciśnij przycisk Edytuj obok pozycji Ustawienia uwierzytelniania.
W polu Dozwolone zewnętrzne adresy URL przekierowania wprowadź wartość zumoquickstart://easyauth.callback.
Naciśnij pozycję 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 platformą OpenID Połączenie. Postępuj zgodnie z instrukcjami w dokumentacji usługi aplikacja systemu Azure Service.

Testowanie żądania uwierzytelnienia

Uruchamianie aplikacji przy użyciu polecenia 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
Tożsamość Microsoft Entra	Tożsamość Microsoft Entra	`https://login.microsoftonline.com`
Facebook	Facebook	`https://www.facebook.com`
Google	Google	`https://accounts.google.com`
Twitter	twitter	`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 *;">

Nazwa aplikacji została już zastąpiona ZUMOAPPNAME nazwą.

Wywoływanie dostawcy uwierzytelniania

Edytuj www/js/index.jsplik . Zastąp metodę setup() poniższym 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ę Konfiguruj>menedżera AVD. Pozwoli to ręcznie uruchomić urządzenie. Jeśli uruchomisz polecenie adb devices -l, powinno zostać wyświetlone wybrane emulowane urządzenie.

Usuwanie zasobów

Teraz ukończono samouczek Szybki start, możesz usunąć zasoby za pomocą polecenia 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:

Udostępnij za pośrednictwem