Självstudie: Autentisera och auktorisera användare från slutpunkt till slutpunkt i Azure App Service

Här ser du också hur du skyddar en app med flera nivåer genom att öppna ett skyddat server-API åt den autentiserade användaren, från både serverkoden och webbläsarkoden.

Det här är endast några av de möjliga scenarierna för autentisering och auktorisering i App Service.

Här är en mer utförlig lista över saker du lär dig under självstudiekursen:

Du kan följa stegen i den här självstudien i macOS, Linux och Windows.

Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.

Förutsättningar

För att slutföra den här kursen behöver du:

• Installera Git
• Installera den senaste .NET Core 3.1 SDK

• Använd bash-miljön i Azure Cloud Shell.

  

• Om du vill kan du i stället installera Azure CLI för att köra CLI-referenskommandon.

  • Om du använder en lokal installation loggar du in på Azure CLI med hjälp av kommandot az login. Slutför autentiseringsprocessen genom att följa stegen som visas i terminalen. Fler inloggningsalternativ finns i Logga in med Azure CLI.

  • När du uppmanas till det installerar du Azure CLI-tillägg vid första användning. Mer information om tillägg finns i Använda tillägg med Azure CLI.

  • Kör az version om du vill hitta versionen och de beroende bibliotek som är installerade. Om du vill uppgradera till den senaste versionen kör du az upgrade.

Skapa en lokal .NET Core-app

I det här steget konfigurerar du det lokala .NET Core-projektet. Du kan använda samma projekt för att distribuera en API-app på serversidan och en webbapp på klientsidan.

Klona och kör exempelprogrammet

1. Kör följande kommandon för att klona exempellagringsplatsen och köra den.

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

2. Öppna http://localhost:5000 och prova att lägga till, redigera och ta bort att göra-objekt.

   

3. Du stoppar ASP.NET Core genom att Ctrl+C trycka på i terminalen.

4. Kontrollera att standardgrenen är main .

   git branch -m main
   

   Tips

   Ändringen av grennamnet krävs inte av App Service. Men eftersom många lagringslager ändrar sin standardgren till visar den här självstudien också hur du main distribuerar en lagringsplats från main . Mer information finns i Ändra distributionsgren.

Distribuera appar till Azure

I det här steget distribuerar du projektet till två App Service-appar. Den ena är en klientdelsapp och den andra är en serverdelsapp.

Konfigurera en distributionsanvändare

FTP och lokal Git kan distribuera till en Azure-webbapp med hjälp av en distributionsanvändare. När du har konfigurerat distributionsanvändaren kan du använda den för alla dina Azure-distributioner. Ditt användarnamn och lösenord för distribution på kontonivå skiljer sig från autentiseringsuppgifterna för din Azure-prenumeration.

Konfigurera distributionsanvändaren genom att köra kommandot az webapp deployment user set i Azure Cloud Shell. Ersätt <username> och med ett användarnamn och lösenord för <password> distributionsanvändaren.

• Användarnamnet måste vara unikt i Azure och för lokala Git-pushar får det inte innehålla @ symbolen .
• Lösenordet måste vara minst åtta tecken långt, med två av följande tre element: bokstäver, siffror och symboler.

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

JSON-utdata visar lösenordet som null . Om du ser felet 'Conflict'. Details: 409 ska du byta användarnamn. Om du ser felet 'Bad Request'. Details: 400 ska du använda ett starkare lösenord.

Registrera ditt användarnamn och lösenord som ska användas för att distribuera dina webbappar.

Skapa Azure-resurser

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

Skicka till Azure från Git

1. Eftersom du distribuerar -grenen måste du ange standarddistributionsgrenen för dina main två App Service-appar main till (se Ändra distributionsgren). I Cloud Shell du DEPLOYMENT_BRANCH appinställningen med kommandot az webapp config appsettings set .

   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. Åter i det lokala terminalfönstret kör du följande Git-kommandon för att distribuera till serverdelsappen. Ersätt <deploymentLocalGitUrl-of-back-end-app> med URL:en för den fjärranslutna Git som du sparade från Skapa Azure-resurser. När Git Autentiseringshanteraren uppmanas att ange autentiseringsuppgifter ska du se till att du anger dina autentiseringsuppgifter för distribution,inte de autentiseringsuppgifter som du använder för att logga in på Azure Portal.

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

3. Kör följande Git-kommandon i det lokala terminalfönstret för att distribuera samma kod till klientdelsappen. Ersätt <deploymentLocalGitUrl-of-front-end-app> med URL:en för den fjärranslutna Git som du sparade från Skapa Azure-resurser.

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

Bläddra till apparna

Navigera till följande URL:er i en webbläsare och se hur de två apparna fungerar.

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

Anropa serverdels-API från klientsidan

I det här steget använder du serverkoden för klientdelsappen för att komma åt serverdels-API:t. Du aktiverar senare autentiserad åtkomst från klientdelen till serverdelen.

Ändra klientdelskod

1. Öppna Controllers/TodoController.cs på den lokala lagringsplatsen. I början av klassen TodoController lägger du till följande rader och <back-end-app-name> ersätter med namnet på din backend-app:

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

2. Leta reda på metoden som är [HttpGet] smyckad med och ersätt koden inuti kparenteserna med:

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

   Den första raden gör ett GET /api/Todo-anrop till serverdels-API-appen.

3. Leta sedan reda på -metoden som är erad [HttpGet("{id}")] med och ersätt koden inuti kparenteserna med:

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

   Den första raden gör ett GET /api/Todo/{id}-anrop till serverdels-API-appen.

4. Leta sedan reda på -metoden som är erad [HttpPost] med och ersätt koden inuti kparenteserna med:

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

   Den första raden gör ett POST /api/Todo-anrop till serverdels-API-appen.

5. Leta sedan reda på -metoden som är erad [HttpPut("{id}")] med och ersätt koden inuti kparenteserna med:

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

   Den första raden gör ett PUT /api/Todo/{id}-anrop till serverdels-API-appen.

6. Leta sedan reda på -metoden som är erad [HttpDelete("{id}")] med och ersätt koden inuti kparenteserna med:

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

   Den första raden gör ett DELETE /api/Todo/{id}-anrop till serverdels-API-appen.

7. Spara alla ändringar. I det lokala terminalfönstret distribuerar du ändringarna till klientdelsappen med följande Git-kommandon:

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

Kontrollera ändringarna

1. Öppna http://<front-end-app-name>.azurewebsites.net och lägg till några objekt, exempelvis from front end 1 och from front end 2.

2. Navigera till http://<back-end-app-name>.azurewebsites.net för att visa de objekt som lades till från klientdelsappen. Lägg även till några objekt, som from back end 1 och from back end 2, och uppdatera sedan klientdelsappen för att se om ändringarna visas.

   

Konfigurera autentisering

I det här steget aktiverar du autentisering och auktorisering för två appar. Du kan också konfigurera klientdelsappen och generera en åtkomsttoken som du kan använda till att göra autentiserade anrop till serverdelsappen.

Du använder Azure Active Directory som identitetsleverantör. Mer information finns i Konfigurera Azure Active Directory-autentisering för App Services-appen.

Aktivera autentisering och auktorisering för serverdelsapp

1. I menyn Azure Portal väljer du Resursgrupper eller söker efter och väljer Resursgrupper från valfri sida.

2. I Resursgrupper hittar och väljer du din resursgrupp. I Översikt väljer du hanteringssidan för din backend-app.

   

3. I serverappens vänstra meny väljer du Autentisering och klickar sedan på Lägg till identitetsprovider.

4. På sidan Lägg till en identitetsprovider väljer du Microsoft som identitetsprovider för att logga in Microsoft- och Azure AD-identiteter.

5. Acceptera standardinställningarna och klicka på Lägg till.

   

6. Sidan Autentisering öppnas. Kopiera Klient-ID för Azure AD-programmet till ett anteckningsblock. Du behöver det här värdet senare.

   

Om du slutar här har du en fristående app som redan skyddas av App Service autentisering och auktorisering. De återstående avsnitten visar hur du skyddar en lösning för flera appar genom att "flöda" den autentiserade användaren från frontend till backend.

Aktivera autentisering och auktorisering för klientappen

Följ samma steg för klientdelsappen, men hoppa över det sista steget. Du behöver inte klient-ID:t för klientappen. Stanna dock kvar på sidan Autentisering för klientappen eftersom du ska använda den i nästa steg.

Om du vill kan du navigera till http://<front-end-app-name>.azurewebsites.net. Du bör nu dirigeras till en säker inloggningssida. När du har loggat in kan du fortfarande inte komma åt data från backend-appen eftersom backend-appen nu kräver Azure Active Directory inloggning från frontend-appen. Du behöver göra tre saker:

• Ge klientsidan åtkomst till serversidan
• Konfigurera App Service för att returnera en användbar token
• Använda token i koden

Ge klientdelsappen åtkomst till serversidan

Nu när du har aktiverat autentisering och auktorisering för båda dina appar backas var och en av dem upp av ett AD-program. I det här steget kan ge du klientdelsappen åtkomstbehörighet till serverdelsappen å användarens vägnar. (Tekniskt sett ger du AD-programmet för klientdelsappen behörighet att komma åt AD-programmet för serverdelen å användarens vägnar.)

1. På sidan Autentisering för klientappen väljer du namnet på klientappen under Identitetsprovider. Den här appregistreringen genererades automatiskt åt dig. Välj API-behörigheter på den vänstra menyn.

2. Välj Lägg till en behörighet och välj sedan Mina API:er. > <back-end-app-name>

3. På sidan Begär API-behörigheter för backend-appen väljer du Delegerade behörigheter och user_impersonation sedan Lägg till behörigheter.

   

Konfigurera App Service för att returnera en användbar åtkomsttoken

Frontend-appen har nu de behörigheter som krävs för att komma åt backend-appen som den inloggade användaren. I det här steget konfigurerar du autentisering och auktorisering för App Service, så att du får en användbar åtkomsttoken för att komma åt serverdelen. För det här steget behöver du klient-ID:t för serversidan som du kopierade från Aktivera autentisering och auktorisering för backend-appen.

I Cloud Shell kör du följande kommandon i klientappen för att lägga till scope parametern i autentiseringsinställningen identityProviders.azureActiveDirectory.login.loginParameters . Ersätt <front-end-app-name> och <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"

Kommandona lägger effektivt till loginParameters en egenskap med ytterligare anpassade omfång. Här är en förklaring av de begärda omfången:

• openid, profile och email begärs av App Service redan som standard. Mer information finns i OpenID Anslut Scopes.
• api://<back-end-client-id>/user_impersonation är ett exponerat API i din registrering av backend-appen. Det är omfånget som ger dig en JWT-token som innehåller backend-appen som en tokenmålgrupp.
• offline_access ingår här för enkelhetens skull (om du vill uppdatera token).

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}}" 

Nu har apparna konfigurerats. Klientdelen är nu redo att komma åt serverdelen med en åtkomsttoken.

Information om hur du konfigurerar åtkomsttoken för andra leverantörer finns i Uppdatera token för identitetsprovider.

Anropa API på säkert sätt från serverkod

I det här steget aktiverar du din tidigare ändrade serverkod så att du kan göra autentiserade anrop till serverdels-API:et.

Klientappen har nu den behörighet som krävs och lägger även till klient-ID:t för backend till inloggningsparametrarna. Den kan därför få en åtkomsttoken för autentisering utan serverdelsappen. App Service tillhandahåller denna token i serverkoden genom att införa en X-MS-TOKEN-AAD-ACCESS-TOKEN-rubrik för varje autentiserad begäran (se Hämta token i appkod).

1. Öppna Controllers/TodoController.cs igen i den lokala databasen. Under konstruktorn TodoController(TodoContext context) lägger du till följande kod:

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

   Den här koden lägger till den vanliga HTTP-rubrikenAuthorization: Bearer <access-token> till alla fjärranslutna API-anrop. I den ASP.NET Core körningspipelinen för MVC-begäran körs precis innan respektive åtgärd gör det, så varje utgående API-anrop presenterar nu OnActionExecuting åtkomsttoken.

2. Spara alla ändringar. I det lokala terminalfönstret distribuerar du ändringarna till klientdelsappen med följande Git-kommandon:

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

3. Logga in på https://<front-end-app-name>.azurewebsites.net igen. På sidan med dataanvändningsavtalet klickar du på acceptera.

   Du bör nu kunna skapa, läsa, uppdatera och ta bort data från serverdelsappen, precis som innan. Den enda skillnaden är att båda apparna är nu skyddade med App Service-autentisering och -auktorisering, inklusive tjänst-till-tjänst-anrop.

Grattis! Serverkoden har nu åtkomst till serverdelsdata å den autentiserade användarens vägnar.

Anropa API på ett säkert sätt från webbläsarkoden

I det här steget pekar du Angular.js-appen för klientdelen till API:et för serverdelen. På så sätt får du veta hur du kan hämta åtkomsttoken och göra API-anrop till serverdelsappen med den.

Medan serverkoden har åtkomst till begäranderubriker kan klientkoden komma åt GET /.auth/me för att få samma åtkomsttoken (se Hämta token i appkod).

Konfigurera CORS

I Cloud Shell du CORS till klientens URL med hjälp av az webapp cors add kommandot . Ersätt <back-end-app-name> <front-end-app-name> platshållarna och .

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

Det här steget är inte kopplat till autentisering och auktorisering. Du behöver det dock för att webbläsaren ska tillåta API-anrop från flera domäner från Angular.js-appen. Mer information finns i Lägga till CORS-funktioner.

Peka Angular.js-app till serverdels-API

1. Öppna wwwroot/index.html på den lokala lagringsplatsen.

2. På rad 51 anger du apiEndpoint variabeln till HTTPS-URL:en för din backend-app ( https://<back-end-app-name>.azurewebsites.net ). Ersätt <back-end-app-name> med ditt appnamn i App Service.

3. På den lokala lagringsplatsen öppnar du wwwroot/app/scripts/todoListSvc.js och ser till att apiEndpoint är tillagt för alla API-anrop. Nu anropar Angular.js-appen serverdels-API:erna.

Lägga till åtkomsttoken till API-anrop

1. Öppna wwwroot/app/scripts/todoListSvc.js. Ovanför listan med API-anrop (ovanför raden getItems : function(){), lägger du till följande funktion i listan:

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

   Den här funktionen anropas för att ange standardrubriken Authorization med åtkomsttoken. Du anropar den i nästa steg.

2. På den lokala lagringsplatsen öppnar du wwwroot/app/scripts/app.js och hittar följande kod:

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

3. Ersätt hela kodblocket med följande kod:

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

   Den nya ändringen lägger till resolve mappningen som anropar/.auth/me och anger åtkomsttoken. Det innebär att du med säkerhet har åtkomsttoken innan kontrollanten todoListCtrl initieras. På så sätt omfattar alla API-anrop av kontrollanten token.

Distribuera uppdateringar och testa

1. Spara alla ändringar. I det lokala terminalfönstret distribuerar du ändringarna till klientdelsappen med följande Git-kommandon:

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

2. Navigera till https://<front-end-app-name>.azurewebsites.net igen. Du bör nu kunna skapa, läsa, uppdatera och ta bort data från serverdelsappen, direkt i Angular.js-appen.

Grattis! Klientkoden har nu åtkomst till serverdelsdata å den autentiserade användarens vägnar.

När åtkomsttoken upphör att gälla

Ditt åtkomsttoken upphör att gälla efter ett tag. Information om hur du uppdaterar dina åtkomsttoken utan att användarna måste autentiseras på nytt med din app finns på sidan om att uppdatera token för identitetsprovider.

Rensa resurser

I de föregående stegen skapade du Azure-resurser i en resursgrupp. Om du inte tror att du behöver dessa resurser i framtiden tar du bort resursgruppen genom att köra följande kommando i Cloud Shell:

az group delete --name myAuthResourceGroup

Det kan några minuter att köra kommandot.

Nästa steg

Vad du lärt dig:

Gå vidare till nästa självstudie där du får lära dig att mappa ett anpassat DNS-namn till appen.