Kurz: Komplexní ověřování a autorizace uživatelů v Azure App Service

Kurz také ukazuje, jak zabezpečit vícevrstvé aplikace přistupováním k zabezpečenému back-endovému rozhraní API jménem ověřeného uživatele, a to z kódu serveru i z kódu v prohlížeči.

Toto je pouze několik z možných scénářů ověřování a autorizace v App Service.

Tady ucelenější seznam věcí, které se v tomto kurzu naučíte:

Podle kroků v tomto kurzu můžete postupovat v systémech macOS, Linux a Windows.

Pokud ještě nemáte předplatné Azure,vytvořte si bezplatný účet před tím, než začnete.

Požadavky

Pro absolvování tohoto kurzu potřebujete:

• Nainstalovat Git.
• Instalace nejnovější sady .NET Core 3,1 SDK

• V nástroji použijte prostředí Bash Azure Cloud Shell.

  

• Pokud tomu dáváte přednost, můžete nainstalovat Azure CLI a spouštět referenční příkazy CLI.

  • Pokud používáte místní instalaci, přihlaste se k Azure CLI pomocí příkazu az login. Pokud chcete dokončit proces ověřování, postupujte podle kroků zobrazených na terminálu. Další možnosti přihlášení jsou popsané v tématu Přihlášení pomocí Azure CLI.

  • Po zobrazení výzvy nainstalujte rozšíření Azure CLI při prvním použití. Další informace o rozšířeních najdete v tématu Využití rozšíření v Azure CLI.

  • Spuštěním příkazu az version zjistěte verzi a závislé knihovny, které jsou nainstalované. Pokud chcete upgradovat na nejnovější verzi, spusťte az upgrade.

Vytvoření místní aplikace .NET Core

V tomto kroku nastavíte místní projekt .NET Core. Stejný projekt použijete k nasazení back-endové aplikace API i front-endové webové aplikace.

Klonování a spuštění ukázkové aplikace

1. Spuštěním následujících příkazů naklonujte a spusťte ukázkové úložiště.

   git clone https://github.com/Azure-Samples/dotnet-core-api
   cd dotnet-core-api
   dotnet run
   

2. Přejděte na adresu http://localhost:5000 a vyzkoušejte přidávání, úpravy a odebírání položek úkolů.

   

3. ASP.NET Core zastavíte stisknutím klávesy Ctrl+C v terminálu.

4. Ujistěte se, že je výchozí větev main .

   git branch -m main
   

   Tip

   App Service nepožaduje změnu názvu větve. Vzhledem k tomu, že mnoho úložišť mění výchozí větev na main , v tomto kurzu se také dozvíte, jak nasadit úložiště z main . Další informace najdete v tématu Změna větve nasazení.

Nasazení aplikací do Azure

V tomto kroku nasadíte projekt do dvou aplikací App Service. Jedna je front-endová aplikace a druhá je back-endová aplikace.

Konfigurace uživatele nasazení

FTP a místní Git se můžou nasadit do webové aplikace Azure pomocí uživatele nasazení. Jakmile nakonfigurujete uživatele nasazení, můžete ho použít pro všechna nasazení Azure. Uživatelské jméno a heslo nasazení na úrovni účtu se liší od přihlašovacích údajů předplatného Azure.

Pokud chcete nakonfigurovat uživatele nasazení, spusťte v Azure Cloud Shell příkaz AZ WebApp Deployment User set . Nahraďte <username> a <password> pomocí uživatelského jména a hesla pro nasazení.

• Uživatelské jméno musí být v rámci Azure jedinečné a pro místní nabízená oznámení Git nesmí obsahovat @ symbol.
• Heslo musí mít délku alespoň osm znaků a dva z následujících tří prvků: písmena, číslice a symboly.

az webapp deployment user set --user-name <username> --password <password>

Výstup JSON zobrazuje heslo jako null . Pokud se zobrazí chyba 'Conflict'. Details: 409, změňte uživatelské jméno. Pokud se zobrazí chyba 'Bad Request'. Details: 400, použijte silnější heslo.

Poznamenejte si uživatelské jméno a heslo, které chcete použít k nasazení webových aplikací.

Vytvoření prostředků Azure

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --deployment-local-git --query deploymentLocalGitUrl

az group create --name myAuthResourceGroup --location "West Europe"
az appservice plan create --name myAuthAppServicePlan --resource-group myAuthResourceGroup --sku FREE --is-linux
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <front-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl
az webapp create --resource-group myAuthResourceGroup --plan myAuthAppServicePlan --name <back-end-app-name> --runtime "DOTNETCORE|3.1" --deployment-local-git --query deploymentLocalGitUrl

Přenos z Gitu do Azure

1. Vzhledem k tomu, že nasazujete main větev, musíte nastavit výchozí větev nasazení pro vaše dvě App Service aplikace na main (viz Změna větve nasazení). V Cloud Shell nastavte DEPLOYMENT_BRANCH nastavení aplikace pomocí az webapp config appsettings set příkazu.

   az webapp config appsettings set --name <front-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
   az webapp config appsettings set --name <back-end-app-name> --resource-group myAuthResourceGroup --settings DEPLOYMENT_BRANCH=main
   

2. Po návratu do okna místního terminálu spuštěním následujících příkazů Git proveďte nasazení do back-endové aplikace. Nahraďte <deploymentLocalGitUrl-of-back-end-app> adresou URL vzdáleného úložiště Git, kterou jste uložili v části vytvoření prostředků Azure. Po zobrazení výzvy k zadání přihlašovacích údajů správcem pověření Git Nezapomeňte zadat přihlašovací údaje pro nasazení, ne přihlašovací údaje, které používáte k přihlášení do Azure Portal.

   git remote add backend <deploymentLocalGitUrl-of-back-end-app>
   git push backend main
   

3. V okně místního terminálu spuštěním následujících příkazů Git nasaďte stejný kód do front-endové aplikace. Nahraďte <deploymentLocalGitUrl-of-front-end-app> adresou URL vzdáleného úložiště Git, kterou jste uložili v části vytvoření prostředků Azure.

   git remote add frontend <deploymentLocalGitUrl-of-front-end-app>
   git push frontend main
   

Vyhledat aplikace

V prohlížeči přejděte na následující adresy URL, kde se zobrazí dvě funkční aplikace.

http://<back-end-app-name>.azurewebsites.net
http://<front-end-app-name>.azurewebsites.net

Volání back-endového rozhraní API z front-endu

V tomto kroku odkážete kód serveru front-endové aplikace na přístup k back-endovému rozhraní API. Později povolíte ověřený přístup z front-endu do back-endu.

Úprava front-endového kódu

1. V místním úložišti otevřete soubor Controllers/TodoController.cs. Na začátku TodoController třídy přidejte následující řádky a nahraďte <back-end-app-name> název vaší back-endové aplikace:

   private static readonly HttpClient _client = new HttpClient();
   private static readonly string _remoteUrl = "https://<back-end-app-name>.azurewebsites.net";
   

2. Vyhledejte metodu, která je upravena pomocí [HttpGet] , a nahraďte kód uvnitř složených závorek následujícím kódem:

   var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo");
   return JsonConvert.DeserializeObject<List<TodoItem>>(data);
   

   První řádek provede volání GET /api/Todo do back-endové aplikace API.

3. Dále vyhledejte metodu, která je upravena pomocí, [HttpGet("{id}")] a nahraďte kód uvnitř složených závorek následujícím kódem:

   var data = await _client.GetStringAsync($"{_remoteUrl}/api/Todo/{id}");
   return Content(data, "application/json");
   

   První řádek provede volání GET /api/Todo/{id} do back-endové aplikace API.

4. Dále vyhledejte metodu, která je upravena pomocí, [HttpPost] a nahraďte kód uvnitř složených závorek následujícím kódem:

   var response = await _client.PostAsJsonAsync($"{_remoteUrl}/api/Todo", todoItem);
   var data = await response.Content.ReadAsStringAsync();
   return Content(data, "application/json");
   

   První řádek provede volání POST /api/Todo do back-endové aplikace API.

5. Dále vyhledejte metodu, která je upravena pomocí, [HttpPut("{id}")] a nahraďte kód uvnitř složených závorek následujícím kódem:

   var res = await _client.PutAsJsonAsync($"{_remoteUrl}/api/Todo/{id}", todoItem);
   return new NoContentResult();
   

   První řádek provede volání PUT /api/Todo/{id} do back-endové aplikace API.

6. Dále vyhledejte metodu, která je upravena pomocí, [HttpDelete("{id}")] a nahraďte kód uvnitř složených závorek následujícím kódem:

   var res = await _client.DeleteAsync($"{_remoteUrl}/api/Todo/{id}");
   return new NoContentResult();
   

   První řádek provede volání DELETE /api/Todo/{id} do back-endové aplikace API.

7. Uložte všechny provedené změny. V okně místního terminálu nasaďte provedené změny do front-endové aplikace pomocí následujících příkazů Git:

   git add .
   git commit -m "call back-end API"
   git push frontend main
   

Kontrola změn

1. Přejděte na adresu http://<front-end-app-name>.azurewebsites.net a přidejte několik položek, například from front end 1 a from front end 2.

2. Přejděte na adresu http://<back-end-app-name>.azurewebsites.net, kde se zobrazí položky přidané z front-endové aplikace. Přidejte také několik položek, například from back end 1 a from back end 2 a pak aktualizujte front-endovou aplikaci, abyste zjistili, jestli se změny projeví.

   

Konfigurace ověřování

V tomto kroku pro své dvě aplikace povolíte ověřování a autorizaci. Také nakonfigurujete front-endovou aplikaci tak, aby vygenerovala přístupový token, který můžete použít k provádění ověřených volání do back-endové aplikace.

Jako zprostředkovatele identity použijete Azure Active Directory. Další informace najdete v tématu Konfigurace ověřování pomocí Azure Active Directory pro aplikaci App Services.

Povolení ověřování a autorizace pro back-endovou aplikaci

1. V nabídce Azure Portal vyberte skupiny prostředků nebo vyhledejte a vyberte skupiny prostředků z libovolné stránky.

2. V skupiny prostředků vyhledejte a vyberte skupinu prostředků. V přehledu vyberte stránku správy vaší back-endové aplikace.

   

3. V levé nabídce back-endové aplikace vyberte Ověřování a pak klikněte na Přidat zprostředkovatele identity.

4. Na stránce Přidat zprostředkovatele identity vyberte Jako zprostředkovatele identity Microsoft a přihlaste se k identitám Microsoftu a Azure AD.

5. Přijměte výchozí nastavení a klikněte na Přidat.

   

6. Otevře se stránka Ověřování. Zkopírujte ID klienta aplikace Azure AD do Poznámkového bloku. Tuto hodnotu budete potřebovat později.

   

Pokud tady zastavíte, máte samostatnou aplikaci, která je už zabezpečená ověřováním a autorizací App Service zabezpečení. Zbývající části ukazují, jak zabezpečit řešení s více aplikacemi "tokem" ověřeného uživatele z front-endu do back-endu.

Povolení ověřování a autorizace pro front-endovou aplikaci

Použijte stejný postup i u front-endové aplikace, ale poslední krok přeskočte. Pro front-endovou aplikaci nepotřebujete ID klienta. Zůstaňte ale na stránce Ověřování front-endové aplikace, protože ji použijete v dalším kroku.

Pokud chcete, přejděte na adresu http://<front-end-app-name>.azurewebsites.net. Měla by vás teď přesměrovat na zabezpečenou přihlašovací stránku. Po přihlášení stále nemáte přístup k datům z back-endové aplikace, protože back-endová aplikace teď vyžaduje přihlášení z front-endové aplikace Azure Active Directory. Musíte udělat tři věci:

• Udělení přístupu front-endu do back-endu
• Konfigurace služby App Service tak, aby vracela použitelný token
• Použití tokenu v kódu

Udělení přístupu front-endové aplikaci do back-endu

Teď, když jste povolili ověřování a autorizaci pro obě své aplikace, využívají obě aplikaci AD. V tomto kroku udělíte front-endové aplikaci oprávnění k přístupu k back-endu jménem uživatele. (Technicky vzato udělíte aplikaci AD front-endu oprávnění k přístupu k aplikaci AD back-endu jménem uživatele.)

1. Na stránce Ověřování pro front-endovou aplikaci vyberte název front-endové aplikace v části Zprostředkovatel identity. Tato registrace aplikace se pro vás vygenerovala automaticky. V nabídce vlevo vyberte Oprávnění rozhraní API.

2. Vyberte Přidat oprávnění a pak vyberte Moje rozhraní > <back-end-app-name> API.

3. Na stránce Požádat o oprávnění rozhraní API pro back-endovou aplikaci vyberte Delegovaná oprávnění a user_impersonation pak vyberte Přidat oprávnění.

   

Konfigurace služby App Service tak, aby vracela použitelný přístupový token

Front-endová aplikace teď má požadovaná oprávnění pro přístup k back-endové aplikaci jako přihlášený uživatel. V tomto kroku nakonfigurujete ověřování a autorizaci pomocí služby App Service tak, abyste získali použitelná přístupový token pro přístup k back-endu. Pro tento krok potřebujete ID klienta back-endu, které jste zkopíroval v článku Povolení ověřování a autorizace pro back-endové aplikace.

V Cloud Shell front-endové aplikaci spusťte následující příkazy, které přidávají parametr scope do nastavení ověřování identityProviders.azureActiveDirectory.login.loginParameters . Nahraďte <front-end-app-name> a <back-end-client-id> .

authSettings=$(az webapp auth show -g myAuthResourceGroup -n <front-end-app-name>)
authSettings=$(echo "$authSettings” | jq '.properties' | jq '.identityProviders.azureActiveDirectory.login += {"loginParameters":["scope=openid profile email offline_access api://<back-end-client-id>/user_impersonation"]}')
az webapp auth set --resource-group myAuthResourceGroup --name <front-end-app-name> --body "$authSettings"

Příkazy efektivně přidávají loginParameters vlastnost s dalšími vlastními obory. Tady je vysvětlení požadovaných oborů:

• openid, profile a email jsou požadovány App Service výchozím nastavení. Informace najdete v tématu OpenID Připojení obory.
• api://<back-end-client-id>/user_impersonation je zveřejněné rozhraní API v registraci back-endové aplikace. Je to obor, který poskytuje token JWT, který zahrnuje back-endovou aplikaci jako cílovou skupinu tokenů.
• offline_access tady pro usnadnění práce (pokud chcete aktualizovat tokeny).

id=$(az ad app show --id <back-end-client-id> --query objectId --output tsv)
az rest --method PATCH --url https://graph.microsoft.com/v1.0/applications/$id --body "{'api':{'requestedAccessTokenVersion':2}}" 

Vaše aplikace jsou teď nakonfigurované. Front-end je teď připravený na přístup do back-endu se správným přístupovým tokenem.

Informace o tom, jak nakonfigurovat přístupový token pro jiné zprostředkovatele, najdete v tématu Aktualizace tokenů zprostředkovatele identity.

Zabezpečené volání rozhraní API z kódu serveru

V tomto kroku povolíte dříve upravený kód serveru tak, aby prováděl ověřená volání do back-endového rozhraní API.

Vaše front-endová aplikace teď má požadované oprávnění a k parametrům přihlášení také přidá ID klienta back-endu. Proto může získat přístupový token k ověření v back-endové aplikaci. App Service poskytuje tento token vašemu kódu serveru tím, že do každého ověřeného požadavku vkládá hlavičku X-MS-TOKEN-AAD-ACCESS-TOKEN (viz Načítání tokenů v kódu aplikace).

1. V místním úložišti znovu otevřete soubor Controllers/TodoController.cs. Pod konstruktor TodoController(TodoContext context) přidejte následující kód:

   public override void OnActionExecuting(ActionExecutingContext context)
   {
       base.OnActionExecuting(context);
   
       _client.DefaultRequestHeaders.Accept.Clear();
       _client.DefaultRequestHeaders.Authorization =
           new AuthenticationHeaderValue("Bearer", Request.Headers["X-MS-TOKEN-AAD-ACCESS-TOKEN"]);
   }
   

   Tento kód do všech volání vzdáleného rozhraní API přidá standardní hlavičku HTTP Authorization: Bearer <access-token>. V ASP.NET Core spuštění požadavku MVC se provede těsně před provedením příslušné akce, takže každé odchozí volání rozhraní API teď představuje OnActionExecuting přístupový token.

2. Uložte všechny provedené změny. V okně místního terminálu nasaďte provedené změny do front-endové aplikace pomocí následujících příkazů Git:

   git add .
   git commit -m "add authorization header for server code"
   git push frontend main
   

3. Znovu se přihlaste k https://<front-end-app-name>.azurewebsites.net. Na stránce smlouvy o využití uživatelských dat klikněte na Přijmout.

   Teď byste měli být schopni vytvářet, číst, aktualizovat a odstraňovat data z back-endové aplikace stejně jako dříve. Jediným rozdílem je, že obě aplikace jsou teď zabezpečené ověřováním a autorizací pomocí služby App Service, a to včetně volání mezi službami.

Gratulujeme! Váš kód serveru teď přistupuje k back-endovým datům jménem ověřeného uživatele.

Zabezpečené volání rozhraní API z kódu v prohlížeči

V tomto kroku odkážete front-endovou aplikaci Angular.js na back-endové rozhraní API. Tímto způsobem zjistíte, jak načíst přístupový token a provádět s ním volání rozhraní API do back-endové aplikace.

Zatímco kód serveru má přístup k hlavičkám požadavků, klientský kód může stejné přístupové tokeny získat přístupem k GET /.auth/me (viz Načítání tokenů v kódu aplikace).

Konfigurace CORS

V Cloud Shell pomocí příkazu povolte CORS na adresu URL az webapp cors add vašeho klienta. Nahraďte <back-end-app-name> <front-end-app-name> zástupné symboly a .

az webapp cors add --resource-group myAuthResourceGroup --name <back-end-app-name> --allowed-origins 'https://<front-end-app-name>.azurewebsites.net'

Tento krok nesouvisí s ověřováním a autorizací. Je však potřeba ho provést, aby prohlížeč povoloval volání rozhraní API mezi doménami z vaší aplikace Angular.js. Další informace najdete v tématu popisujícím přidání funkcí CORS.

Odkázání aplikace Angular.js na back-endové rozhraní API

1. V místním úložišti otevřete soubor wwwroot/index.html.

2. Na řádku 51 nastavte proměnnou apiEndpoint na adresu URL https vaší back-endové aplikace ( https://<back-end-app-name>.azurewebsites.net ). Nahraďte <back-end-app-name> názvem vaší aplikace v App Service.

3. V místním úložišti otevřete soubor wwwroot/app/scripts/todoListSvc.js a všimněte si, že před všechna volání rozhraní API je připojený koncový bod rozhraní API apiEndpoint. Vaše aplikace Angular.js teď volá back-endová rozhraní API.

Přidání přístupového tokenu do volání rozhraní API

1. V souboru wwwroot/app/scripts/todoListSvc.js před seznam volání rozhraní API (nad řádek getItems : function(){) přidejte do seznamu následující funkci:

   setAuth: function (token) {
       $http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
   },
   

   Zavoláním této funkce se nastaví výchozí hlavička Authorization s přístupovým tokenem. Zavoláte ji v dalším kroku.

2. V místním úložišti otevřete soubor wwwroot/app/scripts/app.js a vyhledejte následující kód:

   $routeProvider.when("/Home", {
       controller: "todoListCtrl",
       templateUrl: "/App/Views/TodoList.html",
   }).otherwise({ redirectTo: "/Home" });
   

3. Celý blok kódu nahraďte následujícím kódem:

   $routeProvider.when("/Home", {
       controller: "todoListCtrl",
       templateUrl: "/App/Views/TodoList.html",
       resolve: {
           token: ['$http', 'todoListSvc', function ($http, todoListSvc) {
               return $http.get('/.auth/me').then(function (response) {
                   todoListSvc.setAuth(response.data[0].access_token);
                   return response.data[0].access_token;
               });
           }]
       },
   }).otherwise({ redirectTo: "/Home" });
   

   Tato nová změna přidá mapování resolve, které zavolá /.auth/me a nastaví přístupový token. Před vytvořením instance kontroleru todoListCtrl se ujistí, že máte přístupový token. Díky tomu všechna volání rozhraní API kontrolerem zahrnují token.

Nasazení aktualizací a test

1. Uložte všechny provedené změny. V okně místního terminálu nasaďte provedené změny do front-endové aplikace pomocí následujících příkazů Git:

   git add .
   git commit -m "add authorization header for Angular"
   git push frontend main
   

2. Znovu přejděte na adresu https://<front-end-app-name>.azurewebsites.net. Teď byste měli být schopni vytvářet, číst, aktualizovat a odstraňovat data z back-endové aplikace přímo v aplikaci Angular.js.

Gratulujeme! Váš klientský kód teď přistupuje k back-endovým datům jménem ověřeného uživatele.

Vypršení platnosti přístupových tokenů

Platnost vašich přístupových tokenů po určité době vyprší. Informace o tom, jak aktualizovat přístupové tokeny, aniž by uživatelé vyžadovat opětovné ověření vaší aplikace, najdete v tématu Aktualizace tokenů zprostředkovatele identity.

Vyčištění prostředků

V předchozích krocích jste vytvořili prostředky Azure ve skupině prostředků. Pokud předpokládáte, že už tyto prostředky nebudete potřebovat, odstraňte skupinu prostředků spuštěním následujícího příkazu ve službě Cloud Shell:

az group delete --name myAuthResourceGroup

Spuštění tohoto příkazu může trvat přibližně minut.

Další kroky

Naučili jste se:

V dalším kurzu se dozvíte, jak namapovat vlastní název DNS na vaši aplikaci.