Självstudie: bevilja åtkomst till ett ASP.NET Core webb-API från ett program med en sida med hjälp av Azure Active Directory B2CTutorial: Grant access to an ASP.NET Core web API from a single-page application using Azure Active Directory B2C

Den här självstudien visar hur du anropar en Azure Active Directory B2C (Azure AD B2C)-skyddad ASP.NET Core webb-API-resurs från ett program på en sida.This tutorial shows you how to call an Azure Active Directory B2C (Azure AD B2C)-protected ASP.NET Core web API resource from a single-page application.

I den här guiden får du lära dig att:In this tutorial, you learn how to:

  • Lägga till ett program för webb-APIAdd a web API application
  • Konfigurera omfånget för ett webb-APIConfigure scopes for a web API
  • Ge behörigheter till webb-API:tGrant permissions to the web API
  • Konfigurera exemplet för att använda programmetConfigure the sample to use the application

KravPrerequisites

Lägga till ett program för webb-APIAdd a web API application

Webb-API-resurser måste vara registrerade i klientorganisationen innan de kan godkänna och svara på en begäran från en skyddad resurs från klientprogram som använder en åtkomsttoken.Web API resources need to be registered in your tenant before they can accept and respond to protected resource requests by client applications that present an access token.

  1. Logga in på Azure Portal.Sign in to the Azure portal.
  2. Välj filtret katalog + prenumeration på den översta menyn och välj sedan den katalog som innehåller Azure AD B2C klienten.Select the Directory + subscription filter in the top menu, and then select the directory that contains your Azure AD B2C tenant.
  3. På den vänstra menyn väljer du Azure AD B2C.In the left menu, select Azure AD B2C. Eller Välj alla tjänster och Sök efter och välj Azure AD B2C.Or, select All services and search for and select Azure AD B2C.
  4. Välj Program och därefter Lägg till.Select Applications, and then select Add.
  5. Ange ett namn på programmet.Enter a name for the application. Till exempel webapi1.For example, webapi1.
  6. För webbapp/webb-APIväljer du Ja.For Web App / Web API, select Yes.
  7. Välj Jaför Tillåt implicit flöde.For Allow implicit flow, select Yes.
  8. För Svars-URL anger du en slutpunkt dit Azure AD B2C ska returnera de token som programmet begär.For Reply URL, enter an endpoint where Azure AD B2C should return any tokens that your application requests. I den här självstudien körs exemplet lokalt och lyssnar på https://localhost:5000.In this tutorial, the sample runs locally and listens at https://localhost:5000.
  9. För app-ID-URIlägger du till API-slutpunkt-ID: t till den URI som visas.For App ID URI, add an API endpoint identifier to the URI shown. I den här självstudien anger du api, så att hela URI: n liknar https://contosob2c.onmicrosoft.com/api.For this tutorial, enter api, so that the full URI is similar to https://contosob2c.onmicrosoft.com/api.
  10. Välj Skapa.Select Create.
  11. Registrera program-ID för användning i ett senare steg.Record the APPLICATION ID for use in a later step.

Konfigurera omfångConfigure scopes

Omfång är ett sätt att styra åtkomsten till skyddade resurser.Scopes provide a way to govern access to protected resources. Omfång används av webb-API för att implementera omfångsbaserad åtkomststyrning.Scopes are used by the web API to implement scope-based access control. Vissa användare kan till exempel ha både läs- och skrivåtkomst medan andra bara har skrivskyddad åtkomst.For example, some users could have both read and write access, whereas other users might have read-only permissions. I den här självstudien definierar du både Läs-och Skriv behörighet för webb-API: et.In this tutorial, you define both read and write permissions for the web API.

  1. Välj program.Select Applications.
  2. Välj webapi1 -programmet för att öppna dess egenskaps sida.Select the webapi1 application to open its Properties page.
  3. Välj Publicerade omfång.Select Published scopes. Publicerade omfattningar kan användas för att ge ett klient program vissa behörigheter till webb-API: et.Published scopes can be used to grant a client application certain permissions to the web API.
  4. För omfattning, ange demo.readoch för Beskrivninganger Read access to the web APIdu.For SCOPE, enter demo.read, and for DESCRIPTION, enter Read access to the web API.
  5. För omfattning, ange demo.writeoch för Beskrivninganger Write access to the web APIdu.For SCOPE, enter demo.write, and for DESCRIPTION, enter Write access to the web API.
  6. Välj Spara.Select Save.

Registrera det fullständiga värdet för omfattning för demo.read-omfånget som ska användas i ett senare steg när du konfigurerar ett program med en sida.Record the FULL SCOPE VALUE for the demo.read scope to use in a later step when you configure the single-page application. Det fullständiga värdet för omfång liknar https://yourtenant.onmicrosoft.com/api/demo.read.The full scope value is similar to https://yourtenant.onmicrosoft.com/api/demo.read.

Bevilja behörigheterGrant permissions

Om du vill anropa ett skyddat webb-API från ett annat program måste du ge den program behörighet till webb-API: et.To call a protected web API from another application, you need to grant that application permissions to the web API.

I den nödvändiga självstudien har du skapat ett webb program med namnet webapp1.In the prerequisite tutorial, you created a web application named webapp1. I den här självstudien konfigurerar du programmet för att anropa det webb-API som du skapade i ett tidigare avsnitt, webapi1.In this tutorial, you configure that application to call the web API you created in a previous section, webapi1.

  1. Välj programoch välj sedan det webb program som ska ha åtkomst till API: et.Select Applications, and then select the web application that should have access to the API. Till exempel webapp1.For example, webapp1.
  2. Välj API-åtkomst och sedan Lägg till.Select API access, and then select Add.
  3. I list rutan Välj API väljer du det API som webb programmet ska beviljas åtkomst till.In the Select API dropdown, select the API to which web application should be granted access. Till exempel webapi1.For example, webapi1.
  4. I list rutan Välj omfång väljer du de omfattningar som du definierade tidigare.In the Select Scopes dropdown, select the scopes that you defined earlier. Till exempel demo. Read och demo. Write.For example, demo.read and demo.write.
  5. Välj OK.Select OK.

Webb programmet med en sida är registrerat för att anropa det skyddade webb-API: et.Your single-page web application is registered to call the protected web API. En användare autentiseras med Azure AD B2C för att använda ett program med en sida.A user authenticates with Azure AD B2C to use the single-page application. En app med en enda sida får en auktorisering från Azure AD B2C för åtkomst till det skyddade webb-API: et.The single-page app obtains an authorization grant from Azure AD B2C to access the protected web API.

Konfigurera exempletConfigure the sample

När webb-API:t är registrerat och har ett definierat omfång måste du konfigurera webb-API-koden så att den använder din Azure AD B2C-klientorganisation.Now that the web API is registered and you have scopes defined, you configure the web API code to use your Azure AD B2C tenant. I den här självstudien konfigurerar du ett exempel på ett .NET Core-webbprogram som du hämtar från GitHub.In this tutorial, you configure a sample .NET Core web application you download from GitHub.

Hämta en @no__t -1. zip-arkiv eller klona exempel webb-API-projektet från GitHub.Download a *.zip archive or clone the sample web API project from GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-dotnetcore-webapi.git

Konfigurera webb-APIConfigure the web API

  1. Öppna filen B2C-WebAPI/appSettings. JSON i Visual Studio eller Visual Studio Code.Open the B2C-WebApi/appsettings.json file in Visual Studio or Visual Studio Code.

  2. Ändra AzureAdB2C-blocket för att avspegla ditt klient namn, program-ID: t för webb-API-programmet, namnet på din registrerings-och inloggnings princip och de omfattningar som du definierade tidigare.Modify the AzureAdB2C block to reflect your tenant name, the application ID of the web API application, the name of your sign-up/sign-in policy, and the scopes you defined earlier. Blocket bör se ut ungefär som i följande exempel (med lämpliga Tenant-och ClientId-värden):The block should look similar to the following example (with appropriate Tenant and ClientId values):

    "AzureAdB2C": {
      "Tenant": "<your-tenant-name>.onmicrosoft.com",
      "ClientId": "<webapi-application-ID>",
      "Policy": "B2C_1_signupsignin1",
    
      "ScopeRead": "demo.read",
      "ScopeWrite": "demo.write"
    },
    

Aktivera CORSEnable CORS

Du måste aktivera CORS i webb-API: et om du vill tillåta att ett program med en enda sida anropar ASP.net Core webb-API.To allow your single-page application to call the ASP.NET Core web API, you need to enable CORS in the web API.

  1. Lägg till CORS till metoden ConfigureServices() i Startup.cs.In Startup.cs, add CORS to the ConfigureServices() method.

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();
    
  2. I metoden ConfigureServices() anger du även värdet för jwtOptions.Authority till följande token för token-utfärdare.Also within the ConfigureServices() method, set the jwtOptions.Authority value to the following token issuer URI.

    Ersätt <your-tenant-name> med namnet på din B2C-klient.Replace <your-tenant-name> with the name of your B2C tenant.

    jwtOptions.Authority = $"https://<your-tenant-name>.b2clogin.com/{Configuration["AzureAdB2C:Tenant"]}/{Configuration["AzureAdB2C:Policy"]}/v2.0";
    
  3. Konfigurera CORS i metoden Configure().In the Configure() method, configure CORS.

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        app.UseCors(builder =>
            builder.WithOrigins("http://localhost:6420").AllowAnyHeader().AllowAnyMethod());
    
  4. (Endast Visual Studio) Öppna filen launchSettings. JSON under Egenskaper i Solution Explorer och leta upp iisExpress-blocket.(Visual Studio only) Under Properties in the Solution Explorer, open the launchSettings.json file, then find the iisExpress block.

  5. (Endast Visual Studio) Uppdatera värdet applicationURL med det port nummer du angav när du registrerade webapi1 -programmet i ett tidigare steg.(Visual Studio only) Update the applicationURL value with the port number you specified when you registered the webapi1 application in an earlier step. Exempel:For example:

    "iisExpress": {
      "applicationUrl": "http://localhost:5000/",
      "sslPort": 0
    }
    

Konfigurera ett program med en sidaConfigure the single-page application

En Enkels Ides applikation (SPA) från föregående självstudie i serien använder Azure AD B2C för användarens registrering och inloggning, och anropar det ASP.net Core webb-API som skyddas av frabrikamb2c demo-klienten.The single-page application (SPA) from the previous tutorial in the series uses Azure AD B2C for user sign-up and sign-in, and calls the ASP.NET Core web API protected by the frabrikamb2c demo tenant.

I det här avsnittet ska du uppdatera det enkla programmet för att anropa det ASP.NET Core webb-API som skyddas av din Azure AD B2C klient och som du kör på den lokala datorn.In this section, you update the single-page application to call the ASP.NET Core web API protected by your Azure AD B2C tenant and which you run on your local machine.

Ändra inställningarna i SPA:To change the settings in the SPA:

  1. Öppna filen index. html i Active-Directory-B2C-JavaScript-msal-singlepageapp -projektet som du laddade ned eller klonade i föregående självstudie.Open the index.html file in the active-directory-b2c-javascript-msal-singlepageapp project you downloaded or cloned in the previous tutorial.

  2. Konfigurera exemplet med URI: n för demonstrationen. Läs omfattning som du skapade tidigare och URL: en för webb-API: et.Configure the sample with the URI for the demo.read scope you created earlier and the URL of the web API.

    1. I appConfig-definitionen ersätter du värdet för b2cScopes med den fullständiga URI: n för omfånget (det fullständiga värdet som du registrerade tidigare).In the appConfig definition, replace the b2cScopes value with the full URI for the scope (the FULL SCOPE VALUE you recorded earlier).
    2. Ändra värdet webApi till värdet applicationURL som du angav i föregående avsnitt.Change the webApi value to the applicationURL value you specified in the previous section.

    Definitionen av appConfig bör se ut ungefär som i följande kodblock (med ditt klient namn i stället för <your-tenant-name>):The appConfig definition should look similar to the following code block (with your tenant name in the place of <your-tenant-name>):

    // The current application coordinates were pre-registered in a B2C tenant.
    var appConfig = {
      b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/api/demo.read"],
      webApi: "http://localhost:5000/"
    };
    

Köra SPA-och webb-API: etRun the SPA and web API

Slutligen kör du både webb-API: et för ASP.NET Core och Node. js-programmet på den lokala datorn.Finally, you run both the ASP.NET Core web API and the Node.js single-page application on your local machine. Sedan loggar du in på ett program med en enda sida och trycker på en knapp för att initiera en begäran till det skyddade API: et.Then, you sign in to the single-page application and press a button to initiate a request to the protected API.

Även om båda programmen körs lokalt i den här självstudien använder de Azure AD B2C för säker registrering/inloggning och för att bevilja åtkomst till det skyddade webb-API: et.Although both applications run locally in this tutorial, they use Azure AD B2C for secure sign-up/sign-in and to grant access to the protected web API.

Kör ASP.NET Core webb-APIRun the ASP.NET Core web API

I Visual Studio trycker du på F5 för att bygga och felsöka lösningen WebAPI. SLN .In Visual Studio, press F5 to build and debug the B2C-WebAPI.sln solution. När projektet startas visas en webb sida i din standard webbläsare som visar att webb-API: et är tillgängligt för förfrågningar.When the project launches, a web page is displayed in your default browser announcing the web API is available for requests.

Om du föredrar att använda dotnet CLI i stället för Visual Studio:If you prefer to use the dotnet CLI instead of Visual Studio:

  1. Öppna ett konsol fönster och ändra till den katalog som innehåller filen @no__t -1. CSPROJ .Open a console window and change to the directory containing the *.csproj file. Exempel:For example:

    cd active-directory-b2c-dotnetcore-webapi/B2C-WebApi

  2. Skapa och kör webb-API: et genom att köra dotnet run.Build and run the web API by executing dotnet run.

    När API: et är igång bör du se utdata som liknar följande (för självstudien kan du ignorera eventuella NETSDK1059-varningar):When the API is up and running, you should see output similar to the following (for the tutorial, you can safely ignore any NETSDK1059 warnings):

    $ dotnet run
    Hosting environment: Production
    Content root path: /home/user/active-directory-b2c-dotnetcore-webapi/B2C-WebApi
    Now listening on: http://localhost:5000
    Application started. Press Ctrl+C to shut down.
    

Kör ensidesappenRun the single page app

  1. Öppna ett konsol fönster och ändra till den katalog som innehåller Node. js-exemplet.Open a console window and change to the directory containing the Node.js sample. Exempel:For example:

    cd active-directory-b2c-javascript-msal-singlepageapp

  2. Kör följande kommandon:Run the following commands:

    npm install && npm update
    node server.js
    

    Konsolfönstret visar portnumret där programmet finns.The console window displays the port number of where the application is hosted.

    Listening on port 6420...
    
  3. Gå till http://localhost:6420 i webbläsaren om du vill visa programmet.Navigate to http://localhost:6420 in your browser to view the application.

  4. Logga in med e-postadressen och lösen ordet som du använde i föregående självstudie.Sign in using the email address and password you used in the previous tutorial. Vid lyckad inloggning bör du se meddelandet User 'Your Username' logged-in.Upon successful login, you should see the User 'Your Username' logged-in message.

  5. Klicka på knappen anropa webb-API .Select the Call Web API button. SPA får ett bemyndigande från Azure AD B2C och ansluter sedan till det skyddade webb-API: et för att visa innehållet på index sidan:The SPA obtains an authorization grant from Azure AD B2C, then accesses the protected web API to display the contents of its index page:

    Web APi returned:
    "<html>\r\n<head>\r\n  <title>Azure AD B2C API Sample</title>\r\n ...
    

Nästa stegNext steps

I den här självstudiekursen lärde du dig att:In this tutorial, you learned how to:

  • Lägga till ett program för webb-APIAdd a web API application
  • Konfigurera omfånget för ett webb-APIConfigure scopes for a web API
  • Ge behörigheter till webb-API:tGrant permissions to the web API
  • Konfigurera exemplet för att använda programmetConfigure the sample to use the application

Nu när du har sett en SPA-begäran en resurs från ett skyddat webb-API, får du en djupare förståelse för hur dessa program typer interagerar med varandra och med Azure AD B2C.Now that you've seen an SPA request a resource from a protected web API, gain a deeper understanding of how these application types interact with each other and with Azure AD B2C.