Přidání ověřování do aplikace Apache Cordova

Článek
11/08/2023

V tomto kurzu přidáte ověřování Microsoftu do projektu rychlého startu pomocí ID Microsoft Entra. Před dokončením tohoto kurzu se ujistěte, že jste vytvořili projekt a povolili offline synchronizaci .

Konfigurace back-endu pro ověřování

Pokud chcete nakonfigurovat back-end pro ověřování, musíte:

Vytvořte registraci aplikace.
Nakonfigurujte ověřování a autorizaci služby Aplikace Azure.
Přidejte aplikaci do povolených adres URL externího přesměrování.

V tomto kurzu nakonfigurujeme vaši aplikaci tak, aby používala ověřování Microsoftu. Tenant Microsoft Entra se ve vašem předplatném Azure nakonfiguroval automaticky. Ke konfiguraci ověřování Microsoftu můžete použít MICROSOFT Entra ID.

Potřebujete back-endovou adresu URL služby Azure Mobile Apps, kterou jste zadali při zřizování služby.

Vytvoření registrace aplikace

Přihlaste se k portálu Azure.
Vyberte Microsoft Entra ID> Registrace aplikací> New registration.
Na stránce Zaregistrovat aplikaci zadejte zumoquickstart do pole Název .
V části Podporované typy účtů vyberte Účty v libovolném adresáři organizace (libovolný adresář Microsoft Entra – víceklient) a osobní účty Microsoft (např. Skype, Xbox).
V identifikátoru URI přesměrování vyberte Web a zadejte <backend-url>/.auth/login/aad/callback. Pokud je https://zumo-abcd1234.azurewebsites.netnapříklad vaše adresa URL back-endu , zadáte https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Stiskněte tlačítko Zaregistrovat v dolní části formuláře.
Zkopírujte ID aplikace (klienta).
V levém podokně vyberte Certifikáty a tajné kódy>Nový tajný klíč klienta.
Zadejte vhodný popis, vyberte dobu trvání platnosti a pak vyberte Přidat.
Zkopírujte tajný kód na stránce Certifikáty a tajné kódy . Hodnota se znovu nezobrazí.
Vyberte Ověřování.
V části Implicitní udělení a hybridní toky povolte tokeny ID.
V horní části stránky stiskněte Uložit .

Důležité

Hodnota tajného klíče klienta (heslo) je důležitá pověření zabezpečení. Nesdílejte heslo s kýmkoli ani ho nedistribuujte v rámci klientské aplikace.

Konfigurace ověřování a autorizace služby Aplikace Azure

Na webu Azure Portal vyberte Všechny prostředky a pak službu App Service.
Vyberte Nastavení> Authentication.
Stiskněte přidat zprostředkovatele identity.
Jako zprostředkovatele identity vyberte Microsoft .
- V části Typ registrace aplikace vyberte Zadat podrobnosti o existující registraci aplikace.
- Vložte hodnoty, které jste zkopírovali dříve, do ID aplikace (klienta) a tajných kódů klienta.
- Jako adresu URL vystavitele zadejte https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Tato adresa URL je "magic tenant url" pro přihlášení Microsoftu.
- Chcete-li omezit přístup, vyberte Vyžadovat ověření.
- V případě neověřeného požadavku vyberte HTTP 401 Neautorizováno.
Stiskněte Přidat.
Jakmile se obrazovka ověřování vrátí, stiskněte klávesu Upravit vedle nastavení ověřování.
Do pole Povolené externí adresy URL pro přesměrování zadejte zumoquickstart://easyauth.callback.
Stiskněte Uložit.

Krok 10 vyžaduje, aby se před přístupem k vašemu back-endu ověřili všichni uživatelé. Jemně odstupňované ovládací prvky můžete poskytnout přidáním kódu do back-endu.

VĚDĚLI JSTE TO? Můžete také povolit uživatelům s účty organizace v Microsoft Entra ID, Facebooku, Google, Twitteru nebo libovolném poskytovateli kompatibilním s OpenID Připojení. Postupujte podle pokynů v dokumentaci ke službě Aplikace Azure Service.

Test, že se požaduje ověření

Spuštění aplikace pomocí cordova run android
Ověřte, že je po spuštění aplikace vyvolána neošetřená výjimka se stavovým kódem 401 (Neautorizováno).

Přidání ověřování do aplikace

Pokud chcete přidat ověřování prostřednictvím integrovaného poskytovatele, musíte:

Přidejte zprostředkovatele ověřování do seznamu známých dobrých zdrojů.
Před přístupem k datům zavolejte zprostředkovatele ověřování.

Aktualizace zásad zabezpečení obsahu

Každá aplikace Apache Cordova deklaruje své známé dobré zdroje prostřednictvím hlavičky Content-Security-Policy . Každý podporovaný poskytovatel má hostitele OAuth, kterého je potřeba přidat:

Poskytovatel	Název zprostředkovatele sady SDK	Hostitel 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`

Upravit www/index.html; přidat hostitele OAuth pro Microsoft Entra ID následujícím způsobem:

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

Obsah je více řádků pro čitelnost. Umístěte veškerý kód na stejný řádek.

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

Název aplikace jste už nahradili ZUMOAPPNAME .

Volání zprostředkovatele ověřování

Upravit www/js/index.js. Nahraďte metodu setup() následujícím kódem:

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

Otestování aplikace

Spusťte následující příkaz:

cordova run android

Po dokončení počátečního spuštění se zobrazí výzva k přihlášení pomocí přihlašovacích údajů Microsoftu. Po dokončení můžete přidávat a odstraňovat položky ze seznamu.

Tip

Pokud se emulátor nespustí automaticky, otevřete Android Studio a pak vyberte Konfigurovat>správce AVD. To vám umožní zařízení spustit ručně. Pokud spustíte adb devices -l, měli byste vidět vybrané emulované zařízení.

Odstranění prostředků

Teď jste dokončili kurz rychlého startu, můžete prostředky odstranit pomocí az group delete -n zumo-quickstartnástroje . Globální registraci aplikace používanou k ověřování můžete také odstranit prostřednictvím portálu.

Další kroky

Podívejte se na oddíly POSTUPY:

Můžete také provést rychlý start pro jinou platformu pomocí stejné služby:

Sdílet prostřednictvím